Move a Square with HTML5 Buttons

Code Explanation

This HTML5 game demonstrates how to create a simple game area where a red square can move in different directions using buttons. Let's break down the key parts of the code:

1. HTML Structure

The HTML structure consists of a canvas element and buttons that control the movement of the square. The canvas is used to draw the red square, and the buttons are linked to functions that move the square up, down, left, or right.

<div style="text-align:center;width:480px;">
  <button onclick="moveup()">UP</button><br><br>
  <button onclick="moveleft()">LEFT</button>
  <button onclick="moveright()">RIGHT</button><br><br>
  <button onclick="movedown()">DOWN</button>
</div>

2. Canvas and Game Area Initialization

The startGame function initializes the game by creating a red square using the component function and starting the game area. The myGameArea object creates a canvas element, sets its dimensions, and appends it to the document body. The start method also sets an interval to repeatedly call the updateGameArea function every 20 milliseconds, creating a game loop.

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

3. The component Function

The component function creates an object representing the red square. It sets the initial position and size of the square, and defines two key methods: update and newPos. The update method draws the square on the canvas, while newPos updates the square's position based on the current speed.

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }    
}

4. Moving the Square

The square's movement is controlled by the functions moveup, movedown, moveleft, and moveright. Each function adjusts the speed of the square in the corresponding direction, and the newPos method updates its position. When a button is clicked, the square moves faster in the selected direction.

function moveup() {
    myGamePiece.speedY -= 1; 
}
function movedown() {
    myGamePiece.speedY += 1; 
}
function moveleft() {
    myGamePiece.speedX -= 1; 
}
function moveright() {
    myGamePiece.speedX += 1; 
}

5. Game Loop and Updating the Game Area

The updateGameArea function is the core of the game loop. It first clears the canvas to remove the previous position of the square, then updates the square's position and redraws it on the canvas.

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();    
    myGamePiece.update();
}

Conclusion

This simple game demonstrates the basics of using HTML5 canvas and JavaScript to create an interactive game area. By controlling the movement of a square with buttons, you can see how game loops, canvas drawing, and object-oriented programming can be used together to create a dynamic user experience. As you click the directional buttons, the red square moves faster, showcasing how changes in speed and position are continuously updated and rendered on the canvas. This code can be expanded into more complex games by adding additional elements, collision detection, and more intricate controls.