Crear juegos racing Ray tracing's game

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

No:39712

←

Prev Next

→

Crear juegos racing Ray tracing
Developer User17786｜Date and time 24/1/29 23:20:47
Build time 24.115 sec｜Game capacity 4.42KB｜

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 Racing - Ray Tracing</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        // Variables globales
        var canvas;
        var context;
        var car;
        var obstacles;
        var score;

// Clase Carro
        function Car(x, y, width, height, color) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.color = color;

this.draw = () => {
                context.fillStyle = this.color;
                context.fillRect(this.x, this.y, this.width, this.height);
            }
        }

// Clase Obstáculo
        function Obstacle(x, y, width, height, color, speed) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.color = color;
            this.speed = speed;

this.draw = () => {
                context.fillStyle = this.color;
                context.fillRect(this.x, this.y, this.width, this.height);
            }

this.update = () => {
                this.y += this.speed;
            }
        }

// Función principal para iniciar el juego
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");
            car = new Car(375, 500, 50, 100, "blue");
            obstacles = [];
            score = 0;

// Evento para controlar el carro en dispositivos móviles
            canvas.addEventListener("touchmove", handleTouchMove);

// Generar obstáculos cada segundo
            setInterval(generateObstacle, 1000);

// Actualizar el juego cada 10 milisegundos
            setInterval(updateGame, 10);
        }

// Generar obstáculo aleatorio
        function generateObstacle() {
            var x = Math.random() * 700 + 50;
            var y = -Math.random() * 200;
            var width = Math.random() * 50 + 50;
            var height = Math.random() * 50 + 50;
            var color = "red";
            var speed = Math.random() * 4 + 1;
            obstacles.push(new Obstacle(x, y, width, height, color, speed));
        }

// Actualizar el juego
        function updateGame() {
            clearCanvas();

for (var i = 0; i < obstacles.length; i++) {
                if (hasCollision(car, obstacles[i])) {
                    endGame();
                }

obstacles[i].update();
                obstacles[i].draw();
            }

car.draw();

score += 1;
            drawScore();
        }

// Limpiar el lienzo
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

// Verificar colisión entre objetos
        function hasCollision(obj1, obj2) {
            return (
                obj1.x < obj2.x + obj2.width &&
                obj1.x + obj1.width > obj2.x &&
                obj1.y < obj2.y + obj2.height &&
                obj1.y + obj1.height > obj2.y
            );
        }

// Dibujar puntuación
        function drawScore() {
            context.font = "20px Arial";
            context.fillStyle = "black";
            context.fillText("Score: " + score, 10, 30);
        }

// Controlar el moviento del carro en dispositivos móviles
        function handleTouchMove(event) {
            var touch = event.touches[0];
            car.x = touch.clientX - car.width / 2;

// Limitar movimiento del carro dentro del lienzo
            if (car.x < 0) {
                car.x = 0;
            } else if (car.x > canvas.width - car.width) {
                car.x = canvas.width - car.width;
            }

event.preventDefault();
        }

// Finalizar el juego
        function endGame() {
            clearInterval(generateObstacle);
            clearInterval(updateGame);

alert("¡Juego terminado! Tu puntuación: " + score);

// Recargar la página para volver a jugar
            location.reload();
        }

// Iniciar el juego al cargar la página
        window.onload = startGame;
    </script>
</body>
</html>