dream diary's game | AI game creator

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

No:4418

978

dream diary
Developer もちきなこ｜Date and time 23/6/27 23:44:34
Build time 36.418 sec｜Game capacity 3.242KB｜

では、私は簡単なスマートフォン向けのHTMLゲームを作成します。このゲームは、一塊のスロットマシンをベースにしています。以下がゲームの概要です。ゲームの説明: - ゲームの画面には、3つのスロットが表示され、それぞれのスロットには3つの絵柄があります。 - プレイヤーは、スロットを回すことができます。スロットを回すと、3つの絵柄がランダムに表示されます。 - すべてのスロットが同じ絵柄に停止したとき、スロットマシンから賞金が出ます。 - 賞金はランダムで、10 ~ 100コインの間で変動します。 - ゲームは、最初に100コインで開始されます。ゲーム中にコインが0になった場合、ゲームオーバーになります。実装: 以下は、実際に動作するJavaScriptコードです。これは、1つのHTMLファイルに直接記述されています。動作環境は、スマートフォン向けのWebブラウザです。更に、絵柄の代わりに絵文字を使用しています。これにより、ゲーム画面が視覚的にも興味深くなります。

Coins: 100

→ 　

2　

0　

[PR]現在の本の売れ筋ランキング

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

(C)2023 HisashiApp

では、私は簡単なスマートフォン向けのHTMLゲームを作成します。このゲームは、一塊のスロットマシンをベースにしています。以下がゲームの概要です。

ゲームの説明:

- ゲームの画面には、3つのスロットが表示され、それぞれのスロットには3つの絵柄があります。
- プレイヤーは、スロットを回すことができます。スロットを回すと、3つの絵柄がランダムに表示されます。
- すべてのスロットが同じ絵柄に停止したとき、スロットマシンから賞金が出ます。
- 賞金はランダムで、10 ~ 100コインの間で変動します。
- ゲームは、最初に100コインで開始されます。ゲーム中にコインが0になった場合、ゲームオーバーになります。

実装:

以下は、実際に動作するJavaScriptコードです。これは、1つのHTMLファイルに直接記述されています。動作環境は、スマートフォン向けのWebブラウザです。

更に、絵柄の代わりに絵文字を使用しています。これにより、ゲーム画面が視覚的にも興味深くなります。

<html>
  <head>
    <title>スロットゲーム</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="slot-machine">
      <div class="slot" id="slot1"></div>
      <div class="slot" id="slot2"></div>
      <div class="slot" id="slot3"></div>
      <button id="spin-button" onclick="spin()">Spin</button>
    </div>
    <br>
    <p>Coins: <span id="coins">100</span></p>
    <script>
      var emojis = ["", "☕️", "🍔", "🍕", "🍣", "🍺", "🍭", "🏀"];
      var coins = 100;
      var slot1 = Math.floor(Math.random() * emojis.length);
      var slot2 = Math.floor(Math.random() * emojis.length);
      var slot3 = Math.floor(Math.random() * emojis.length);
      document.getElementById("slot1").innerHTML = emojis[slot1];
      document.getElementById("slot2").innerHTML = emojis[slot2];
      document.getElementById("slot3").innerHTML = emojis[slot3];
      function spin() {
        if (coins < 10) {
          alert("コインが足りません。");
          return;
        }
        coins -= 10;
        document.getElementById("coins").innerHTML = coins;
        slot1 = Math.floor(Math.random() * emojis.length);
        slot2 = Math.floor(Math.random() * emojis.length);
        slot3 = Math.floor(Math.random() * emojis.length);
        document.getElementById("slot1").innerHTML = emojis[slot1];
        document.getElementById("slot2").innerHTML = emojis[slot2];
        document.getElementById("slot3").innerHTML = emojis[slot3];
        if (slot1 == slot2 && slot2 == slot3) {
          var prize = Math.floor(Math.random() * 91) + 10;
          coins += prize;
          alert("おめでとうございます！ " + prize + "コインを獲得しました。");
          document.getElementById("coins").innerHTML = coins;
        }
        if (coins <= 0) {
          alert("ゲームオーバー。");
          coins = 0;
          document.getElementById("coins").innerHTML = coins;
        }
      }
    </script>
  </body>
</html>