Um Código de alejandrob.f2012

589 alejandrob.f2012

Abrir no Editor Publique Seu Código

Recomendado

12 April 2025

Um Código de Dossousandrin

10 March 2025

Barra de navegação responsiva premium

2 June 2025

Um Código de youssefdahroug2005

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>

Um Código de alejandrob.f2012

Recomendado

Um Código de Dossousandrin

Barra de navegação responsiva premium

Um Código de youssefdahroug2005

HTML

CSS

JS

Recomendado

Um Código de Dossousandrin

Barra de navegação responsiva premium

Um Código de youssefdahroug2005

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS