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

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

No:31068

←

Prev Next

→

今から作成するシューティングゲームは以下の条件を全て守るように作成してください条件　最初にスタ..ALL
Developer User14989｜Date and time 23/12/24 21:19:12
Build time 36.1 sec｜Game capacity 5.725KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>シューティングゲーム</title>
    <style>
        #canvas {
            border: 1px solid black;
            background-color: lightgray;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <button id="startButton">Start Game</button>
    <canvas id="canvas" width="800" height="600"></canvas>

// ゲームの状態を管理する変数
        let gameStarted = false;
        let gameOver = false;
        let score = 0;
        let bullets = 500;

// キャラクターの位置と弾の位置を初期化する
        let playerX = canvas.width / 2;
        let playerY = canvas.height - 50;
        let bulletX = playerX;
        let bulletY = playerY - 10;
        
        // 敵の位置とスピードを初期化する
        let enemyX = Math.random() * canvas.width;
        let enemyY = -50;
        let enemySpeed = 2;

// スタートボタンをクリックした時の処理
        document.getElementById("startButton").addEventListener("click", function() {
            gameStarted = true;
            document.getElementById("startButton").style.display = "none";
            gameLoop();
        });

// ゲームループ
        function gameLoop() {
            if (gameOver) {
                // ゲームオーバー画面を表示
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.font = "30px Arial";
                ctx.fillStyle = "white";
                ctx.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
                ctx.font = "20px Arial";
                ctx.fillText("Score: " + score, canvas.width / 2 - 50, canvas.height / 2 + 40);
                return;
            }

// ゲームが始まっていない場合は処理を終了
            if (!gameStarted) {
                return;
            }

ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawBullet();
            drawEnemy();
            collisionDetection();
            updateScore();

// 自分のキャラクターの移動
            document.addEventListener("keydown", moveCharacter);
            document.addEventListener("keyup", stopCharacter);

// 弾の発射
            document.addEventListener("keydown", shootBullet);

// 敵の落下
            enemyY += enemySpeed;
            if (enemyY > canvas.height) {
                // 敵が画面外に出たら新しい敵を生成
                enemyX = Math.random() * canvas.width;
                enemyY = -50;
                // 敵のスピードを少しずつ上げる
                enemySpeed += 0.1;
                // 弾の数を少しずつ増やす
                if (bullets < 500) {
                    bullets += 5;
                }
            }

// 弾の位置を更新
            bulletY -= 5;

// フレームごとにゲームループを呼び出す
            requestAnimationFrame(gameLoop);
        }

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

function drawBullet() {
            ctx.beginPath();
            ctx.rect(bulletX, bulletY, 2, 10);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
        }

function drawEnemy() {
            ctx.beginPath();
            ctx.arc(enemyX, enemyY, 10, 0, Math.PI * 2);
            ctx.fillStyle = "black";
            ctx.fill();
            ctx.closePath();
        }

function collisionDetection() {
            // 弾と敵の当たり判定
            let dX = bulletX - enemyX;
            let dY = bulletY - enemyY;
            let distance = Math.sqrt(dX * dX + dY * dY);
            if (distance < 20) {
                score += 10;
                enemyX = Math.random() * canvas.width;
                enemyY = -50;
            }

// 自分のキャラクターと敵の当たり判定
            let dX2 = playerX - enemyX;
            let dY2 = playerY - enemyY;
            let distance2 = Math.sqrt(dX2 * dX2 + dY2 * dY2);
            if (distance2 < 20) {
                gameOver = true;
            }
        }

function updateScore() {
            ctx.font = "20px Arial";
            ctx.fillStyle = "white";
            ctx.fillText("Score: " + score, 10, 30);
            ctx.fillText("Bullets: " + bullets, canvas.width - 90, 30);
        }
    </script>
</body>
</html>