🦖3 minutes to create a game using JavaScript

Hieu Le — Tue, 11 Apr 2023 15:29:02 +0000

You can see the full code here https://github.com/phocaplaptrinh/simple-chrome-dinosaur-game

Firstly, in order to draw graphics on a webpage, HTML provides a tag called <canvas>. Therefore, I will use the two.js library, which helps me to manipulate the canvas more easily and quickly.

I will embed this library into my index.html file. I also create a game.js file where I will write all of my code and then embed it into the webpage.

<!DOCTYPE html>
<html>
<head>
    <title>Dinosaur Game</title>
</head>
<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.8.10/two.min.js"></script>
    <script src="game.js"></script>
</body>
</html>

Next, I create a game screen that is 500 pixels wide and 300 pixels high, and I specify that my game will be displayed using the canvas. After that, I attach this screen to an element on the webpage, specifically to the body element.

let screen = new Two({
    width: 500,
    height: 300,
    type: Two.Types.canvas
});
screen.appendTo(document.body);

Now, I run the webpage using the Live Server extension on Visual Studio Code. You can see that it has already created a canvas for me.

Oh, I almost forgot to mention that I will create a mini-game featuring a jumping dinosaur, similar to the one that appears on Google Chrome when there is no internet connection 😊.
Next, I will draw a dinosaur on my game screen 🦖. I have prepared an image of a dinosaur with a size of 140 x 140 pixels.

And I will place the dinosaur at the position with x-coordinate of 50 and y-coordinate of 200.
To play the game, we need to press the play button, right? 😁

screen.play();

Now, I will return to the website, and you can see that the dinosaur has appeared, but it is a bit too large.

let dinosaur = screen.makeSprite('dinosaur.png', 50, 200);

Please note that the canvas has its coordinate origin located at the top left corner, where the x-value increases towards the right and the y-value increases towards the bottom.

I will reduce its size by half.

dinosaur.scale = 0.5;

And it looks better now.

Next, I will draw the ground to make the dinosaur stand on instead of hovering in the air. I draw a straight line with the starting point at (0, 235) and the ending point at (500, 235).

let ground = screen.makeLine(0, 235, 500, 235);

You can refer to the image below to understand why I chose these values.

Now, I will draw the enemy of the dinosaur, which is a cactus 🌵. I also have an image of a cactus with a size of 60 x 140 pixels.

And I draw it in the same way as I drew the dinosaur.

let cactus = screen.makeSprite('cactus.png', 400, 200);
cactus.scale = 0.5;

It looks beautiful now.

Next, I need to make the cactus move to the left. I will create an update function and call it continuously.

function update() {

}

screen.bind('update', update);

And I will continuously decrease the x-coordinate of the cactus by 5 units to make the cactus move further to the left.

function update() {
    cactus.position.x -= 5;
}

You may notice that the cactus moves to the left, but it goes out of the screen and disappears.

Therefore, I want to make sure that when one cactus disappears, a new cactus will appear. So, I will check if the x-coordinate of the cactus is less than 0, meaning it goes out of the screen, I will reset the x-coordinate of the cactus to its initial position.

function update() {
    cactus.position.x -= 5;

    if (cactus.position.x < 0) {
        cactus.position.x = 400;
    }
}

And then we can see the result.

However, it looks weird when the cactus appears in the middle of the screen. Therefore, I will place its initial position outside the screen, for example, at 600.

We still can't play the game. Now, I need to make the dinosaur jump when I press the space bar. I will capture the event of pressing a key, and if the pressed key is the space bar, I make the dinosaur jump about 150 pixels.

document.addEventListener('keypress', function(e) {
    if (e.key == ' ') {
        dinosaur.position.y -= 150;
    }
})

Returning to the game, when I press the space key, you will see that the dinosaur has jumped up and not fallen down.

So, I will make the dinosaur fall down by continuously increasing its y-coordinate value.

dinosaur.position.y += 3;

However, the problem now is that it doesn't stop when it touches the ground.

So, I will set a condition that the dinosaur will only fall when its y-coordinate is lower than the initial coordinate of 200.

if (dinosaur.position.y <= 200) {
    dinosaur.position.y += 3;
}

Another problem is that I can press the space key multiple times to make the dinosaur fly too high, so I will add a condition that the dinosaur can only jump up when it is at its initial coordinate.

if (e.key == ' ' && dinosaur.position.y >= 200) {
    dinosaur.position.y -= 150;
}

Now it's okay, while the dinosaur is jumping, pressing the space key has no effect.

The final step is to write a condition to check that when the dinosaur touches the cactus, the game will stop. You can think about why I wrote it like this.

if (dinosaur.position.x + 35 >
        cactus.position.x - 15 &&
        dinosaur.position.y + 35 >
        cactus.position.y - 35
) {
    screen.pause();
}

Thank you for reading this article ❤️ and if you are interested in this article, you can buy me a coffee ☕.

DEV Community: Hieu Le

🦖3 minutes to create a game using JavaScript