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

No:5855

332

Ah, bear dolls!
Developer User3848｜Date and time 23/6/30 23:56:56
Build time 22.724 sec｜Game capacity 2.356KB｜

了解です。では、クマの人形を使った簡単なゲームを作ってみましょう。

クマのゲーム

スコア: 0

クマの画像

上記のコードは、クマの画像が表示され、それをクリックするとスコアが増え、クマの位置がランダムに変わるというシンプルなゲームです。スマートフォンなどのタッチ操作に対応しており、絵文字を使わずにクマの画像を表示しています。実行すると、クマの画像が中央に表示され、クリックするとスコアが表示され、クマの位置がランダムに変わります。スコアが正しく増え、クマの位置が正しく変更されることを確認してください。ただし、画像ファイル `emozi_bear.png` は別途用意する必要があります。よりゲーム感を出すためには、時間制限やクマが動く速度などを追加することもできます。また、絵文字や他の要素を使ってさまざまなゲームを作ることも可能です。以上が、1枚のHTMLファイルに実装されたJavaScriptを含むクマのゲームの例となります。

→ 　

2　

1　

[PR]現在の売れ筋ゲームランキング

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

(C)2023 HisashiApp

了解です。では、クマの人形を使った簡単なゲームを作ってみましょう。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>クマのゲーム</title>
</head>
<body>
    <h1>クマのゲーム</h1>
    <p id="score">スコア: 0</p>
    <img src="kuma.png" alt="クマの画像" id="kuma" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px;">

<script>
        // クマの画像をクリックした時の処理
        document.getElementById("kuma").addEventListener("click", function() {
            // スコアを更新
            score += 10;
            document.getElementById("score").textContent = "スコア: " + score;

// クマの位置をランダムに変更
            var containerWidth = window.innerWidth - 100;
            var containerHeight = window.innerHeight - 100;
            var randomLeft = Math.floor(Math.random() * containerWidth) + "px";
            var randomTop = Math.floor(Math.random() * containerHeight) + "px";
            document.getElementById("kuma").style.left = randomLeft;
            document.getElementById("kuma").style.top = randomTop;
        });

// スコアの初期値を設定
        var score = 0;
    </script>
</body>
</html>
```

上記のコードは、クマの画像が表示され、それをクリックするとスコアが増え、クマの位置がランダムに変わるというシンプルなゲームです。スマートフォンなどのタッチ操作に対応しており、絵文字を使わずにクマの画像を表示しています。

実行すると、クマの画像が中央に表示され、クリックするとスコアが表示され、クマの位置がランダムに変わります。スコアが正しく増え、クマの位置が正しく変更されることを確認してください。ただし、画像ファイル `kuma.png` は別途用意する必要があります。

よりゲーム感を出すためには、時間制限やクマが動く速度などを追加することもできます。また、絵文字や他の要素を使ってさまざまなゲームを作ることも可能です。以上が、1枚のHTMLファイルに実装されたJavaScriptを含むクマのゲームの例となります。