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

No:7734

1196

←

Prev Next

→

Fish eat fish eat fish! Food chain game! Chain as ..ALL
Developer User3589｜Date and time 23/7/9 16:09:47
Build time 19.164 sec｜Game capacity 4.913KB｜

Script

了解しました。以下にHTMLファイル内に実装された食物連鎖ゲームのサンプルコードを記述します。

食物連鎖ゲーム

スコア: 0

このゲームでは、プレイヤーが魚を操作して、食べられる魚を食べてスコアを稼ぐことが目的です。プレイヤーと魚はクリックやキーボード入力によって操作することができます。衝突検知を行い、衝突した場合はスコアを更新し、食べられる魚を新たに生成します。プレイヤーと衝突した場合はゲームオーバーとなります。プレイヤーや魚の画像は、適宜自分の環境に合わせて用意してください。ゲームのルールやデザインは自由に変更していただいて構いません。また、スマートフォンでもプレイ可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解しました。以下にHTMLファイル内に実装された食物連鎖ゲームのサンプルコードを記述します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食物連鎖ゲーム</title>
    <style>
        body {
            font-size: 24px;
            text-align: center;
        }
        .fish {
            margin: 20px auto;
            display: block;
        }
        .score {
            font-size: 30px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>食物連鎖ゲーム</h1>
    <div id="game">
        <img src="fish1.png" class="fish" id="player">
    </div>
    <div class="score">スコア: <span id="score">0</span></div>

// スコア
        const scoreElement = document.getElementById('score');
        let score = 0;

// 初期化
        function init() {
            playerPositionX = Math.floor(window.innerWidth / 2) - 50;
            playerPositionY = Math.floor(window.innerHeight / 2) - 50;
            player.style.left = playerPositionX + 'px';
            player.style.top = playerPositionY + 'px';
            score = 0;
            scoreElement.textContent = score;
        }

// ゲームオーバー
        function gameOver() {
            alert('ゲームオーバー');
            init();
            startGame();
        }

// 衝突判定
        function checkCollision() {
            const playerRect = player.getBoundingClientRect();
            const fishes = Array.from(document.getElementsByClassName('fish'));

for (const fish of fishes) {
                const fishRect = fish.getBoundingClientRect();
                if (
                    playerRect.left < fishRect.right &&
                    playerRect.right > fishRect.left &&
                    playerRect.top < fishRect.bottom &&
                    playerRect.bottom > fishRect.top
                ) {
                    if (fish === player) {
                        gameOver();
                    } else {
                        fish.remove();
                        score++;
                        scoreElement.textContent = score;
                        createFish();
                    }
                }
            }
        }

// 魚を作成
        function createFish() {
            const fish = document.createElement('img');
            fish.setAttribute('src', 'fish1.png');
            fish.classList.add('fish');

const randomX = Math.floor(Math.random() * (window.innerWidth - 100));
            const randomY = Math.floor(Math.random() * (window.innerHeight - 100));
            fish.style.left = randomX + 'px';
            fish.style.top = randomY + 'px';

fish.addEventListener('click', () => {
                fish.remove();
                score++;
                scoreElement.textContent = score;
                createFish();
            });

document.getElementById('game').appendChild(fish);
        }

// プレイヤー操作
        function movePlayer(event) {
            const key = event.key;
            switch (key) {
                case 'ArrowUp':
                    playerPositionY -= 10;
                    break;
                case 'ArrowDown':
                    playerPositionY += 10;
                    break;
                case 'ArrowLeft':
                    playerPositionX -= 10;
                    break;
                case 'ArrowRight':
                    playerPositionX += 10;
                    break;
            }
            player.style.left = playerPositionX + 'px';
            player.style.top = playerPositionY + 'px';

checkCollision();
        }

// ゲーム開始
        function startGame() {
            createFish();
            document.addEventListener('keydown', movePlayer);
        }

init();
        startGame();
    </script>
</body>
</html>
```

このゲームでは、プレイヤーが魚を操作して、食べられる魚を食べてスコアを稼ぐことが目的です。プレイヤーと魚はクリックやキーボード入力によって操作することができます。衝突検知を行い、衝突した場合はスコアを更新し、食べられる魚を新たに生成します。プレイヤーと衝突した場合はゲームオーバーとなります。

プレイヤーや魚の画像は、適宜自分の環境に合わせて用意してください。ゲームのルールやデザインは自由に変更していただいて構いません。また、スマートフォンでもプレイ可能です。