Learn how to code a Falling Ball game with the basics of web development. (HTML, CSS & Javascript)

LINK TO GAME:
LINK TO CODE:

Follow me below and reach out if you need any help!
Twitter:
Instagram:

Create HTML elements, a div with ID “game” and ID “character”. Style the game div. A width, height, border and margin: auto. Style the character div. A width, height and a background color of red, a border radius of 50%, position: relative, left and to, z-index of 1million.

Create two very similar functions, moveLeft and moveRight. They create a variable equal to the current left position of the character, and then set a new left position for the character while either adding or subtracting 2 pixels.

Create an event listener that runs whenever you press the left and right arrow keys. Inside create an interval that runs the right function depending which arrow key they pressed.

Create another event listener, when you unpress any of the keys, clears the interval and stops the ball from moving.

Create new HTML elements with JS, create variables block and hole and make them equal to document.createElement(“div”). Add some attributes to them, classes and IDs. Now append them to our game div.

Now our block and hole need styling. First add a width, height and background color to the block, position relative and set the top to 100px. Then the hole, a width, height and a background color of white, position relative and a top of 100px as well.

Create a variable “random” and set it to a random number lower than the width of the game minus the width of the hole. Set the left position of the hole to that random variable.

Created an interval function so that we create more blocks and holes. Create a variable called counter and set it to 0. Increment it every time we make a new block. Now add it to the ID of the block and hole.

Now we have a bunch of blocks and holes all being created ontop of eachother so we need to find a way to find the block and hole that was created last and add 100px to the top so that the new one is below it.

Create two variables called holeLast and blockLast, equal to the block or hole with the ID one below the current counter. Create two new variables equal to the top positions of the last hole and block.

Add an if statement around our code so it will only execute if the last hole and blocks top position is below 400. We still need to force it to create the first block and hole, to do that add an OR to the if statement and make it counter==0.

Now it will only create blocks and holes if they fit inside our game div.

Create an array called current blocks, whenever we create a new block and hole, append the counter to the array.

Then create a for loop that loops over the length of the array. Inside create a new variable called current which is equal to the value in the array. Then create two variables ihole and iblock which are equal to the blocks and holes with the ID the same as the current variable. Next create a variable that is equal to the top position of the block we just got. Then we’re going to set new top positions for the block and hole by making it the same as it was, but then removing 0.5px from it.

Create two new variables characterLeft and characterTop. Create a variable called drop and set it to 0. Create a if statement inside the for loop that increments the drop variable if the character is currently on top of a block. Inside of that if statement, create another if statement that will set drop back to 0 if you’re currently over a hole.

Then after our for loop we’ll create an if statement that makes the ball fall if drop == 0 or makes it raise up if drop != 0.

Now our game is done all we need to do is add an if statement, if the character top is above the top, then the game is over, alert game over with the users score, and then refresh when they click okay.

Thats it!