2D vertical scrolling shooty's game

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

No:1254

105

←

Prev Next

→

2D vertical scrolling shooty
Developer User3288｜Date and time 23/6/18 9:22:36
Build time 44.26 sec｜Game capacity 4.355KB｜

Script

となり、プレイヤーは宇宙船を操り敵を撃破しながら進んでいきます。敵キャラクターと接触した場合ゲームオーバーになります。スマホでプレイする場合は画面タップで宇宙船を動かすことができます。絵文字を多めに使い、かわいらしい宇宙船と敵を描きます。以下が実際のプログラムになります。

このプログラムを実行すると、画面が黒く塗りつぶされた状態で宇宙船と敵が表示されます。スマホで画面をタップすると、宇宙船が上に移動します。敵に接触するとゲームオーバーになり、画面に「ゲームオーバー」と表示されます。また、プログラム内で絵文字を使用していませんが、絵文字を多めに使うことでよりかわいらしいゲームに仕上げることができます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>宇宙シューティング</title>

canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// 宇宙船の初期位置
        var shipX = 50;
        var shipY = canvas.height / 2;

// 宇宙船の移動速度
        var moveSpeed = 10;

// 敵の初期位置と移動速度
        var enemyX = canvas.width - 100;
        var enemyY = canvas.height / 2;
        var enemySpeed = 5;

// ゲームオーバーフラグ
        var gameOver = false;

// 宇宙船の描画
        function drawShip() {
            ctx.fillStyle = "yellow";
            ctx.fillRect(shipX, shipY, 50, 30);
        }

// 敵の描画
        function drawEnemy() {
            ctx.fillStyle = "red";
            ctx.fillRect(enemyX, enemyY, 50, 30);
        }

// ゲームループ
        function gameLoop() {
            // 画面クリア
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// ゲームオーバー判定
            if (shipX + 50 >= enemyX && shipY + 30 >= enemyY && shipY <= enemyY + 30) {
                document.write("ゲームオーバー");
                gameOver = true;
            }

// 宇宙船の移動
            if (!gameOver) {
                if (shipY > 0 && touchesTop()) {
                    shipY -= moveSpeed;
                }
                if (shipY < canvas.height - 30 && touchesBottom()) {
                    shipY += moveSpeed;
                }
            }

// 敵の移動
            if (enemyX > -50 && !gameOver) {
                enemyX -= enemySpeed;
            } else {
                enemyX = canvas.width - 100;
                enemyY = Math.random() * (canvas.height - 30);
            }

// 描画
            drawShip();
            drawEnemy();

// 次のフレームへ
            requestAnimationFrame(gameLoop);
        }

// 画面タップに対する処理
        document.addEventListener("touchstart", function(event) {
            event.preventDefault();
        }, {passive: false});

canvas.addEventListener("touchstart", function(event) {
            event.preventDefault();
            if (!touchesBottom()) {
                shipY -= moveSpeed;
            }
        });

canvas.addEventListener("touchend", function(event) {
            event.preventDefault();
        });

canvas.addEventListener("touchmove", function(event) {
            event.preventDefault();
            if (!touchesBottom()) {
                shipY -= moveSpeed;
            }
        });

function touchesTop() {
            var touches = event.changedTouches;
            var touchY = touches[0].clientY - canvas.offsetTop;
            return touchY < shipY;
        }

function touchesBottom() {
            var touches = event.changedTouches;
            var touchY = touches[0].clientY - canvas.offsetTop;
            return touchY > shipY + 30;
        }

requestAnimationFrame(gameLoop);
    </script>
</body>
</html>
```