My Second Post

Time to get our background scrolling. In order to achieve this we need to create two identical images, one drawn directly after the other side by side.

let width = 0;

function draw() {
    requestAnimationFrame(draw);

    c.drawImage(img, width, 0);
    c.drawImage(img, width + canvas.width, 0);
}

To get them moving, we’ll have them move 2 pixels to the left by subtracting from the width variable each time the frame is redrawn.

//let width = 0;

function draw() {
    //requestAnimationFrame(draw);

    let scrollSpeed = 2;
    //c.drawImage(img, width, 0);
    //c.drawImage(img, width + canvas.width, 0);

    width -= scrollSpeed;
}

When the first image begins to move offscreen, the second image trails right next to it giving the illusion of a scrolling background. Finally, we need to make sure the first image resets to it’s original position once it has fully left the screen, so the illusion can continue.

//let width = 0;

function draw() {
    //requestAnimationFrame(draw);

    //let scrollSpeed = 2;
    //c.drawImage(img, width, 0);
    //c.drawImage(img, width + canvas.width, 0);

    //width -= scrollSpeed;

    if(width <= -1 * canvas.width){
        width = 0;
    }
}

There we have it! Our scrolling background. It is only the first component of the game, but I think it looks quite nice.

Afterwards I encapsulated this little snippet of code into it’s own function, aptly named scrollBackground() and call it from within draw(). This isn’t necessary, but since I know this draw() is going to have a lot more code as we go along, it’s my way of keeping things tidy.

I also created an object ‘background’ to contain the image object and width variables. The less variables occupying the global namespace, the better.

In the next page we will start creating our moveable game objects as well as create event listeners for the keyboard! Click here to read on.

So, we’ve come up with our brilliant idea, setup the project and laid down our side-scrolling background. Time to get our player on the screen as well as get him moving.

The Game Rules

In our game, the player moves sideways while many adorable pups pass him and he simply must pet them before he loses the chance. At first glance it may be tempting to give our player free reign of the screen.

But this is our MVP - and our motto here is to keep it simple. If dogs come in continuously across the screen horizontally, I decided it would be good enough to have the player move up and down to try and ‘catch’ them before they pass. Not only does it make my life easier, but it adds a little extra gameplay difficulty.

The Player.

First I consider what a player is. He has a width, a height, an x and y coordinate on the grid - which can be updated to allow him to ‘move’ - as well as an image representation.

I split up the Player into three steps.

This adorable derpy dinosaur comes from the free assets section at itch.io. I used a third party app to separate the gif into separate sprites to use later in my walking animation -