Game Creation

Lets Jump!

To play the game just click anywhere on the page to jump and avoid the block!

How to make a web game?

Follow along with all the steps needed to learn how to make a web game and make your own when you master these steps!

1. The Title of our game

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!".

2. The Game container

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!

3. The Player on our game

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!

4. The Block object

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!

5. Positioning our containers inside the 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 project!

    All standard CSS length units that can be used
  1. px: Sets a fixed offset in pixels.
  2. %: Calculates the offset relative to the containing block's dimensions (width for left/right, height for top/bottom).
  3. em: Calculates the offset relative to the element's own font-size.
  4. rem: Calculates the offset relative to the root (<html>) font-size.
  5. Viewport units (vw, vh, vmin, vmax): Relative to the browser window size.

6. Block Animation

Coming Soon!