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

No:6323

2740

←

Prev Next

→

A game that will blow up your hangry spirit.
Developer anonymous｜Date and time 70/1/1 9:40:35
Build time unknown sec｜Game capacity 2.435KB｜

Script

了解しました。ハングリー精神を爆上がりするゲームの例として、以下のような「食べ物を食べるゲーム」を作成してみます。

ハングリー精神が爆上がりするゲーム

Score: 0

上記のコードは、食べ物の画像（food.png）を表示し、その食べ物をクリックすることでスコアが加算される単純なゲームです。食べ物はクリックするたびにランダムな位置に移動します。スコアは画面上部に表示されます。ゲームを遊ぶにはhtmlファイルをブラウザで開いてください。

←

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>
    <h1>ハングリー精神が爆上がりするゲーム</h1>
    <div id="gameContainer">
        <p id="score">Score: 0</p>
        <img id="food" src="food.png">
    </div>

// スコア表示用の要素を取得
            var scoreElement = document.getElementById("score");

// 食べ物要素を取得
            var foodElement = document.getElementById("food");

// 食べ物をクリックした時の処理を追加
            foodElement.addEventListener("click", function() {
                // スコアを加算
                score += 1;

// スコアを表示
                scoreElement.innerText = "Score: " + score;

// 食べ物をランダムな位置に移動
                var gameContainer = document.getElementById("gameContainer");
                var maxLeft = gameContainer.offsetWidth - foodElement.offsetWidth;
                var maxTop = gameContainer.offsetHeight - foodElement.offsetHeight;

var newLeft = Math.floor(Math.random() * maxLeft);
                var newTop = Math.floor(Math.random() * maxTop);

foodElement.style.left = newLeft + "px";
                foodElement.style.top = newTop + "px";
            });
        };
    </script>

#food {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
        }
    </style>
</body>
</html>
```