スプラトゥーン's game

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

No:16384

←

Prev Next

→

スプラトゥーン
Developer User4906｜Date and time 23/9/17 22:17:32
Build time 39.671 sec｜Game capacity 3.991KB｜

Script

了解です。以下にスプラトゥーン風のゲームを実装したサンプルコードを示します。

このサンプルコードでは、上下に動かせるプレイヤーが操作可能で、スペースキーを押すと上に向かって弾を撃つことができます。弾とプレイヤーの当たり判定があり、弾がプレイヤーに当たるとスコアが加算されます。スコアが5以上になるとゲームクリアとなります。また、上記のサンプルコードはスマートフォンでもプレイ可能ですが、実際にはタッチイベントなどを活用すると操作性を改善することができます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解です。以下にスプラトゥーン風のゲームを実装したサンプルコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>スプラトゥーン風ゲーム</title>
</head>
<body>
    <canvas id="gameCanvas" width="600" height="400"></canvas>

// プレイヤープロパティ
        const player = {
            x: gameCanvas.width / 2,
            y: gameCanvas.height - 30,
            size: 20,
            color: "#FF0000",
            speed: 5,
            isShooting: false,
            shootCooldown: 0
        };

// 弾丸プロパティ
        const bullet = {
            x: player.x,
            y: player.y,
            size: 5,
            color: "#000000",
            speed: 8
        };

// ゲーム状態
        let gameIsRunning = true;
        let score = 0;

// プレイヤーの操作
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

function keyUpHandler(event) {
            if (event.key === " ") {
                player.isShooting = false;
                player.shootCooldown = 0;
            }
        }

// ゲームのメインループ
        function gameLoop() {
            ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
            drawPlayer();
            moveBullet();
            drawBullet();
            collisionDetection();

if (gameIsRunning) {
                requestAnimationFrame(gameLoop);
            }
        }

function drawPlayer() {
            ctx.beginPath();
            ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
            ctx.fillStyle = player.color;
            ctx.fill();
            ctx.closePath();
        }

function moveBullet() {
            if (player.isShooting && player.shootCooldown === 0) {
                bullet.x = player.x;
                bullet.y = player.y;
                player.shootCooldown = 20; // 弾丸の発射間隔を設定
            }

if (bullet.y > 0) {
                bullet.y -= bullet.speed;
            } else {
                player.shootCooldown = 0;
            }
        }

function drawBullet() {
            ctx.beginPath();
            ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
            ctx.fillStyle = bullet.color;
            ctx.fill();
            ctx.closePath();
        }

function collisionDetection() {
            if (bullet.y < 10 && bullet.x > player.x - player.size && bullet.x < player.x + player.size) {
                score++;
                bullet.y = -10;
            }

if (score >= 5) {
                gameIsRunning = false;
                alert("ゲームクリア！スコア: " + score);
            }
        }

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

このサンプルコードでは、上下に動かせるプレイヤーが操作可能で、スペースキーを押すと上に向かって弾を撃つことができます。弾とプレイヤーの当たり判定があり、弾がプレイヤーに当たるとスコアが加算されます。スコアが5以上になるとゲームクリアとなります。

また、上記のサンプルコードはスマートフォンでもプレイ可能ですが、実際にはタッチイベントなどを活用すると操作性を改善することができます。