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 ☕.
Top comments (0)