Un codice di alejandrob.f2012

798 alejandrob.f2012

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

5 December 2025

Modello HTML della dashboard di registrazione del sito Web

16 July 2025

Modulo di accesso Glassmorphic

13 June 2025

Un codice di ashimadison8

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>

Un codice di alejandrob.f2012

Consigliato

Modello HTML della dashboard di registrazione del sito Web

Modulo di accesso Glassmorphic

Un codice di ashimadison8

HTML

CSS

JS

Consigliato

Modello HTML della dashboard di registrazione del sito Web

Modulo di accesso Glassmorphic

Un codice di ashimadison8

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS