Un juego de carreras estilo Mario Kart y que haya muchos autos selecionable y que tenga dos jugadores y ropa seleccionable's game

Click here for free DL of the app version that can save data.

No:39177

←

Prev Next

→

Un juego de carreras estilo Mario Kart y que haya ..ALL
Developer User17547｜Date and time 24/1/27 5:32:06
Build time 22.427 sec｜Game capacity 4.376KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
      background-color: gray;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

// Clase Auto
    function Car(imageSrc, x, y) {
      this.sprite = new Image();
      this.sprite.src = imageSrc;
      this.x = x;
      this.y = y;
      this.speedX = 0;
      this.speedY = 0;
      this.isPlayer = false;

this.update = function() {
        if (gameOver) {
          return;
        }
        this.x += this.speedX;
        this.y += this.speedY;
        canvasContext.drawImage(this.sprite, this.x, this.y);
      }

this.reset = function() {
        this.x = canvas.width / 2;
        this.y = canvas.height / 2;
        this.speedX = 0;
        this.speedY = 0;
      }
    }

// Inicialización del juego
    function gameStart() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');
      
      // Crear autos
      car1 = new Car('car1.png', canvas.width / 2 - 50, canvas.height - 100);
      car1.isPlayer = true;
      car2 = new Car('car2.png', canvas.width / 2 + 50, canvas.height - 100);

// Iniciar intervalo de juego
      setInterval(gameUpdate, 20);

// Event listeners de entrada
      document.addEventListener('keydown', handleKeyDown);
      document.addEventListener('keyup', handleKeyUp);
    }

// Actualización del juego
    function gameUpdate() {
      drawBackground();

// Actualizar y dibujar autos
      car1.update();
      car2.update();

// Colisiones con los bordes de la pista
      if (car1.x < 10 || car1.x > canvas.width - 60 || car1.y < 10 || car1.y > canvas.height - 60) {
        player2Score++;
        car1.reset();
      }

if (car2.x < 10 || car2.x > canvas.width - 60 || car2.y < 10 || car2.y > canvas.height - 60) {
        player1Score++;
        car2.reset();
      }

// Actualizar puntuación
      drawScores();

// Verificar fin del juego
      if (player1Score >= 3 || player2Score >= 3) {
        gameOver = true;
        drawGameOver();
      }
    }

// Dibujar fondo
    function drawBackground() {
      canvasContext.fillStyle = 'green';
      canvasContext.fillRect(0, 0, canvas.width, canvas.height);

canvasContext.fillStyle = 'black';
      canvasContext.fillRect(5, 5, canvas.width - 10, canvas.height - 10);
    }

// Dibujar puntuación
    function drawScores() {
      canvasContext.fillStyle = 'white';
      canvasContext.fillText('Jugador 1: ' + player1Score, 20, 20);
      canvasContext.fillText('Jugador 2: ' + player2Score, canvas.width - 120, 20);
    }

// Dibujar mensaje de fin de juego
    function drawGameOver() {
      canvasContext.fillStyle = 'white';
      if (player1Score >= 3) {
        canvasContext.fillText('¡Jugador 1 ganó!', canvas.width / 2 - 60, canvas.height / 2);
      } else {
        canvasContext.fillText('¡Jugador 2 ganó!', canvas.width / 2 - 60, canvas.height / 2);
      }
    }

// Eventos de teclado
    function handleKeyDown(e) {
      if (e.keyCode === 37) { // Flecha izquierda
        car1.speedX = -5;
      } else if (e.keyCode === 39) { // Flecha derecha
        car1.speedX = 5;
      } else if (e.keyCode === 38) { // Flecha arriba
        car1.speedY = -5;
      } else if (e.keyCode === 40) { // Flecha abajo
        car1.speedY = 5;
      } else if (e.keyCode === 65) { // Tecla A
        car2.speedX = -5;
      } else if (e.keyCode === 68) { // Tecla D
        car2.speedX = 5;
      } else if (e.keyCode === 87) { // Tecla W
        car2.speedY = -5;
      } else if (e.keyCode === 83) { // Tecla S
        car2.speedY = 5;
      }
    }

// Iniciar juego cuando se carga la página
    window.onload = function() {
      gameStart();
    }
  </script>
</body>
</html>