魚たちと鳥たちが戦って鳥が圧勝するゲーム's game

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

No:23829

←

Prev Next

→

魚たちと鳥たちが戦って鳥が圧勝するゲーム
Developer User11163｜Date and time 23/11/3 22:25:02
Build time 162.541 sec｜Game capacity 4.787KB｜

Script

では、魚たちと鳥たちが戦って鳥が圧勝するゲームを実装してみましょう。

上記のコードは、魚と鳥がスマホ操作で動かせるシンプルなゲームです。魚を矢印キーで、鳥をWASDキーで操作します。もし魚と鳥が衝突した場合は、アラートが表示されます。ゲーム画面はウィンドウ全体を覆っており、魚と鳥は絵文字で表されています。移動速度や背景のサイズなどは変数として調整できますので、適宜変更して遊んでみてください。

←

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>魚 vs 鳥</title>
    <style>
        #game-container {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: #000;
            overflow: hidden;
        }

.fish, .bird {
            position: absolute;
            font-size: 2rem;
        }

.fish {
            color: blue;
        }

.bird {
            color: orange;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>

// 魚と鳥のスピード
        var fishSpeed = 5;
        var birdSpeed = 10;

// 背景の幅と高さ
        var bgWidth = window.innerWidth;
        var bgHeight = window.innerHeight;

// 魚と鳥を表示する div 要素を作成
        var gameContainer = document.getElementById("game-container");
        var fishElement = createCharacter('🐟', fishX, fishY, 'fish');
        var birdElement = createCharacter('🐦', birdX, birdY, 'bird');
        gameContainer.appendChild(fishElement);
        gameContainer.appendChild(birdElement);

// キーダウンイベントのリスナーを登録
        document.addEventListener('keydown', function (event) {
            moveCharacter(event.keyCode);
        });

// キーに応じて魚と鳥を移動させる
        function moveCharacter(keyCode) {
            if (keyCode === 37) {
                // 左
                fishX -= fishSpeed;
            } else if (keyCode === 38) {
                // 上
                fishY -= fishSpeed;
            } else if (keyCode === 39) {
                // 右
                fishX += fishSpeed;
            } else if (keyCode === 40) {
                // 下
                fishY += fishSpeed;
            }

if (keyCode === 65) {
                // A
                birdX -= birdSpeed;
            } else if (keyCode === 87) {
                // W
                birdY -= birdSpeed;
            } else if (keyCode === 68) {
                // D
                birdX += birdSpeed;
            } else if (keyCode === 83) {
                // S
                birdY += birdSpeed;
            }

// 魚と鳥の位置を更新
            fishElement.style.left = fishX + 'px';
            fishElement.style.top = fishY + 'px';
            birdElement.style.left = birdX + 'px';
            birdElement.style.top = birdY + 'px';

// 衝突判定
            if (isColliding(fishElement, birdElement)) {
                console.log("魚が鳥に捕まりました！");
                alert("魚が鳥に捕まりました！魚は負けです。");
                resetGame();
            }
        }

// 魚と鳥の衝突判定
        function isColliding(fish, bird) {
            var fishRect = fish.getBoundingClientRect();
            var birdRect = bird.getBoundingClientRect();

return !(
                fishRect.right < birdRect.left ||
                fishRect.left > birdRect.right ||
                fishRect.bottom < birdRect.top ||
                fishRect.top > birdRect.bottom
            );
        }

// キャラクターの div 要素を作成
        function createCharacter(emoji, x, y, className) {
            var character = document.createElement('div');
            character.innerText = emoji;
            character.style.position = 'absolute';
            character.style.left = x + 'px';
            character.style.top = y + 'px';
            character.className = className;
            return character;
        }

// ゲームをリセットする
        function resetGame() {
            fishX = 50;
            fishY = 50;
            birdX = 200;
            birdY = 200;
            fishElement.style.left = fishX + 'px';
            fishElement.style.top = fishY + 'px';
            birdElement.style.left = birdX + 'px';
            birdElement.style.top = birdY + 'px';
        }
    </script>
</body>
</html>
```

上記のコードは、魚と鳥がスマホ操作で動かせるシンプルなゲームです。魚を矢印キーで、鳥をWASDキーで操作します。もし魚と鳥が衝突した場合は、アラートが表示されます。

ゲーム画面はウィンドウ全体を覆っており、魚と鳥は絵文字で表されています。移動速度や背景のサイズなどは変数として調整できますので、適宜変更して遊んでみてください。