Game Arcade Inventor Project
Normal
60 mins
540 points
What you need:
  • Computer/laptop

Arcade Dino Jump

Recreate the classic Google Chrome Dino Jump game in Arcade!

This message will be visible to everyone. Send

    This code along has finished! ⌚

    You can watch it back by playing the video!

    The code along is open for everyone to join in but if you would like to earn the points and badges please join our club!

    1 - Create a new arcade project

    Go to the arcade.makecode.com website and create a new project.

    2 - Draw the map

    In this game the dino will run through a long map and jump over cactuses, just like the classic Google Chrome game.

    Add the following code and then click on the box in the set tilemap to block to open up the map editor.

    scene.setBackgroundColor(9)
    tiles.setTilemap(tilemap`level1`)
    
    
    

    In the map editor, set the dimensions of your map to be width 100 and height 8. Then draw a ground tile all the way along the bottom and a finish tile at the end. You can choose any tiles that you want.

    Then make all the ground tiles walls using the draw walls tool.



    3 - Create the dino sprite

    In the game you will be controlling a dino character that runs and jumps over the cactuses.

    Add the following new code to your project to create your sprite and use the sprite editor to design your dino sprite underneath the set tilemap to block.

    scene.setBackgroundColor(9)
    tiles.setTilemap(tilemap`level1`)
    let mySprite = sprites.create(img`
        . . . . . . . . . . . . . . . . 
        . . . . . . . . 7 7 7 7 7 7 7 . 
        . . . . . . . 7 7 . . . 7 7 7 7 
        . . . . . . . 7 7 . 7 . 7 7 7 7 
        . . . . . . . 7 7 . . . 7 7 7 7 
        . . . . . . . 7 7 7 7 7 7 7 7 7 
        . . . . . . . 7 7 7 7 7 7 7 7 . 
        . . . . . . 7 7 7 7 7 7 . . . . 
        7 . . . . 7 7 7 7 7 7 7 7 7 . . 
        7 7 . . 7 7 7 7 7 7 7 7 . 7 . . 
        7 7 7 7 7 7 7 7 7 7 7 7 . . . . 
        7 7 7 7 7 7 7 7 7 7 7 . . . . . 
        . 7 7 7 7 7 7 . 7 7 . . . . . . 
        . . . . 7 7 . . 7 7 . . . . . . 
        . . . . 7 . . . . 7 . . . . . . 
        . . . . 7 7 . . . 7 7 . . . . . 
        `, SpriteKind.Player)
    mySprite.ay = 400
    mySprite.vx = 100
    scene.cameraFollowSprite(mySprite)
    

    The set [ay (acceleration y)] to block will simulate gravity by pulling the sprite down and the set [vx (velocity x)] to block will make the dino move to the right.

    The camera follow sprite block will make the camera follow the sprite as it moves to the right.




    4 - Make it jump

    Now let's program the A button (the space bar on your keyboard) to make the dino jump. You can only jump when the dino is touching the ground so we will use an if then block to test if mySprite is hitting wall [bottom].

    If it is then we will play sound [jump up] and set [vy velocity y] to -200 this will make mySprite move up.

    Add the following code.

    controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
        if (mySprite.isHittingTile(CollisionDirection.Bottom)) {
            music.jumpUp.play()
            mySprite.vy = -200
        }
    })
    let mySprite: Sprite = null


    5 - Add the cactuses

    Now let's add some cactuses the tile map.

    Click on the box in the set tilemap to block, add a new tile and paint a cactus. Then place the cactuses at different points along your map.




    6 - Detect hitting a cactus

    Now let's detect if you hit a cactus and if you do then it's game over.

    Add the following code to your project. Make sure you select the cactus tile in the on (sprite) of kind (Player) overlaps block.




    scene.onOverlapTile(SpriteKind.Player, assets.tile`myTile1`, function (sprite, location) {
        game.over(false, effects.slash)
    })


    7 - Keep score

    The player will earn points depending how long they can go without hitting a cactus.

    Add a set score to 0 inside the on start block.

    let mySprite: Sprite = null
    scene.setBackgroundColor(9)
    tiles.setTilemap(tilemap`level1`)
    mySprite = sprites.create(img`
        . . . . . . . . . . . . . . . . 
        . . . . . . . . 7 7 7 7 7 7 7 . 
        . . . . . . . 7 7 . . . 7 7 7 7 
        . . . . . . . 7 7 . 7 . 7 7 7 7 
        . . . . . . . 7 7 . . . 7 7 7 7 
        . . . . . . . 7 7 7 7 7 7 7 7 7 
        . . . . . . . 7 7 7 7 7 7 7 7 . 
        . . . . . . 7 7 7 7 7 7 . . . . 
        7 . . . . 7 7 7 7 7 7 7 7 7 . . 
        7 7 . . 7 7 7 7 7 7 7 7 . 7 . . 
        7 7 7 7 7 7 7 7 7 7 7 7 . . . . 
        7 7 7 7 7 7 7 7 7 7 7 . . . . . 
        . 7 7 7 7 7 7 . 7 7 . . . . . . 
        . . . . 7 7 . . 7 7 . . . . . . 
        . . . . 7 . . . . 7 . . . . . . 
        . . . . 7 7 . . . 7 7 . . . . . 
        `, SpriteKind.Player)
    mySprite.ay = 400
    mySprite.vx = 100
    scene.cameraFollowSprite(mySprite)
    info.setScore(0)

    And then add this code to give a point every 100 milliseconds (1 tenth of a second).

    game.onUpdateInterval(100, function () {
        info.changeScoreBy(1)
    })


    8 - Win the game

    Now let's add some code to detect if you reach the end of the game.

    Add the following code to your project and make sure you select the end 'winning' tile in the on (sprite) of kind (Player) overlaps block.




    scene.onOverlapTile(SpriteKind.Player, sprites.builtin.forestTiles0, function (sprite, location) {
        game.over(true, effects.confetti)
    })


    9 - Create an animation asset

    As a final touch let's animate the dino's legs so it looks like it is running.

    Follow these steps to create an animation asset:

    1. Click on the 'Assets' link at the top.
    2. Select your dino tile.
    3. Click on the 'Copy' button.
    4. Click on 'New Asset'.
    5. Click on 'Animation'.
    6. Press the Ctrl and V keys on your keyboard at the same time. This will paste in your dino design.
    7. Click on the button to duplicate your design into a new frame.
    8. Select the new frame.
    9. Use the eraser tool to erase the dino's legs.
    10. Click on the button to show the previous frame underneath.
    11. Use the pencil tool to draw new shorter legs.
    12. Click the Done button.


    10 - Program the animation

    Now add the animate frames block inside the on start block, select your animation asset and toggle loop to on.

    This will make the mySprite use your animation asset and loop it over and over.

    let mySprite: Sprite = null
    scene.setBackgroundColor(9)
    tiles.setTilemap(tilemap`level1`)
    mySprite = sprites.create(img`
        . . . . . . . . . . . . . . . . 
        . . . . . . . . 7 7 7 7 7 7 7 . 
        . . . . . . . 7 7 . . . 7 7 7 7 
        . . . . . . . 7 7 . 7 . 7 7 7 7 
        . . . . . . . 7 7 . . . 7 7 7 7 
        . . . . . . . 7 7 7 7 7 7 7 7 7 
        . . . . . . . 7 7 7 7 7 7 7 7 . 
        . . . . . . 7 7 7 7 7 7 . . . . 
        7 . . . . 7 7 7 7 7 7 7 7 7 . . 
        7 7 . . 7 7 7 7 7 7 7 7 . 7 . . 
        7 7 7 7 7 7 7 7 7 7 7 7 . . . . 
        7 7 7 7 7 7 7 7 7 7 7 . . . . . 
        . 7 7 7 7 7 7 . 7 7 . . . . . . 
        . . . . 7 7 . . 7 7 . . . . . . 
        . . . . 7 . . . . 7 . . . . . . 
        . . . . 7 7 . . . 7 7 . . . . . 
        `, SpriteKind.Player)
    mySprite.ay = 400
    mySprite.vx = 100
    scene.cameraFollowSprite(mySprite)
    info.setScore(0)
    animation.runImageAnimation(
    mySprite,
    assets.animation`myAnim`,
    200,
    true
    )


    11 - Play the game

    That's it you've completed the project! Have a play of your game and test that your cactuses are placed so that it is challenging to complete it.

    Have you any ideas on how to improve the game, what could you add to it that would make it better?

    Join our club 😃

    Create your profile, earn points & badges and learn how to code!

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more