Chrome Dinosaur Game using Javascript

This is the continuation of the previous blog on how to create games using the Javascript library Kaboom.js

Let's start building!!

In this part we will be importing sprites inside our game, also we will be looping the obstacles.

Step 1:

Looping the obstacles

Let's create a separate file for looping the obstacles. We will create a function and use the built-in loop() function inside kaboom.

loop(n, () => action) - Run the callback every n seconds.

function addObs() {

    loop(1.7, () => {
        add([
            pos(width(), 320),
            rect(70, 70),
            color(255,0,0),
            area(),
            body(),
            "Object",
        ])
    })
}

module.exports = addObs

We will be giving the x-axis as width() of the canvas so that these are spawning at the end of the canvas. We are also going to export it so that we can import it inside the main index.js file.

And in the index.js file we will import it using:

const addObs = require('./obstacle') // obstacle is the name of the file.

After importing it we will use addObs() anywhere inside the game scene.

Step 2:

Importing Sprites

For importing a sprite use the loadSprite() method. But if you are importing a sprite sheet for animating it later, use the loadSpriteAtlas() method.

We will be using the loadSpriteAtlas():

loadSpriteAtlas('./sprites/dino.png', {
    "Dino": {
        x: 0,
        y: 0,
        width: 528,
        height: 94,
        sliceX: 6,
        anims: {
            idle: { from: 0, to: 0 },
            run: { from: 1, to: 3, loop: true, speed: 20 },
            dead: { from: 4, to: 5 }
        }
    }
})

"Dino" -> is the name of the sprite. x & y -> are the positions on the sprites. width & height -> w & h of the sprite sheet. sliceX or sliceY -> if you have a sprite sheet and horizontally you have let's say 6 sprite in the first row then you give the sliceX as 6 and similarly you give the sliceY.

Since I have 6 sprites only in my sprites sheet and all of them in a line, I am giving sliceX as 6. Now if I say frame "0" it will give me the first sprite on the sprite sheet.

And then you can give the animations as shown.

Now, in place of the react() and color() we can write sprite("sprite-name").

const dino = add([
        pos(width()/2-100, 100),
        sprite("Dino", { anim: "run" }),
        area(),
        body(),
    ])

We will do the same for the obstacles. You can import the sprite in the main index.js file and use it in the obstacle.js.

Step 3

Adding Score

In order to have a score system inside the game, we will first set let score = 0, then inside the game scene, we will set the score to 0.

To display the score on the screen we will add the following:

const score_text = add([
        text(score)
    ])

Now, to know if the dino has crossed the obstacles we will add a custom object inside the obstacles. It will look something like this:

add([
            pos(width(), 320),
            sprite("obstacle", { anim: "a" }),
            area(),
            body(),
            "Object",
            { passed: false } // <- This
        ])

Now, inside the action where we are moving the obstacles, we will add one condition which is:

action("Object", (Object) => {
        Object.move(-400, 0)

        if (Object.passed === false && Object.pos.x < dino.pos.x) {
            Object.passed = true
            score += 1
            score_text.text = score
        }
    })

Now, we will be also showing the score on the game-over scene:

add([
        text("Game Over\n" + "Score:" + score)
    ])

The End...

If you have any doubts or any query you can join my discord channel
You can also watch my video on this tutorial: Playlist

Chrome Dinosaur Game 🎮 Using 📜 JavaScript! | Kaboom.Js 💥 Tutorial #3

Step 1:

Step 2:

Step 3