Coding Day 9 - Flappy Square Stage 5

Today was the last day of coding for me, I have done both projects that were here and it came out to nine days which is still pretty good. Today was just adding the finishing touches to the existing code.
1. The first step was just to add the name of the game "Flappy Square" in the top left side of the screen	The second addition was to make a score counter, which will add one score roughly every one second (800 miliseconds)
3. This section suggests that we changes some of the properties of our code, like the gravity, the space in between obstacles, how often they appear, the rate of the score counter, the frame rate and other possible options. I actually like what the example used so I copied what they did.	4. the final step was to change the colour of the flappy square and the obstacles to give it more character. I again went with the colour the answers provided, and that creates our final product

Coding Day 8 - Flappy Square Stage 4

The project is really starting to turn into a game with this stage of the tutorial. With that of course the code is getting pretty difficult and a lot longer. I know I'll probably have to rely on the answer for the rest of the time coding
1. For a game to actually work it needs collision detection, as so the game can interact with itself. The collision detection we need is to when the cube hits an obstacle, the game ends.	2. To make the game a bit more challenging and not as boring, we make the obstacles randomly spaced out.
3. to take it just a little further, we ended up adding random amounts of space between the obstacles at different heights

Coding Day 7 - Flappy Square Stage 3

This is the beginning of the movement of the game. It's not terribly difficult but the lines of code are getting very long. I'm still heavily relying on the answer to get by though because I get lost easily
1. This adds a line of code that responds to clicking on the canvas. As you can see in the picture, the square is higher, every click brings it higher	2. The point of the game is to avoid obstacles, so we needed to add code that when the square leaves the game boundary, the game is over
3. This challenge shows us how to move our obstacles to the left, making it look like your flappy square is moving through them	4. we need to have the square go on forever or else the game would consist of three obstacles.
5.Finally we needed to make the squares be contained in the border.

Coding Day 6 - Flappy Square Stage 2

Today posed challenge but it wasn't impossible like the City Scape felt like. It feels like I'm getting a lot more out of this, it's most likely because of the small restart because it's teaching us everything over again, giving you a chance to better understand
1. The first section explains to us to make a new function to make the rectangle obstacles easier to be placed because we'll be needed lots of them through-out the game	2. because we are making a boundary, and everything has to fit, we need to do math to place everything, but this teaches us to move our XY value origin point from the top left to the edge of the border, making placing easier
3. when using the "context.restore" code, it keeps the code without resetting it, but if you don't use "context.restore", it will make certain lines of code alter, for example. shifting the size of our Flappy square.	4. this introduces us to the animation part of the code, where as you can see in the photo, simply copies the flappy square lower and lower to show what falling would look like
5. This code will delete the square prior to the newest addition, making it look like a choppy animation of a falling square	6. This teaches us to simulate gravity. using "Var gravity" and "Var Velocity" (Var meaning variable to be used for multiple shapes) will make a fluent falling cube

Coding Day 5 - Flappy Square Stage 1

I am so happy to see that the second stage essentially restarts coding and goes back to the beginning, allowing me to get a better understanding of the code. This was so much easier than the first one. Our goal for this is to make a flappy bird game.
1. This re-explains the co-ordinate system, using X and Y values to position your shapes	2. This tells us the size of our flappy bird, the code is the same through-out the whole thing for the square
3. This shows us a new shape "context.strokeRect", which lets us make a outline, or in this case, the Game border where all our shapes and action will happen	4. This has us placing our obstacles for the game, just rectangles with a small gap for the square to get through
5. This has us using variables to make the square, rectangles, and border	6. This shows us how to group variables. what I mean by that is when you have multiple variables using, for example the word "Square", you can put it under a group so you don't have to repeat the word over again

Coding Day 4 - The Basic Cityscape Stage 4

Just moving on to the next stage as I have been, still very difficult, still trying to make sense of it, I'm sure eventually it will click but for now I'm heavily relying on the answers
1. This one has us using the variables again to make random sized buildings, but in a set size, making it to where you can control the area that the buildings generate in.	2. This one has use use a scale variable that will still randomize the height but limit just how tall they can be to get a layer of smaller buildings
3. this one has us using a darker colour to make it look like the buildings are more distant	4. The final one has us combining all the aspects to make a layered cityscape fully randomized

Coding Day 3 - The Basic Cityscape Stage 3

The Coding has gotten difficult very quickly. It's somewhat hard to try and remember each aspect, and even harder to remember how they interact. I have to consult the answer so often to try and get my code right. I understand what code wants us to do, like variables being used instead of XY or size values, but the typing of the code is hard
2. section one has us using variations of windows to make the buildings unique	2. this again has us making the buildings unique, making different roof styles for each building
3. this has us making the height of buildings random, again increasing how unique the buildings will be	4. this is the combination of all of those aspects. running the code will result in a completely random building, size, window type, and roofs are all random.

Coding Day 2 - The Basic CityScape Stage 2

Today was more difficult than the last, and I know it won't get any easier but hopefully I can understand the code as I go on. I'm doing a stage a day because I often go back over my code as well as the actual answer to try and understand
1. The first challenge has us learn the code to move our XY point of origin. When you add a shape, it usually goes based off the top left corner, but using the new code, it allows us to go based off an existing shape to better place overlapping squares	2. this challenge tells us how to repeat a shape over a set amount of space and instances. it makes setting windows on a building much quicker and a lot more simple
3. This one is essentially the same as 2, but it lets us do a grid of shapes as apposed to a row or column. this again will make building windows a lot easier

Coding Day 1 - The Basic Cityscape Stage 1

To begin today's code I chose to do the Cityscape as well as the Flappy Square. I'll be doing one stage every post
1. The first challenge was easy enough. You learn that all objects are based around X and Y for positioning. so to make a cube in the spot you want, you would first type your X value to move it right, then your Y to move it down	2. again, an easier one to do, we make a long rectangle to act as our ground for the city. simply use different values to change shape and position of objects
3. This challenge was to change your Y value to interact with your ground level. you would add "Ground - (y)" instead of just your Y value to have it rest on the ground	4. This is where you had to add colour, but even  when when you would type the code for it, it wouldn't work. I had to use the solution and copy-paste the code, even though it was the same answer, just to get it to work
5. This was, visually, a combination of 3 and 4, the same issue popped up where I had to copy the colour code for it to work. this used variables instead of plugging in numbers. you had to put what numbers you wanted all the squares to be, then when making the actual rectangle, using the variables that represent the values	6. This is where it got very challenging. instead of just adding the values, you had to calculate the size of the building floors and offices, so instead of adding, for example, a size of "100, 100" you would have to say "10 *10" for the value. This messed with me severely, and I had to look at the answer multiple times to understand
7. this one had us make a set list of rules essentially for the buildings. it was useful because you could put multiple buildings, as you would in 3 or 4, but because you have the list, all the buildings would look the same.	8. this one I actually had a lot of issues with and honestly do not fully understand. before starting work on Stage 2, I'll be scanning through all these to get a refresher and understand better.