Un juego de carreras 3D funcional para celular's game

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

No:13635

←

Prev Next

→

Un juego de carreras 3D funcional para celular
Developer User5971｜Date and time 23/8/29 4:58:47
Build time 24.448 sec｜Game capacity 5.781KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
   <title>Juego de Carreras 3D</title>
   <style>
      #canvas {
         width: 100%;
         height: 100%;
         display: block;
      }
   </style>
</head>
<body>
   <canvas id="canvas"></canvas>
   <script>
      (function() {
         // Variables del juego
         var canvas, context;
         var width, height;
         var player, obstacle;
         var distance = 0;
         var speed = 2;
         var obstacles = [];
         var gameRunning = false;

// Obtiene el canvas y su contexto
         function setup() {
            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
         }

// Clase para los jugadores (auto)
         function Player() {
            this.width = 50;
            this.height = 100;
            this.x = width / 2 - this.width / 2;
            this.y = height - this.height;
            this.vx = 0;
         }

Player.prototype.draw = function() {
            context.drawImage(getPlayerImage(), this.x, this.y, this.width, this.height);
         }

Player.prototype.update = function() {
            this.x += this.vx;

if (this.x < 0) {
               this.x = 0;
            }
            
            if (this.x + this.width > width) {
               this.x = width - this.width;
            }
         }

// Clase para los obstáculos (otros autos)
         function Obstacle(x, y) {
            this.width = 50;
            this.height = 100;
            this.x = x;
            this.y = y;
            this.vy = speed;
         }

Obstacle.prototype.draw = function() {
            context.drawImage(getObstacleImage(), this.x, this.y, this.width, this.height);
         }

Obstacle.prototype.update = function() {
            this.y += this.vy;

if (this.y > height) {
               this.y = -this.height;
               this.x = Math.random() * (width - this.width);
            }
         }

// Función para generar automáticamente obstáculos
         function generateObstacles() {
            var y = -(Math.random() * height);

for (var i = 0; i < 3; i++) {
               var x = Math.random() * (width - 50);
               obstacles.push(new Obstacle(x, y));
               y -= height / 3;
            }
         }

// Función para verificar si hay colisión entre el jugador y los obstáculos
         function checkCollision() {
            for (var i = 0; i < obstacles.length; i++) {
               if (player.x < obstacles[i].x + obstacles[i].width &&
                  player.x + player.width > obstacles[i].x &&
                  player.y < obstacles[i].y + obstacles[i].height &&
                  player.y + player.height > obstacles[i].y) {
                  return true;
               }
            }
            return false;
         }

// Carga las imágenes de los objetos del juego
         function loadImages() {
            var playerImage = new Image();
            playerImage.src = "car.png";

var obstacleImage = new Image();
            obstacleImage.src = "obstacle.png";

return {
               playerImage: playerImage,
               obstacleImage: obstacleImage
            };
         }

// Inicia el juego
         function startGame() {
            gameRunning = true;
            distance = 0;
            speed = 2;
            obstacles = [];
            player = new Player();
            generateObstacles();
            updateGame();
         }

// Actualiza el juego en cada frame
         function updateGame() {
            if (!gameRunning) {
               return;
            }

context.clearRect(0, 0, width, height);
            player.update();
            player.draw();

for (var i = 0; i < obstacles.length; i++) {
               obstacles[i].update();
               obstacles[i].draw();
            }

distance += speed;

if (checkCollision()) {
               endGame();
            }

if (distance % 1000 == 0 && distance > 0) {
               speed += 0.5;
            }

requestAnimationFrame(updateGame);
         }

// Termina el juego
         function endGame() {
            gameRunning = false;
            alert("¡Has perdido! Tu distancia recorrida fue: " + distance + " metros.");
         }

// Maneja los eventos de las teclas para controlar al jugador
         function handleKeyDown(event) {
            if (event.keyCode === 37) {
               player.vx = -5; // Movimiento a la izquierda
            } else if (event.keyCode === 39) {
               player.vx = 5; // Movimiento a la derecha
            }
         }

function handleKeyUp(event) {
            if (event.keyCode === 37 || event.keyCode === 39) {
               player.vx = 0; // Detiene el movimiento al soltar la tecla
            }
         }

// Retorna la imagen del jugador
         function getPlayerImage() {
            return images.playerImage;
         }

// Retorna la imagen del obstáculo
         function getObstacleImage() {
            return images.obstacleImage;
         }

// Función de inicialización
         function init() {
            setup();
            images = loadImages();
            document.addEventListener("keydown", handleKeyDown);
            document.addEventListener("keyup", handleKeyUp);
            startGame();
         }

// Inicialización al cargar el juego
         window.onload = init;
      })();
   </script>
</body>
</html>