alejandrob.f2012 द्वारा एक कोड

583 alejandrob.f2012

अनुशंसित

18 February 2025

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Juego de Carreras</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #000;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    // Configuración inicial
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

// Tamaño del canvas
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Variables del juego
    const carWidth = 50;
    const carHeight = 100;
    let carX = canvas.width / 2 - carWidth / 2;
    let carY = canvas.height - carHeight - 20;
    let carSpeed = 10;

const obstacles = [];
    let obstacleSpeed = 5;
    let score = 0;
    let gameOver = false;

// Dibujar el auto
    function drawCar(x, y) {
      ctx.fillStyle = 'red';
      ctx.fillRect(x, y, carWidth, carHeight);
    }

// Dibujar obstáculos
    function drawObstacle(obstacle) {
      ctx.fillStyle = 'blue';
      ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    }

// Crear nuevos obstáculos
    function createObstacle() {
      const width = Math.random() * 100 + 50; // Ancho aleatorio
      const x = Math.random() * (canvas.width - width); // Posición X aleatoria
      obstacles.push({ x, y: -50, width, height: 20 });
    }

// Actualizar posición de los obstáculos
    function updateObstacles() {
      for (let i = 0; i < obstacles.length; i++) {
        obstacles[i].y += obstacleSpeed;

// Detectar colisión con el auto
        if (
          carX < obstacles[i].x + obstacles[i].width &&
          carX + carWidth > obstacles[i].x &&
          carY < obstacles[i].y + obstacles[i].height &&
          carY + carHeight > obstacles[i].y
        ) {
          gameOver = true;
        }

// Eliminar obstáculos fuera de la pantalla
        if (obstacles[i].y > canvas.height) {
          obstacles.splice(i, 1);
          score++;
        }
      }
    }

// Dibujar la puntuación
    function drawScore() {
      ctx.fillStyle = 'white';
      ctx.font = '20px Arial';
      ctx.fillText(`Puntuación: ${score}`, 10, 30);
    }

// Manejar eventos del teclado
    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowLeft' && carX > 0) {
        carX -= carSpeed;
      } else if (e.key === 'ArrowRight' && carX < canvas.width - carWidth) {
        carX += carSpeed;
      }
    });

// Bucle principal del juego
    function gameLoop() {
      if (gameOver) {
        ctx.fillStyle = 'red';
        ctx.font = '40px Arial';
        ctx.fillText('¡Fin del Juego!', canvas.width / 2 - 120, canvas.height / 2);
        ctx.fillText(`Puntuación Final: ${score}`, canvas.width / 2 - 150, canvas.height / 2 + 50);
        return;
      }

// Limpiar el canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar elementos
      drawCar(carX, carY);
      obstacles.forEach(drawObstacle);
      drawScore();

// Actualizar lógica del juego
      updateObstacles();

// Crear nuevos obstáculos aleatoriamente
      if (Math.random() < 0.02) {
        createObstacle();
      }

// Aumentar la velocidad gradualmente
      if (score % 10 === 0 && score !== 0) {
        obstacleSpeed += 0.1;
      }

// Repetir el bucle
      requestAnimationFrame(gameLoop);
    }

// Iniciar el juego
    gameLoop();
  </script>
</body>
</html>

alejandrob.f2012 द्वारा एक कोड

अनुशंसित

कोडपेन होम वैलेंटाइन

मेटे का एक कोड

मेटेहान का एक कोड

HTML

CSS

JS

अनुशंसित

कोडपेन होम वैलेंटाइन

मेटे का एक कोड

मेटेहान का एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS