Moving objects on a canvas

Question

I’m trying to build a game in canvas just to improve my skills set. The idea is there’s two objects on the screen that are player-controlled. I initialise the game with players, and then start a game loop that listens for player input.

At the moment, I can draw the players on the canvas (simply rectangles at this stage). However, I’m having trouble moving these objects on each “tick” of the game loop. At the moment, the rectangle is just drawn on top of the rectangle in the previous frame; I want to clear the canvas and re-draw the “players” in each tick.

How would I go about this? And is it the best way, or is there a better approach?

I’d post a code sample, but my JavaScript file is quite verbose and I’m hoping the description above is sufficient.

Answer 1

If the appearance of the players doesn't change from frame to frame, then I would use three separate canvas elements: one for the background and one for each player. Then you don't have to redraw anything, just change the CSS left and top values for each player canvas.

If the appearance of the players does change, then you'll need to redraw them. But you still might want to use a separate canvas for each one. That way you don't have to redraw the background. You can just draw and position each player.

Of course if the background changes or moves, you'll need to redraw it anyway. In that case you might just use a single canvas, or experiment with the separate canvases. With regard to the specific question of how to clear the background (or any canvas) before redrawing, here are a couple of ways to clear a canvas.

Either way, use requestAnimationFrame() in browsers that support it, instead of setTimeout() or setInterval(). If you search for requestAnimationFrame polyfill you will find many examples of how to do this and still support old browsers. Here's a good requestAnimationFrame polyfill.

Answer 2

Here is a good tutorial with a basic game loop. It renders a background, monsters and a player.

http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

    // The main game loop
    var main = function () {
       var now = Date.now();
       var delta = now - then;

       update(delta / 1000);
       render();

       then = now;
    };

You update your object positions in update and then call render.

Answer 3

I'm sorry, but having a separate canvas for each element in the scene, as another user sugested, is a terrible idea. And that won't improve your skills set in anyway.

Yes, you have to redraw everything on a single canvas, even the objects that don't transform from one frame to another. Clearing the canvas is simple, use the context.clearRect(0, 0, canvas.width, canvas.height) or do a fillRect to paint the background with some color, or draw an image on the entire canvas to have a static background, anything that covers the whole canvas will do.

So, you update the objects, clear the canvas, then, redraw everything. Since you just have 2 rects and the only thing that changes is their position this will be really easy to implement.

When you start making more complex things you might want to go for a more object-oriented aproach, by that I mean each object in your scene needs to "know how to draw themselves", like:

var player1 = new PlayerRect(position);
player1.draw(context);

This way you'd update it's position in the loop doing something like this:

player.position.x += 10;

In case you end up with hundreds of objects, all you have to do is a list where you could add/remove these objects and a loop calling their draw method.

I mean, that's the way I do it.