Egashira 2:50 shooting game. Looks like Invader.'s game

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

No:939

137

←

Prev Next

→

Egashira 2:50 shooting game. Looks like Invader.
Developer User3174｜Date and time 23/6/17 22:53:03
Build time 79.128 sec｜Game capacity 6.211KB｜

Script

ご要望の通り、以下は1枚のHTMLファイルで実装された江頭2:50シューティングゲームです。

このゲームでは、上から江頭という漢字が降ってきます。下部の左右ボタンを操作して、2:50の弾を発射し、江頭を倒すとスコアが加算されます。江頭が画面の下に到達するとゲームオーバーになります。なお、スマホでも遊びやすいように、左右ボタンを配置しました。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

ご要望の通り、以下は1枚のHTMLファイルで実装された江頭2:50シューティングゲームです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>江頭2:50シューティングゲーム</title>
</head>
<body>
    <canvas id="canvas" width="300" height="400"></canvas>
    <button id="left_button">←</button>
    <button id="right_button">→</button>
    <script>
        // ゲームの状態を保存する変数
        let game = {
            score: 0,
            running: false,
            gameover: false,
            bullets: [],
            enemies: [],
            left: false,
            right: false
        };

// キー入力を監視する関数
        function keyPressed(event) {
            if (event.key == "ArrowLeft") game.left = true;
            if (event.key == "ArrowRight") game.right = true;
        }

function keyReleased(event) {
            if (event.key == "ArrowLeft") game.left = false;
            if (event.key == "ArrowRight") game.right = false;
        }

// ボタン入力を監視する関数
        function leftPressed() {
            game.left = true;
        }

function leftReleased() {
            game.left = false;
        }

function rightPressed() {
            game.right = true;
        }

function rightReleased() {
            game.right = false;
        }

// キャンバスを描画する関数
        function drawCanvas() {
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext("2d");

// 背景を塗る
            ctx.fillStyle = "#ddd";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

// 江頭を描画する
            ctx.font = "30px 'Segoe UI'";
            ctx.fillStyle = "red";
            for (let enemy of game.enemies) {
                ctx.fillText("江頭", enemy.x, enemy.y);
            }

// 弾を描画する
            ctx.font = "16px 'Segoe UI'";
            ctx.fillStyle = "blue";
            for (let bullet of game.bullets) {
                ctx.fillText("2:50", bullet.x, bullet.y);
            }

// スコアを描画する
            ctx.font = "16px 'Segoe UI'";
            ctx.fillStyle = "black";
            ctx.fillText("Score: " + game.score, 10, 20);
        }

// ゲームを更新する関数
        function updateGame() {
            // 江頭を下に移動する
            for (let enemy of game.enemies) {
                enemy.y += 5;
            }

// 弾を上に移動する
            for (let bullet of game.bullets) {
                bullet.y -= 10;
            }

// 左右に移動する
            if (game.left && game.right) {
                // 何もしない
            } else if (game.left) {
                game.bullets.push({
                    x: player.x - 15,
                    y: player.y - 20
                });
            } else if (game.right) {
                game.bullets.push({
                    x: player.x + 35,
                    y: player.y - 20
                });
            }

// 衝突判定を行う
            for (let i = 0; i < game.enemies.length; i++) {
                let enemy = game.enemies[i];
                for (let j = 0; j < game.bullets.length; j++) {
                    let bullet = game.bullets[j];
                    if (bullet.y < enemy.y + 30 &&
                        bullet.x >= enemy.x &&
                        bullet.x <= enemy.x + 30) {
                        game.enemies.splice(i, 1);
                        game.bullets.splice(j, 1);
                        game.score += 10;
                    }
                }
            }

// ゲームオーバーの判定を行う
            for (let enemy of game.enemies) {
                if (enemy.y >= 380) {
                    game.gameover = true;
                }
            }

// ゲームオーバーの場合は停止する
            if (game.gameover) {
                game.running = false;
            }
        }

// ゲームループを実行する関数
        function gameLoop() {
            if (!game.running) return;
            updateGame();
            drawCanvas();
            if (!game.gameover) {
                requestAnimationFrame(gameLoop);
            }
        }

// 初期化する関数
        function initialize() {
            let canvas = document.getElementById("canvas");

// キー入力を監視する
            document.addEventListener("keydown", keyPressed);
            document.addEventListener("keyup", keyReleased);

// ボタン入力を監視する
            document.getElementById("left_button").addEventListener("mousedown", leftPressed);
            document.getElementById("left_button").addEventListener("mouseup", leftReleased);
            document.getElementById("right_button").addEventListener("mousedown", rightPressed);
            document.getElementById("right_button").addEventListener("mouseup", rightReleased);

// ゲームオブジェクトを初期化する
            game.enemies = [];
            game.bullets = [];
            game.score = 0;
            game.running = true;
            game.gameover = false;
            game.left = false;
            game.right = false;
            setInterval(function() {
                game.enemies.push({
                    x: Math.floor(Math.random() * (canvas.width - 30)),
                    y: 0
                });
            }, 1000);
            requestAnimationFrame(gameLoop);
        }

initialize();
    </script>
</body>
</html>