Nostalgic memories filled with heavy feelings's game

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

No:4895

3741

←

Prev Next

→

Nostalgic memories filled with heavy feelings
Developer anonymous｜Date and time 70/1/1 9:57:42
Build time unknown sec｜Game capacity 3.462KB｜

Script

了解いたしました。重い思い出を懐かしむゲームを作成します。以下が実装例です。

このプログラムは、指定された絵文字のリストをシャッフルし、カードとして表示します。各カードをクリックすると、クリックされたカードの絵文字が表示され、スコアが計算されます。全てのカードをめくり終えると、最終スコアが表示されます。スマホでも操作ができるようになっています。

←

Prev　Next

→ 　

Back　

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

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

了解いたしました。重い思い出を懐かしむゲームを作成します。以下が実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <script>
    // ゲームの設定
    var memories = ["😊", "😢", "😄", "😭", "🥺"]; // 絵文字のリスト
    var score = 0; // スコア
    var clicked = []; // クリックされた絵文字のリスト

// ページ読み込み時に実行される関数
    function startGame() {
      shuffle(memories); // リストの要素をシャッフルする
      displayCards(); // カードを表示する
    }

// カードを表示する関数
    function displayCards() {
      var container = document.getElementById("container");
      container.innerHTML = ""; // コンテナを初期化

for (var i = 0; i < memories.length; i++) {
        var card = document.createElement("div");
        card.classList.add("card");
        card.dataset.index = i;
        card.innerHTML = memories[i];
        container.appendChild(card);
      }

var cards = container.getElementsByClassName("card");
      for (var i = 0; i < cards.length; i++) {
        cards[i].addEventListener("click", flipCard);
      }
    }

// カードをめくる関数
    function flipCard() {
      var index = this.dataset.index;

// カードが既にめくられている場合は終了
      if (clicked.includes(index)) {
        return;
      }

clicked.push(index); // クリックされたカードを保存

// カードのフォントサイズを大きくする
      this.style.fontSize = "4rem";

// スコアの計算
      if (memories[index] === "😊" || memories[index] === "😄") {
        score += 10;
      } else if (memories[index] === "😢" || memories[index] === "😭") {
        score -= 5;
      } else if (memories[index] === "🥺") {
        score -= 20;
      }

// 全てのカードをめくり終えた場合は結果を表示
      if (clicked.length === memories.length) {
        setTimeout(showResult, 1000);
      }
    }

// 結果を表示する関数
    function showResult() {
      var container = document.getElementById("container");
      container.innerHTML = "";
      container.textContent = "Your score: " + score;
    }

// リストをシャッフルする関数
    function shuffle(array) {
      var currentIndex = array.length, temporaryValue, randomIndex;

while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

return array;
    }
  </script>
  <style>
    .card {
      display: inline-block;
      width: 60px;
      height: 60px;
      font-size: 2rem;
      border: 1px solid black;
      margin: 5px;
      text-align: center;
      cursor: pointer;
    }
  </style>
</head>
<body onload="startGame()">
  <div id="container"></div>
</body>
</html>
```