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

No:8929

Slot-type non-human carta
Developer User4271｜Date and time 23/7/19 19:52:23
Build time 27.376 sec｜Game capacity 2.491KB｜

Script

了解です。以下に、スロット型の人外カルタの例を示します。このゲームは、3つのリールをスピンさせ、揃った絵柄によって得点が変化するゲームです。今回は絵文字ではなく、テキストで絵柄を表現します。

スロット型の人外カルタ

得点: 0

👽 👻 👹

このHTMLファイルでは、スピンボタンをクリックすると、3つのリールがランダムに変化します。絵柄が揃った場合には得点が増え、絵柄が一部揃った場合には得点が少し増える仕組みです。得点は上部に表示されます。このように、スロット型の人外カルタを実装することができます。

←

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>
  <h2>得点: <span id="score">0</span></h2>
  <button onclick="spinReels()">スピン</button>
  <div id="reels">
    <span id="reel1">👽</span>
    <span id="reel2">👻</span>
    <span id="reel3">👹</span>
  </div>

function spinReels() {
      // 1つ目のリールをスピン
      var reel1 = document.getElementById("reel1");
      var index1 = Math.floor(Math.random() * 3);
      reel1.textContent = getEmoticon(index1);

// 2つ目のリールをスピン
      var reel2 = document.getElementById("reel2");
      var index2 = Math.floor(Math.random() * 3);
      reel2.textContent = getEmoticon(index2);

// 3つ目のリールをスピン
      var reel3 = document.getElementById("reel3");
      var index3 = Math.floor(Math.random() * 3);
      reel3.textContent = getEmoticon(index3);

// スコアを計算
      var result = calculateScore(index1, index2, index3);
      score += result;

// スコアを更新
      var scoreElem = document.getElementById("score");
      scoreElem.textContent = score.toString();
    }

function getEmoticon(index) {
      switch (index) {
        case 0:
          return "👽"; // 宇宙人
        case 1:
          return "👻"; // お化け
        case 2:
          return "👹"; // 鬼
        default:
          return "";
      }
    }