¡Claro! Aquí te dejo un ejemplo básico de un videojuego en HTML, CSS y JavaScript. Se trata de un juego de "Pong" clásico.
*index.html*
```
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pong</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>
```
*styles.css*
```
body {
background-color: #f0f0f0;
}
#canvas {
border: 1px solid #000;
}
```
*script.js*
```
// Obtener el canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Definir constantes
const WIDTH = canvas.width;
const HEIGHT = canvas.height;
const BALL_SIZE = 20;
const PADDLE_WIDTH = 10;
const PADDLE_HEIGHT = 100;
const FPS = 60;
// Definir variables
let ballX = WIDTH / 2;
let ballY = HEIGHT / 2;
let ballVelX = 5;
let ballVelY = 5;
let paddle1Y = HEIGHT / 2 - PADDLE_HEIGHT / 2;
let paddle2Y = HEIGHT / 2 - PADDLE_HEIGHT / 2;
let score1 = 0;
let score2 = 0;
// Función para dibujar el canvas
function draw() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
ctx.fillStyle = '#000';
ctx.fillRect(0, paddle1Y, PADDLE_WIDTH, PADDLE_HEIGHT);
ctx.fillRect(WIDTH - PADDLE_WIDTH, paddle2Y, PADDLE_WIDTH, PADDLE_HEIGHT);
ctx.beginPath();
ctx.arc(ballX, ballY, BALL_SIZE / 2, 0, 2 * Math.PI);
ctx.fill();
ctx.font = '36px Arial';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillStyle = '#000';
ctx.fillText(score1, 10, 10);
ctx.textAlign = 'right';
ctx.fillText(score2, WIDTH - 10, 10);
}
// Función para actualizar el juego
function update() {
ballX += ballVelX;
ballY += ballVelY;
if (ballY < 0 || ballY > HEIGHT - BALL_SIZE) {
ballVelY = -ballVelY;
}
if (ballX < 0) {
score2++;
ballX = WIDTH / 2;
ballY = HEIGHT / 2;
ballVelX = -ballVelX;
}
if (ballX > WIDTH - BALL_SIZE) {
score1++;
ballX = WIDTH / 2;
ballY = HEIGHT / 2;
ballVelX = -ballVelX;
}
if (ballX < PADDLE_WIDTH && ballY > paddle1Y && ballY < paddle1Y + PADDLE_HEIGHT) {
ballVelX = -ballVelX;
}
if (ballX > WIDTH - PADDLE_WIDTH - BALL_SIZE && ballY > paddle2Y && ballY < paddle2Y + PADDLE_HEIGHT) {
ballVelX = -ballVelX;
}
}
// Función para manejar los eventos del teclado
function handleKeyDown(event) {
if (event.key === 'w') {
paddle1Y -= 10;
}
if (event.key === 's') {
paddle1Y += 10;
}
if (event.key === 'ArrowUp') {
paddle2Y -= 10;
}
if (event.key === 'ArrowDown') {
paddle2Y += 10;
}
}
// Agregar eventos
document.addEventListener('keydown', handleKeyDown);
// Función principal
function main() {
update();
draw();
setTimeout(main, 1000 / FPS);
}
// Iniciar el juego
main();
```
Puedes abrir el archivo `index.html` en un navegador web para jugar. Utiliza las teclas "W" y "S" para controlar la paleta izquierda, y las flechas "Arriba" y "Abajo" para controlar la paleta derecha.
