Ein Code von alejandrob.f2012

418 alejandrob.f2012

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

28 March 2025

CodePen Home Outlined Mobile Cards

23 February 2025

Ein Code von ha11072004cc

13 November 2024

Rahmeneffekt für Bilder mit reinem CSS

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>

Empfohlen

CodePen Home Outlined Mobile Cards

Ein Code von ha11072004cc

Rahmeneffekt für Bilder mit reinem CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS