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

No:13473

142

←

Prev Next

→

Juego de guerra en primera persona
Developer User5887｜Date and time 23/8/28 7:50:42
Build time 13.106 sec｜Game capacity 3.093KB｜

Script

Juego de Guerra en Primera Persona

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego de Guerra en Primera Persona</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Juego de Guerra en Primera Persona</h1>
    <canvas id="gameCanvas"></canvas>
    <br>
    <button onclick="startGame();">Iniciar Juego</button>
    <script>
        // Definir variables del juego
        var canvas, ctx;
        var playerX, playerY;
        var enemyX, enemyY;
        var score;
        var gameRunning;

function startGame() {
            // Inicializar variables
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            playerX = canvas.width / 2;
            playerY = canvas.height - 30;
            enemyX = Math.random() * (canvas.width - 50);
            enemyY = 0;
            score = 0;
            gameRunning = true;

// Configurar eventos de teclado
            document.addEventListener("keydown", movePlayer);

// Iniciar el bucle de juego
            updateGame();
        }

function drawPlayer() {
            ctx.beginPath();
            ctx.arc(playerX, playerY, 20, 0, Math.PI * 2);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

function drawEnemy() {
            ctx.beginPath();
            ctx.rect(enemyX, enemyY, 50, 50);
            ctx.fillStyle = "#FF0000";
            ctx.fill();
            ctx.closePath();
        }

function movePlayer(event) {
            if (event.key === "ArrowLeft") {
                playerX -= 10;
            } else if (event.key === "ArrowRight") {
                playerX += 10;
            }
        }

function updateGame() {
            if (!gameRunning) {
                return;
            }

// Limpiar el canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar los elementos
            drawPlayer();
            drawEnemy();

// Mover el enemigo
            enemyY += 5;

// Verificar colisión con el jugador
            if (enemyY + 50 >= playerY && enemyY <= playerY + 20 &&
                enemyX <= playerX + 20 && enemyX + 50 >= playerX) {
                gameRunning = false;
                alert("¡Has perdido! Puntaje: " + score);
                return;
            }

// Verificar si el enemigo llegó al final
            if (enemyY >= canvas.height) {
                // Incrementar el puntaje y reiniciar posición del enemigo
                score++;
                enemyX = Math.random() * (canvas.width - 50);
                enemyY = 0;
            }

// Actualizar puntaje
            ctx.font = "20px Arial";
            ctx.fillStyle = "#000";
            ctx.fillText("Puntaje: " + score, 10, 20);

// Llamar a la función updateGame en el siguiente cuadro de animación
            requestAnimationFrame(updateGame);
        }
    </script>
</body>
</html>