今から作成するシューティングゲームは次の条件を守るように作成してください条件　操作画面をコンパクトにしてください　最初にスタートボタンを表示してください　スタートボタンを押したらゲームをスタートするようにしてください　自分のキャラクターは下付近に配置してください　自分のキャラクターを左右に動かせるようにしてください　自分のキャラクターは弾を撃てるようにしてください　敵は上から降ってくるようにしてください　敵の降ってくる速度を最初は遅いですがだんだん早くなるようにしてください　弾を撃つたびに減るようにしてください　弾数が無くなったら弾を撃てないようにしてください　弾数を最初500ぐらいにしてください　自分のキャラクターに触れたら弾数が増えるアイテムを敵を倒したら出てくるようにしてください　敵に自分のキャラクターが触れたらゲームオーバー画面を表示してください　最後にスコアを表示してください's game

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

No:31047

←

Prev Next

→

今から作成するシューティングゲームは次の条件を守るように作成してください条件　操作画面をコンパクト..ALL
Developer User14989｜Date and time 23/12/24 21:06:11
Build time 31.758 sec｜Game capacity 5.871KB｜

Script

🚀

←

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>
        #game-screen {
            width: 100vw;
            height: 90vh;
            border: 1px solid black;
            position: relative;
        }

#player {
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
            font-size: 30px;
        }
        
        #start-button {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 30px;
        }

.bullet {
            position: absolute;
            width: 10px;
            height: 20px;
            background-color: black;
        }

.enemy {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
        }

#game-over {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="game-screen">
        <div id="player">🚀</div>
        <button id="start-button">Start</button>
        <div id="game-over" style="display: none;">Game Over</div>
    </div>
    <script>
        const gameScreen = document.getElementById("game-screen");
        const player = document.getElementById("player");
        const startButton = document.getElementById("start-button");
        const gameOverScreen = document.getElementById("game-over");

let bullets = [];
        let enemies = [];
        let score = 0;

let bulletCount = 500;
        let bulletDelay = 200;
        let enemySpeed = 1500;

let gameLoop;
        let bulletInterval;

function startGame() {
            startButton.style.display = "none";
            gameOverScreen.style.display = "none";
            player.style.display = "block";

gameLoop = setInterval(updateGame, 10);
            bulletInterval = setInterval(createBullet, bulletDelay);
            createEnemy();
        }

function updateGame() {
            for (let bullet of bullets) {
                bullet.style.top = `${parseInt(bullet.style.top, 10) - 5}px`;

if (checkCollision(bullet, enemies)) {
                    removeElement(bullet);
                    score++;
                    bulletCount += 20;
                }

if (parseInt(bullet.style.top, 10) <= 0) {
                    removeElement(bullet);
                }
            }

for (let enemy of enemies) {
                enemy.style.top = `${parseInt(enemy.style.top, 10) + 2}px`;

if (checkCollision(player, [enemy])) {
                    endGame();
                }

if (parseInt(enemy.style.top, 10) >= gameScreen.clientHeight) {
                    removeElement(enemy);
                }
            }
        }

function createEnemy() {
            const enemy = document.createElement("div");
            enemy.className = "enemy";
            enemy.style.left = `${Math.random() * (gameScreen.clientWidth - 50)}px`;
            enemy.style.top = "0px";
            enemies.push(enemy);
            gameScreen.appendChild(enemy);

setTimeout(createEnemy, enemySpeed);
        }

function endGame() {
            clearInterval(gameLoop);
            clearInterval(bulletInterval);
            player.style.display = "none";
            gameOverScreen.style.display = "block";
            gameOverScreen.innerHTML = `Game Over<br>Score: ${score}`;
        }

startButton.addEventListener("click", startGame);

document.addEventListener("keyup", function(event) {
            if (event.key === " ") {
                createBullet();
            }
        });
    </script>
</body>
</html>