🦖3 minutes to create a game using JavaScript
Tags: javascript, programming, tutorial, frontend
Published: 2023-04-11 15:29:02

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7f31d2avzw9qlrht0oow.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxt1eo1sorrbmwox7f7r.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbyzmre0i8f5mnmnklk6.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ur0pxy4619adv4n30pax.png)




```
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k35yy1omfcj0nz338nnl.png)

I will reduce its size by half.

```
dinosaur.scale = 0.5;
```

And it looks better now.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxzk2y5s6xv2xtkyp1af.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3thnusealksdqq9fh6j.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzjy6fv2d8jx2prc79n6.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugzoxa7i8qyn48jtaz4g.png)

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s56hq6scisqvmwsoz60l.gif)

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uetjgsr3t53idcgdfo7u.gif)

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc0lsdhohne712nii2yr.gif)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tukotrr117nlo8xf2pgb.gif)


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 ☕.
[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/lehieu6290)