Project Title
===

## Table of Contents

[TOC]

## Beginners Guide

This project is intended for less to no programming experiences users. The main focus of this project is to guide beginner to have fun making game while learning some basic vocab of coding.

Game flows
---
The illutrastion below described the main flow of game making. At first run (innitialization), the game would take in all variables setting at inital value then perform render function to draw on screen. The program then move to waiting stage. In this stage, as a programmer, we predict the user interaction and dictate how the program should handle these events. Often, programmers would set out multiple channels of outcomes and seperate them with conditional statements (if ... else). These outcomes will be used as new settings to update our initial configurations then re-draw a new screen.

>Game flow

Real-life examples translated to code using our diagrams:
- Imagine you are watching me on your screen

| Life | Diagram Object | Code |
| -----| -------- | -------- |
|Our calendar|Displaying Screen|<canvas></canvas>
| Sun is shine| Settings|let sun= shine|
| Soccer is scheduled to on|Settings|let soccer= on|
| If sun is shine, put soccer On calendar otherwise take it Off|Events Instruction|if(sun===shine){soccer=True} else {soccer=False}
|nothing happen yet|Events|
| Because, the condition is met. We put soccer On our calendar|Render|render()
| suddenly, it started to rain. Not shine.met our conditional events update instruction|Events|
|Setting now updated|Update|soccer=false sun= !shine
| We need to re-draw our calendar to take Off soccer|Render|render()

HTML
---
HTML is the structure and content of your website. The content will be place inside tags (`<h1></h1>,<span></span>,<canvas></canvas>...`)
We will draw our game inside of a HTML Canvas

  <div class="ui">
      <h1>Score: <span id="score"> </span></h1>
      <canvas id="myCanvas" width="500" height="620"></canvas>
      <h1>Level: <span id="level"> </span></h1>
    </div>

CSS
---
CSS contain the styling configuration of your website. If you look at the style.css file, there are some starter codes I have written to save ourselves some time to focus on the real deal.
Your CSS would look like this:

* {
  padding: 0;
  margin: 0;
  height: 100vh;
  box-sizing: border-box;
}
canvas {
  background: none;
  position: relative;
  border: 1px solid rgba(200, 200, 200, 0.9);
}
.ui {
  display: flex;
  justify-content: space-around;
  /* background: url("../images/uiBack.jpg") no-repeat center center fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.intro {
  width: 118px;
  height: 38px;
  background: url("../images/startlogo.png")no-repeat center center fixed;
  position: absolute;
  align-self: center;
}
.reset {
  width: 100px;
  height: 100px;
  font-family: sans-serif;
  position: absolute;
  align-self: center;
}

###### tags: `Doodlesjump` `Beginner` `JavaScript` `CoderSchool`