スタートボタンを押したらスタートして敵にぶつかったらゲームオーバー画面を出すシューティングゲーム　敵は上から降ってきて敵の降ってくるスピードが最初は遅いがだんだん早くなる's game

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

No:31004

←

Prev Next

→

スタートボタンを押したらスタートして敵にぶつかったらゲームオーバー画面を出すシューティングゲーム　敵..ALL
Developer User14989｜Date and time 23/12/24 20:19:00
Build time 26.052 sec｜Game capacity 4.935KB｜

Script

Game Over

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>シューティングゲーム</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
        }
        #game {
            width: 100%;
            height: 100%;
            position: relative;
            border: 1px solid #fff;
        }
        #player {
            width: 30px;
            height: 30px;
            background-color: #fff;
            position: absolute;
        }
        .bullet {
            width: 5px;
            height: 20px;
            background-color: #fff;
            position: absolute;
        }
        .enemy {
            width: 30px;
            height: 30px;
            background-color: #f00;
            position: absolute;
            top: -30px;
        }
        #game-over {
            display: none;
            position: absolute;
            top: calc(50% - 30px);
            left: calc(50% - 100px);
            width: 200px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="player"></div>
        <div id="game-over">Game Over</div>
    </div>

function startGame() {
            player.style.left = 'calc(50% - 15px)';
            game.addEventListener('mousemove', movePlayer);
            game.addEventListener('click', shoot);
            gameLoop();
            enemyLoop();
        }

function gameLoop() {
            if (!gameOver.style.display) {
                requestAnimationFrame(gameLoop);
            }
            moveBullets();
            detectCollision();
        }

function movePlayer(event) {
            let x = event.clientX - game.offsetLeft;
            player.style.left = x + 'px';
        }

function shoot() {
            let bullet = document.createElement('div');
            bullet.className = 'bullet';
            bullet.style.left = (player.offsetLeft + 12) + 'px';
            game.appendChild(bullet);
        }

function enemyLoop() {
            if (!gameOver.style.display) {
                requestAnimationFrame(enemyLoop);
            }
            createEnemy();
        }

function createEnemy() {
            let enemy = document.createElement('div');
            enemy.className = 'enemy';
            enemy.style.left = Math.random() * (game.offsetWidth - 30) + 'px';
            game.appendChild(enemy);
        }

function increaseSpeed() {
            speed += 0.5;
            enemyInterval -= 100;
            setTimeout(increaseSpeed, 5000);
        }

document.addEventListener('DOMContentLoaded', () => {
            document.addEventListener('click', () => {
                startGame();
                increaseSpeed();
            });
        });
    </script>
</body>
</html>