Blog

Creando tu primer juego con HTML5 Canvas y JavaScript

¿Siempre has querido crear tu propio juego, pero no sabes por dónde comenzar? ¡Estás de suerte! Hoy te voy a guiar a través del emocionante proceso de desarrollo de un juego simple utilizando HTML5 Canvas y JavaScript. No necesitas ser un experto programador para seguir este tutorial; lo único que necesitas es un poco de entusiasmo y ganas de aprender. Al final, tendrás un juego básico corriendo que podrás mostrar con orgullo.

Índice de contenido

Introducción al HTML5 Canvas

Antes de sumergirnos en la codificación, es crucial entender qué es el Canvas de HTML5 y cómo nos puede ayudar en el desarrollo de juegos. Canvas proporciona un espacio rectangular en tu página web donde puedes dibujar gráficos variados. Esta capacidad lo hace ideal para renderizar juegos, desde simples puzzles hasta dinámicos shooters en 2D.

Configurando tu Proyecto

Para empezar, necesitas tener un editor de texto para escribir tu código, como Visual Studio Code, y un navegador moderno para ver los resultados de tu juego. Crea un nuevo archivo HTML y nómbralo index.html. Aquí está el esqueleto básico de tu archivo HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Primer Juego en Canvas</title>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script src="game.js"></script>
</body>
</html>

En este código, hemos incluido un elemento canvas y un archivo JavaScript externo llamado game.js, donde pondremos toda la lógica de nuestro juego.

Dando vida a nuestro Canvas

Dirígete ahora a tu nuevo archivo game.js y comencemos escribiendo algo de código para dibujar en el Canvas. Lo primero es obtener una referencia al canvas y su contexto, el cual usamos para dibujar:

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Establecemos las dimensiones del canvas
canvas.width = 800;
canvas.height = 600;

// Dibuja un rectángulo rojo
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 50, 50);

Con estas pocas líneas de código, configuramos el tamaño de nuestro canvas y utilizamos el contexto para dibujar un simple rectángulo rojo.

Creando un Juego Básico: Ping-Pong

Vamos a crear una versión muy básica del clásico juego de Ping-Pong. Para esto, necesitamos dibujar la paleta, la pelota y manejar la lógica para que se muevan.

Dibujando la Paleta y la Pelota

En game.js, defines algunas propiedades para la paleta y la pelota, y creas funciones para dibujarlas:

// Propiedades de la paleta
const paddleWidth = 100;
const paddleHeight = 20;
let paddleX = (canvas.width - paddleWidth) / 2;
let paddleY = canvas.height - paddleHeight;
let paddleSpeed = 20;

// Propiedades de la pelota
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballRadius = 10;
let ballSpeedX = 2;
let ballSpeedY = -2;

// Función para dibujar la paleta
function drawPaddle() {
    ctx.fillStyle = 'blue';
    ctx.fillRect(paddleX, paddleY, paddleWidth, paddleHeight);
}

// Función para dibujar la pelota
function drawBall() {
    ctx.beginPath();
    ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = 'black';
    ctx.fill();
    ctx.closePath();
}

Animando el Juego

Para hacer que tanto la pelota como la paleta se muevan, necesitamos escribir un poco más de código. Vamos a actualizar la posición de la pelota y comprobar si choca con las paredes del canvas o con la paleta. También, debemos manejar las entradas del usuario para mover la paleta:

function updateGame() {
    // Actualizar las posiciones
    ballX += ballSpeedX;
    ballY += ballSpeedY;

    // Revisar colisión con las paredes
    if (ballY + ballSpeedY < ballRadius || ballY + ballSpeedY > canvas.height - ballRadius) {
        ballSpeedY = -ballSpeedY;
    }
    if (ballX + ballSpeedX < ballRadius || ballX + ballSpeedX > canvas.width - ballRadius) {
        ballSpeedX = -ballSpeedX;
    }

    // Dibuja todo
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPaddle();
    drawBall();

    // Solicitud para el próximo cuadro de animación
    requestAnimationFrame(updateGame);
}

updateGame();

// Evento del teclado para mover la paleta
window.addEventListener('keydown', function(e) {
    if (e.key === 'ArrowLeft' && paddleX > 0) {
        paddleX -= paddleSpeed;
    } else if (e.key === 'ArrowRight' && paddleX < canvas.width - paddleWidth) {
        paddleX += paddleSpeed;
    }
});

Con esto, ya tenemos un juego básico funcionando. La pelota rebotará en las paredes y podrás mover la paleta con las flechas del teclado.

Conclusiones y Pasos Siguientes

¡Felicidades! Has creado tu primer juego usando HTML5 Canvas y JavaScript. Este es solo el comienzo. Hay muchas maneras en las que puedes expandir este juego. Podrías incluir un sistema de puntuación, aumentar la dificultad agregando más pelotas o incluso crear niveles con diferentes obstáculos.

Si te interesa continuar aprendiendo sobre desarrollo de juegos o cualquier otro tema relacionado con la programación, no dudes en visitar mi blog para más recursos, o si tienes alguna pregunta, siempre puedes contactarme.

Ahora, te animo a experimentar con el código que hemos escrito. Modifica los colores, tamaños y velocidades para ver cómo puedes hacer que el juego sea aún más emocionante. ¡Diviértete programando!