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
playerthat represents the player character in the game. It contains properties such asxandy(initial position),widthandheight(dimensions), andspeed(movement speed).
const player = {
x: 250,
y: 250,
width: 50,
height: 50,
speed: 5
};
- The
movePlayerfunction is defined to handle the movement of the player. It takes aneventparameter representing a keydown event.
function movePlayer(event) {
// Move the player based on the key pressed
}
- Inside the
movePlayerfunction, there are severalifstatements that check which arrow key was pressed based on theevent.keyCode. If the up arrow (keyCode 38) is pressed, the player’syposition is decreased. If the down arrow (keyCode 40) is pressed, theyposition is increased. If the left arrow (keyCode 37) is pressed, thexposition is decreased. If the right arrow (keyCode 39) is pressed, thexposition 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
drawPlayerfunction is called to redraw the player’s updated position on the canvas.
drawPlayer();
- The
drawPlayerfunction is responsible for drawing the player on the canvas. It first clears the canvas using theclearCanvasfunction, then sets the fill style to red, and finally draws a rectangle representing the player using thefillRectmethod of the 2D rendering context (ctx).
function drawPlayer() {
clearCanvas();
ctx.fillStyle = "red";
ctx.fillRect(player.x, player.y, player.width, player.height);
}
- The
clearCanvasfunction is called bydrawPlayerto clear the entire canvas before drawing the updated player position. It uses theclearRectmethod 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
keydownevent of the window object. Whenever a key is pressed while the window has focus, themovePlayerfunction 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>
