Friday 24 April 2020

Day 9 of Drawing Code

Day 9 of Drawing Code Flappy Square
Step 1 was to add the name "Flappy Square" to the top corner.
Step 2 was to add the score to the other corner.
Step 3 was to test the game and make a few changes to make the game more challenging. I changed gravity and the height that the block jumps.
Step 4 was to change the colors of the things inside the game. I made the walls purple and the square blue.

Day 8 of Drawing Code

Day 8 of Drawing Code Flappy Square
Step 1 was to make sure the square wasn't going through any walls.
Step 2 was to space out and size the walls.
Step 3 was to space the distance between the two walls.

Wednesday 22 April 2020

Day 7 of Drawing Code

Day 7 of Drawing Code Flappy Square
Step 1 was to make the square fly by clicking the screen.
Step 2 was to add the boundary so the square stays above it.
Step 3 was to make the walls move in the background.
Step 4 was to create an infinite number of walls.
Step 5 was to make sure there was a border for the walls.

Tuesday 21 April 2020

Day 6 of Drawing Code

 Day 6 of Drawing Code Flappy Square
Step 1 was to write the functions.
Step 2 was to add context.translate.
Step 3 was to use context.save and restore.
Step 4 was draw a series of frames.
Step 5 was to clear the canvas in between frames.
Step 6 was to give it more simulation of gravity.

Monday 20 April 2020

Day 5 of Drawing Code

Day 5 of Drawing Code Flappy Square
Step 1 was to learn how to use the coordinate system. 
Step 2 was to draw the flappy square.
Step 3 was to make a border for the game using context.strokeRect.
Step 4 was to add the square and the boundary plus walls to avoid. 
Step 5 was to add variables to the code.
Step 6 was to add a hash to the code.
The main thing that confused me was with the wording on the third step about making the boundary. it confused me because instead of using (0,0) as the corner they wanted to use (25,25) which then messed up my numbers for the size of the boundary.

Friday 17 April 2020

Day 4 of Drawing Code

Day 4 of Drawing Code Basic Cityscape
Step 1 was to draw a row of random buildings.
Step 2 was to draw a row of different scale buildings.
Step 3 was to draw the buildings darker when the scale gets smaller.
Step 4 was to put together the buildings and cover the entire canvas.
The shortcuts and steps were pretty easy to understand but the code is really finicky. Near the end there were a lot of lines of code but overall it wasn't extremely complicated.

Thursday 16 April 2020

Day 3 of drawing code

Day 3 of Drawing Code Basic Cityscape
Step one was to draw three different types of windows on the buildings.
Step two was to draw different types of roofs.
Step three was to put in a random integer for the floors.
Step four was to put in a code to make random buildings.

Wednesday 15 April 2020

Day 2 Drawing Code

Day 2 of Drawing Code Basic Cityscape 
Step 1 was to edit the DrawBuilding() function to add a window to the building.
Step 2 was to add a window to the top row of the building.
Step 3 was to add windows to the whole building.
The one thing that was a struggle was a bracket that was in the wrong place so that the code wasn't working properly.

Tuesday 14 April 2020

Drawing code day 1

Day 1 of Drawing Code Basic Cityscape
The first step was to learn how to draw a rectangle using code.
The second step was to learn how to draw the ground line.
The third step was to learn how to make the building shape resting on the ground.
The fourth step was to learn how to add color the the building.
 The main part that was the hardest was the math because it got confusing at times and the code is really sensitive to mistakes.
The fifth step was to start adding variables to the code.
The sixth step was to add a program to calculate to the position and size of the building.
The seventh step was to write a function to draw the building.
The eighth step was to use translate() to position the building.