Let's put "Lets Jump" in the <title> tag nested in the <head> tag.
At this point our page already has a title!
Let's also apply our first <h2> tag in the <body> tag with the same title "Lets Jump!".
A <div> tag with the name "game" as id nested in the <body> tag.
<div> tag by itself is just a container ready to working on it. We need CSS for displaying it.
We can apply directly in our HTML with <style> tag inside the <head> tag.
Since it's an id "game" we need "#" followed by "game" to start styling our game object.
Let's apply our width and height to make the dimensions and then a border to display it into the screen!
This time we need a nested <div> tag with the name "player" as id in our <div id="game">.
We can apply the css right after #game with #player on <style> tag.
We can start styling our player object with the width and height to make the dimensions and then a border to display it into the screen just like the game container.
Then we shall see in the top left corner of our game container our player!
Bellow <div id="player">, we will put <div id="block">.
The first css of block will be with just width, height and border just like others.
It will display right bellow our player container inside our game container!
In css, first we put position:relative in our main container "#game".
Then we put position:absolute in each of elements we want to positioning using the properties left and top (most common) or right and bottom.
For <div id="player"> and <div id="block"> we can style them #player and #block respectively with "px" or percentage "%" for this game!
The property @keyframes let's us make an animation with css!
For instance, the name "animatedBlock" will be our @keyframes name and inside of it we put how from what point it will start till it end. Since our block is on right position at 90% from left we start from 0% to 100% (values in percentage relative to our game container).
For smoother movement we should choose initial point, middle point and ending point, 0%{left:94%}, then 50%{left:50%;} and finally 100%{left:0%;}.
To input the property @keyframes we use on our block the property animation with a length of 5 seconds of animation and "infinite" for the block animation always running in loop.
Animation proceeds at a constant speed from the start to the end, with no acceleration or deceleration with "linear".
Let's use again the property @keyframes to make an animation and call it the name "animatedJump" on our #player css.
We will use again from 0% to 100% in three steps (0%,50%,100%) but now from top position!
The start point will have the same position than the ending point, 0%{left:420px}, then 50%{left:300px;} and finally 100%{left:420px;}.
Animation will take a length of 2 seconds and "infinite" for better understanding of how movement is being done!
First, we remove the animation property from the #player css and create a class with the name "animationJump".
Onto this class we will put the entire line of animation and we remove "infinite" from that line.
We are ready now to make our player to Jump by adding a javascript function into the <script> tag.
What this function will do is to add the animation to our player object and will last the 2 seconds (2000ms) until new trigger.
Adding the function jumpPlayer() with onclick to our <html> tag will allow our player to jump!
Starting with left position of the block we put a range where the player is located. It is needed parseInt in order to work the left property of the block.
A range of the top position of the player is also set to where the player could possible hit the block using parseInt onto the player's top property.
A function setInterval will always running second by second to check if the game will attend to those conditions. When the conditions are met, it triggers a confirm event with "Collision". And the block object needs to disappear to prevent multiple triggering of confirm event.
So to avoid multiple confirm prompts on the page, it will be turned off on output but the code is all displayed in the code box, on left!
First, add a div with id="scorer" inside the game div.
In the internal CSS, style it with a font-size, color, and position absolute and align it using top and left properties.
Then, use setInterval function to run a check at a fixed interval (in milliseconds). Each time the block triggers its animation, add one point to the score.
When the block is hit, display the total number of jumps the player has performed!
That's a wrap! 🎉 Add blocks, crank the difficulty, change the colors, and see how far your creativity can take you.
Build your own version of the game!