2D vertical scrolling shooter set in space's game

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

No:1261

143

←

Prev Next

→

2D vertical scrolling shooter set in space
Developer User3288｜Date and time 23/6/18 9:25:01
Build time 42.187 sec｜Game capacity 3.792KB｜

Script

となり、プレイヤーは宇宙船を操作して敵を撃破する。スマホでの操作を前提に、画面をタップすることで宇宙船が移動し、弾を撃つことができる。プレイヤーのスコアは敵を倒した数によって算出され、ハイスコアランキングが表示される。絵文字を多用してゲームの雰囲気を盛り上げる。以下、実際のプログラムの例：

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<html>
<head>
<title>宇宙シューティングゲーム</title>
</head>
<body>
<canvas id="canvas" width="320" height="480"></canvas>

// 弾丸の画像を読み込む
var bulletImg = new Image();
bulletImg.src = "bullet.png";

// 敵の画像を読み込む
var enemyImg = new Image();
enemyImg.src = "enemy.png";

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 宇宙船の初期位置
var spaceship = {
    x: canvas.width / 2,
    y: canvas.height - 50
};

// 弾を保存する配列
var bullets = [];

// 敵を保存する配列
var enemies = [];

// プレイヤーのスコア
var score = 0;

// 宇宙船を描画する関数
function drawSpaceship() {
    ctx.drawImage(spaceshipImg, spaceship.x - 16, spaceship.y - 16, 32, 32);
}

// 弾を描画する関数
function drawBullets() {
    for (var i = 0; i < bullets.length; i++) {
        var bullet = bullets[i];
        ctx.drawImage(bulletImg, bullet.x - 4, bullet.y - 8, 8, 16);
    }
}

// 敵を描画する関数
function drawEnemies() {
    for (var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i];
        ctx.drawImage(enemyImg, enemy.x - 16, enemy.y - 16, 32, 32);
    }
}

// 弾を発射する関数
function shoot() {
    bullets.push({
        x: spaceship.x,
        y: spaceship.y - 16,
        dy: -10 // 弾の速度
    });
}

// 敵を生成する関数
function generateEnemy() {
    enemies.push({
        x: Math.random() * canvas.width,
        y: -32,
        dy: 2 // 敵の速度
    });
}

// 衝突判定を行う関数
function checkCollision() {
    for (var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i];
        for (var j = 0; j < bullets.length; j++) {
            var bullet = bullets[j];
            var dx = enemy.x - bullet.x;
            var dy = enemy.y - bullet.y;
            var distance = Math.sqrt(dx * dx + dy * dy);
            if (distance < 24) {
                // 弾が当たった場合
                bullets.splice(j, 1);
                enemies.splice(i, 1);
                score++;
                break;
            }
        }
        var dx = enemy.x - spaceship.x;
        var dy = enemy.y - spaceship.y;
        var distance = Math.sqrt(dx * dx + dy * dy);
        if (distance < 32) {
            // 敵と衝突した場合
            alert("ゲームオーバー。スコア: " + score);
            location.reload();
        }
    }
}

// メインループ
function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawSpaceship();
    drawBullets();
    drawEnemies();
    checkCollision();
    if (Math.random() < 0.1) {
        generateEnemy();
    }
    for (var i = 0; i < bullets.length; i++) {
        var bullet = bullets[i];
        bullet.y += bullet.dy;
        if (bullet.y < -16) {
            bullets.splice(i, 1);
        }
    }
    for (var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i];
        enemy.y += enemy.dy;
        if (enemy.y > canvas.height + 32) {
            enemies.splice(i, 1);
        }
    }
    requestAnimationFrame(loop);
}

// ゲーム開始
canvas.addEventListener("touchstart", function(event) {
    shoot();
});
loop();
</script>
</body>
</html>