Simple Canvas JavaScript Game

The given code demonstrates a simple game where a player can move around a canvas using the arrow keys. Let’s break it down step by step:

The code starts by selecting the canvas element from the HTML document using its ID and assigns it to the variable canvas.

const canvas = document.getElementById("canvas");

The next line obtains a 2D rendering context from the canvas, which allows us to draw and manipulate graphics on the canvas. This context is stored in the variable ctx.

const ctx = canvas.getContext("2d");

The code defines an object called player that represents the player character in the game. It contains properties such as x and y (initial position), width and height (dimensions), and speed (movement speed).

const player = {
  x: 250,
  y: 250,
  width: 50,
  height: 50,
  speed: 5
};

The movePlayer function is defined to handle the movement of the player. It takes an event parameter representing a keydown event.

function movePlayer(event) {
  // Move the player based on the key pressed
}

Inside the movePlayer function, there are several if statements that check which arrow key was pressed based on the event.keyCode. If the up arrow (keyCode 38) is pressed, the player’s y position is decreased. If the down arrow (keyCode 40) is pressed, the y position is increased. If the left arrow (keyCode 37) is pressed, the x position is decreased. If the right arrow (keyCode 39) is pressed, the x position is increased.

if (event.keyCode === 38) {
  player.y -= player.speed;
} else if (event.keyCode === 40) {
  player.y += player.speed;
} else if (event.keyCode === 37) {
  player.x -= player.speed;
} else if (event.keyCode === 39) {
  player.x += player.speed;
}

After moving the player, the drawPlayer function is called to redraw the player’s updated position on the canvas.

drawPlayer();

The drawPlayer function is responsible for drawing the player on the canvas. It first clears the canvas using the clearCanvas function, then sets the fill style to red, and finally draws a rectangle representing the player using the fillRect method of the 2D rendering context (ctx).

function drawPlayer() {
  clearCanvas();
  ctx.fillStyle = "red";
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

The clearCanvas function is called by drawPlayer to clear the entire canvas before drawing the updated player position. It uses the clearRect method of the 2D rendering context (ctx) to clear the canvas from the top-left corner (coordinates 0, 0) to the bottom-right corner (width and height of the canvas).

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

Finally, the code attaches an event listener to the keydown event of the window object. Whenever a key is pressed while the window has focus, the movePlayer function will be called to handle the player movement.

window.addEventListener("keydown", movePlayer);

Overall, this code sets up a simple game where the player can


<!DOCTYPE html>
<html>
<head>
<title>Simple JavaScript Game</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create the player
const player = {
  x: 250,
  y: 250,
  width: 50,
  height: 50,
  speed: 5
};

// Move the player
function movePlayer(event) {
    if (event.keyCode === 38) {
    player.y -= player.speed;
  } else if (event.keyCode === 40) {
    player.y += player.speed;
  } else if (event.keyCode === 37) {
    player.x -= player.speed;
  } else if (event.keyCode === 39) {
    player.x += player.speed;
  }
  drawPlayer();
}

// Draw the player
function drawPlayer() {
    clearCanvas();
  ctx.fillStyle = "red";
  ctx.fillRect(player.x, player.y, player.width, player.height);
}
function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// Start the game
window.addEventListener("keydown", movePlayer);

</script>
</body>
</html>

Share this:

Related