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

No:22901

Un control que dispara a obstáculos y se mueve con..ALL
Developer User10585｜Date and time 23/10/26 13:10:03
Build time 103.052 sec｜Game capacity 5.744KB｜

Script

¡Game Over!

Toca el botón "Reset" para volver a empezar.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego de Disparos</title>
    <style>
        #canvas {
            background-color: black;
        }
        #player {
            width: 50px;
            height: 50px;
            background-color: black;
            position: absolute;
        }
        .obstacle {
            width: 30px;
            height: 30px;
            background-color: red;
            position: absolute;
        }
        #game-over {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #reset-btn {
            display: none;
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: black;
            color: white;
            padding: 10px 20px;
            border: none;
            font-family: Arial, sans-serif;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>
    <div id="player"></div>
    <div id="game-over">
        <h1>¡Game Over!</h1>
        <p>Toca el botón "Reset" para volver a empezar.</p>
    </div>
    <button id="reset-btn">Reset</button>

var screenWidth = window.innerWidth;
            var screenHeight = window.innerHeight;
            var playerSize = 50;
            var obstacleSize = 30;
            var obstacleSpeed = 5;
            var obstacleInterval = 1000;
            var isGameOver = false;

var playerX = screenWidth / 2 - playerSize / 2;
            var playerY = screenHeight / 2 - playerSize / 2;
            player.style.left = playerX + "px";
            player.style.top = playerY + "px";

function movePlayer(event) {
                var key = event.keyCode;
                switch (key) {
                    case 37: // Left arrow
                        playerX -= 10;
                        if (playerX < 0) playerX = 0;
                        break;
                    case 38: // Up arrow
                        playerY -= 10;
                        if (playerY < 0) playerY = 0;
                        break;
                    case 39: // Right arrow
                        playerX += 10;
                        if (playerX > screenWidth - playerSize) playerX = screenWidth - playerSize;
                        break;
                    case 40: // Down arrow
                        playerY += 10;
                        if (playerY > screenHeight - playerSize) playerY = screenHeight - playerSize;
                        break;
                }
                player.style.left = playerX + "px";
                player.style.top = playerY + "px";
            }

document.addEventListener("keydown", movePlayer);

function createObstacle() {
                if (isGameOver) return;

var obstacle = document.createElement("div");
                obstacle.className = "obstacle";
                obstacle.style.left = screenWidth + "px";
                obstacle.style.top = Math.floor(Math.random() * (screenHeight - obstacleSize)) + "px";
                canvas.appendChild(obstacle);

var intervalId = setInterval(function () {
                    if (isGameOver) {
                        clearInterval(intervalId);
                        return;
                    }
                    var obstacleX = parseInt(obstacle.style.left);
                    obstacleX -= obstacleSpeed;
                    obstacle.style.left = obstacleX + "px";

if (obstacleX < -obstacleSize) {
                        canvas.removeChild(obstacle);
                        clearInterval(intervalId);
                    }

if (collisionDetection(obstacle, player)) {
                        isGameOver = true;
                        gameOver.style.display = "block";
                        resetBtn.style.display = "block";
                    }
                }, 10);

setTimeout(createObstacle, obstacleInterval);
            }

function collisionDetection(obstacle, player) {
                var obstacleRect = obstacle.getBoundingClientRect();
                var playerRect = player.getBoundingClientRect();
                return !(
                    obstacleRect.top > playerRect.bottom ||
                    obstacleRect.bottom < playerRect.top ||
                    obstacleRect.right < playerRect.left ||
                    obstacleRect.left > playerRect.right
                );
            }

resetBtn.onclick = function () {
                isGameOver = false;
                gameOver.style.display = "none";
                resetBtn.style.display = "none";

var obstacles = document.getElementsByClassName("obstacle");
                while (obstacles.length > 0) {
                    obstacles[0].parentNode.removeChild(obstacles[0]);
                }

playerX = screenWidth / 2 - playerSize / 2;
                playerY = screenHeight / 2 - playerSize / 2;
                player.style.left = playerX + "px";
                player.style.top = playerY + "px";

setTimeout(createObstacle, obstacleInterval);
            };

setTimeout(createObstacle, obstacleInterval);
        };
    </script>
</body>
</html>