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

265 alejandrob.f2012

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

26 May 2025

Liamgilles76 द्वारा एक कोड

2 February 2025

yefersonsotohenao द्वारा एक कोड

8 June 2025

अलेजांद्रोकुन्द्राह द्वारा लिखित 'ए कोड'

HTML

<!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 द्वारा एक कोड

अनुशंसित

Liamgilles76 द्वारा एक कोड

yefersonsotohenao द्वारा एक कोड

अलेजांद्रोकुन्द्राह द्वारा लिखित 'ए कोड'

HTML

CSS

JS

अनुशंसित

Liamgilles76 द्वारा एक कोड

yefersonsotohenao द्वारा एक कोड

अलेजांद्रोकुन्द्राह द्वारा लिखित 'ए कोड'

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS