Have you always wanted to create your own game, but don't know where to start? You're lucky! Today I'm going to guide you through the exciting process of developing a simple game using HTML5 Canvas and JavaScript. You don't need to be an expert programmer to follow this tutorial; All you need is a little enthusiasm and desire to learn. In the end, you'll have a basic game running that you can proudly display.
Introduction to HTML5 Canvas
Before we dive into coding, it is crucial to understand what the HTML5 Canvas is and how it can help us in game development. Canvas provides a rectangular space on your web page where you can draw various graphics. This capability makes it ideal for rendering games, from simple puzzles to dynamic 2D shooters.
Setting up your Project
To get started, you need to have a text editor to write your code, such as Visual Studio Code, and a modern browser to view the results of your game. Create a new HTML file and name it index.html. Here is the basic skeleton of your HTML file:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Game on Canvas</title>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script src="game.js"></script>
</body>
</html>In this code, we have included an element canvas and an external JavaScript file called game.js, where we will put all the logic of our game.
Giving life to our Canvas
Go now to your new file game.js and let's start by writing some code to draw on the Canvas. The first thing is to obtain a reference to the canvas and its context, which we use to draw:
const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); // We set the dimensions of the canvas canvas.width = 800; canvas.height = 600; // Draw a red rectangle ctx.fillStyle = 'red'; ctx.fillRect(100, 100, 50, 50);With these few lines of code, we set the size of our canvas and use the context to draw a simple red rectangle.
Creating a Basic Game: Ping-Pong
We are going to create a very basic version of the classic Ping-Pong game. For this, we need to draw the paddle, the ball and manage the logic to make them move.
Drawing the Paddle and the Ball
In game.js, you define some properties for the paddle and the ball, and create functions to draw them:
// Palette properties const paddleWidth = 100; const paddleHeight = 20; let paddleX = (canvas.width - paddleWidth) / 2; let paddleY = canvas.height - paddleHeight; let paddleSpeed = 20; // Ball properties let ballX = canvas.width / 2; let ballY = canvas.height / 2; let ballRadius = 10; let ballSpeedX = 2; let ballSpeedY = -2; // Function to draw the palette function drawPaddle() { ctx.fillStyle = 'blue'; ctx.fillRect(paddleX, paddleY, paddleWidth, paddleHeight); } // Function to draw the ball function drawBall() { ctx.beginPath(); ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2); ctx.fillStyle = 'black'; ctx.fill(); ctx.closePath(); }Animating the Game
To make both the ball and the paddle move, we need to write a little more code. We are going to update the position of the ball and check if it collides with the walls of the canvas or with the paddle. Also, we must handle user input to move the palette:
function updateGame() { // Update positions ballX += ballSpeedX; ballY += ballSpeedY; // Check for collision with walls if (ballY + ballSpeedY < ballRadius || ballY + ballSpeedY > canvas.height - ballRadius) { ballSpeedY = -ballSpeedY; } if (ballX + ballSpeedX < ballRadius || ballX + ballSpeedX > canvas.width - ballRadius) { ballSpeedX = -ballSpeedX; } // Draw everything ctx.clearRect(0, 0, canvas.width, canvas.height); drawPaddle(); drawBall(); // Request for the next animation frame requestAnimationFrame(updateGame); } updateGame(); // Keyboard event to move the paddle window.addEventListener('keydown', function(e) { if (e.key === 'ArrowLeft' && paddleX > 0) { paddleX -= paddleSpeed; } else if ( e.key === 'ArrowRight' && paddleX < canvas.width - paddleWidth) { paddleX += paddleSpeed;With this, we now have a basic game working. The ball will bounce off the walls and you can move the paddle with the arrow keys on the keyboard.
Conclusions and Next Steps
Congratulations! You've created your first game using HTML5 Canvas and JavaScript. This is just the beginning. There are many ways you can expand this game. You could include a scoring system, increase the difficulty by adding more balls, or even create levels with different obstacles.
If you are interested in continuing to learn about game development or any other topic related to programming, feel free to visit my blog for more resources, or if you have any questions, you can always contact me.
Now, I encourage you to experiment with the code we have written. Modify the colors, sizes and speeds to see how you can make the game even more exciting. Have fun programming!
English 
Spanish