Juego de carreras en 3D's game

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

No:21779

←

Prev Next

→

Juego de carreras en 3D
Developer User10073｜Date and time 23/10/18 9:30:08
Build time 71.704 sec｜Game capacity 3.699KB｜

Script

Aquí tienes un ejemplo de cómo se puede implementar un juego de carreras en 3D en un solo archivo HTML utilizando JavaScript:

Este código crea un juego de carreras 3D donde controlas la posición de un automóvil azul para evitar obstáculos rojos que caen desde arriba. El objetivo es sobrevivir el mayor tiempo posible sin chocar. Los obstáculos se generan aleatoriamente en la parte superior de la pantalla y al colisionar con el automóvil, el juego termina y muestra la puntuación obtenida. El juego se puede jugar en un dispositivo móvil, ya que el tamaño del lienzo del juego se ajusta automáticamente al ancho y alto de la ventana del navegador. Utiliza pictogramas simples representados por colores planos para la representación visual del automóvil y los obstáculos.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Aquí tienes un ejemplo de cómo se puede implementar un juego de carreras en 3D en un solo archivo HTML utilizando JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Juego de Carreras 3D</title>
  <style>
    canvas { display: block; }
  </style>
</head>
<body>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      document.body.appendChild(canvas);

const player = {
        x: canvas.width / 2,
        y: canvas.height - 50,
        width: 50,
        height: 100,
        color: 'blue'
      };

const obstacles = [
        { x: 100, y: -50, width: 100, height: 50, color: 'red' },
        { x: 300, y: -50, width: 100, height: 50, color: 'red' },
        { x: 500, y: -50, width: 100, height: 50, color: 'red' }
      ];

let score = 0;
      let gameSpeed = 3;
      let isGameOver = false;

function drawPlayer() {
        context.fillStyle = player.color;
        context.fillRect(player.x, player.y, player.width, player.height);
      }

function drawObstacles() {
        obstacles.forEach((obstacle) => {
          context.fillStyle = obstacle.color;
          context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
        });
      }

function updatePlayer() {
        if (player.x < 0 || player.x + player.width > canvas.width) {
          endGame();
        }
      }

function updateObstacles() {
        obstacles.forEach((obstacle) => {
          obstacle.y += gameSpeed;

if (isCollision(player, obstacle)) {
            endGame();
          }

if (obstacle.y > canvas.height) {
            score++;
            obstacle.y = -50;
            obstacle.x = Math.random() * (canvas.width - obstacle.width);
          }
        });
      }

function endGame() {
        isGameOver = true;
        alert('Game Over! Puntuación: ' + score);
        resetGame();
      }

function resetGame() {
        score = 0;
        isGameOver = false;
        player.x = canvas.width / 2;
        player.y = canvas.height - 50;
        obstacles.forEach((obstacle) => {
          obstacle.y = -50;
          obstacle.x = Math.random() * (canvas.width - obstacle.width);
        });
      }

function isCollision(player, obstacle) {
        return player.x < obstacle.x + obstacle.width &&
               player.x + player.width > obstacle.x &&
               player.y < obstacle.y + obstacle.height &&
               player.y + player.height > obstacle.y;
      }

function update() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawPlayer();
        drawObstacles();
        updatePlayer();
        updateObstacles();

if (!isGameOver) {
          requestAnimationFrame(update);
        }
      }

update();
    });
  </script>
</body>
</html>
```

Este código crea un juego de carreras 3D donde controlas la posición de un automóvil azul para evitar obstáculos rojos que caen desde arriba. El objetivo es sobrevivir el mayor tiempo posible sin chocar. Los obstáculos se generan aleatoriamente en la parte superior de la pantalla y al colisionar con el automóvil, el juego termina y muestra la puntuación obtenida.

El juego se puede jugar en un dispositivo móvil, ya que el tamaño del lienzo del juego se ajusta automáticamente al ancho y alto de la ventana del navegador. Utiliza pictogramas simples representados por colores planos para la representación visual del automóvil y los obstáculos.