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

No:2111

3651

←

Prev Next

→

Innovative Shooting Game
Developer User3497｜Date and time 23/6/20 7:24:04
Build time 61.546 sec｜Game capacity 5.157KB｜

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>
</head>
<body>
<h1>革新的なシューティングゲーム</h1>
<p>あなたは宇宙船のパイロットです。敵の攻撃から逃げながら、敵を撃破しよう！</p>
<canvas id="canvas" width="300" height="400"></canvas>
<script>
// ゲームの設定
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const playerWidth = 40;
const playerHeight = 40;
const enemyWidth = 20;
const enemyHeight = 20;
const bulletWidth = 5;
const bulletHeight = 10;
const playerSpeed = 10;
const enemySpeed = 5;
const bulletSpeed = 10;
const enemyInterval = 1000;
const bulletInterval = 300;
let gameover = false;
let score = 0;
let playerX = canvas.width / 2 - playerWidth / 2;
let enemyX = 0;
let enemyY = enemyHeight;
let enemyTimer = null;
let bullets = [];
let bulletTimer = null;
// イベントの登録
window.addEventListener('keydown', handleKeyDown);
// ゲーム開始
startGame();
// ゲームの開始
function startGame() {
    draw();
    startEnemy();
    startBullet();
}
// ゲームオーバーの処理
function gameoverProcess() {
    gameover = true;
    clearInterval(enemyTimer);
    clearInterval(bulletTimer);
    context.font = '30px Arial';
    context.fillStyle = 'red';
    context.fillText('ゲームオーバー', 50, 200);
}
// プレイヤーの描画
function drawPlayer() {
    const x = playerX;
    const y = canvas.height - playerHeight;
    context.fillStyle = 'yellow';
    context.fillRect(x, y, playerWidth, playerHeight);
}
// 敵の描画
function drawEnemy() {
    context.fillStyle = 'red';
    context.fillRect(enemyX, enemyY, enemyWidth, enemyHeight);
}
// 弾の描画
function drawBullet() {
    context.fillStyle = 'white';
    for (const bullet of bullets) {
        const x = bullet.x;
        const y = bullet.y;
        context.fillRect(x, y, bulletWidth, bulletHeight);
    }
}
// スコアの描画
function drawScore() {
    context.font = '20px Arial';
    context.fillStyle = 'black';
    context.fillText(`スコア: ${score}`, 10, 20);
}
// 全体の描画
function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawPlayer();
    drawEnemy();
    drawBullet();
    drawScore();
    if (gameover) {
        return;
    }
    // 敵との接触判定
    const playerRight = playerX + playerWidth;
    const playerBottom = canvas.height - playerHeight;
    const enemyRight = enemyX + enemyWidth;
    const enemyBottom = enemyY + enemyHeight;
    if (playerRight > enemyX && playerX < enemyRight && playerBottom > enemyY && canvas.height - playerHeight < enemyBottom) {
        gameoverProcess();
        return;
    }
    // 敵と弾の接触判定
    for (let i = bullets.length - 1; i >= 0; i--) {
        const bullet = bullets[i];
        const bulletRight = bullet.x + bulletWidth;
        const bulletBottom = bullet.y + bulletHeight;
        if (bulletRight > enemyX && bullet.x < enemyRight && bulletBottom > enemyY && bullet.y < enemyBottom) {
            score++;
            bullets.splice(i, 1);
            enemyX = Math.floor(Math.random() * (canvas.width - enemyWidth));
            enemyY = enemyHeight;
            break;
        }
    }
    // 敵の移動
    enemyY += enemySpeed;
    if (enemyY >= canvas.height - enemyHeight) {
        gameoverProcess();
        return;
    }
    // 弾の移動
    for (let i = bullets.length - 1; i >= 0; i--) {
        const bullet = bullets[i];
        bullet.y -= bulletSpeed;
        if (bullet.y <= 0) {
            bullets.splice(i, 1);
        }
    }
}
// 敵の生成
function startEnemy() {
    enemyTimer = setInterval(() => {
        enemyX = Math.floor(Math.random() * (canvas.width - enemyWidth));
        enemyY = enemyHeight;
    }, enemyInterval);
}
// 弾の生成
function startBullet() {
    bulletTimer = setInterval(() => {
        const x = playerX + playerWidth / 2 - bulletWidth / 2;
        const y = canvas.height - playerHeight - bulletHeight;
        bullets.push({x, y});
    }, bulletInterval);
}
// キーイベントの処理
function handleKeyDown(event) {
    switch (event.keyCode) {
        case 37: // 左矢印キー
            playerX -= playerSpeed;
            if (playerX < 0) {
                playerX = 0;
            }
            break;
        case 39: // 右矢印キー
            playerX += playerSpeed;
            if (playerX > canvas.width - playerWidth) {
                playerX = canvas.width - playerWidth;
            }
            break;
    }
    draw();
}
</script>
</body>
</html>