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

No:174

284

←

Prev Next

→

Memory Games
Developer User2908｜Date and time 23/6/3 3:53:25
Build time 103.328 sec｜Game capacity 3.774KB｜

Script

Below is a single html file including JavaScript. It works as a memory game and、Can be operated with a smartphone.

Memory Games

This memory game is、Have a 3x3 table and、Play by clicking on the cells in the table. By pressing the start button.、Eight pictograms (16 total) arranged randomly in a table are displayed. The player is、Memorize these pictograms in order、The goal is to select and clear all pictograms. Each time you select a pictogram、Selected pictograms are displayed with a yellow background color. When all pictograms are selected、Clear! alert appears and the、table is reset. However, if、The same pictogram cannot be selected more than once. Pictograms are placed randomly and、Different games can be played each time.

←

Prev　Next

→ 　

Back　

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

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

以下がJavaScriptを含む1枚のhtmlファイルになります。記憶ゲームとして動作し、スマホで操作可能です。

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>記憶ゲーム</title>
  <style>
    body {
      font-size: 2rem;
      text-align: center;
      padding: 2rem;
    }
    table {
      margin: 0 auto;
      border-collapse: collapse;
    }
    td {
      width: 5rem;
      height: 5rem;
      border: 1px solid black;
      cursor: pointer;
    }
    .selected {
      background-color: yellow;
    }
    #start {
      font-size: 1.5rem;
      padding: 1rem;
      border: none;
      background-color: blue;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.3rem;
      margin-bottom: 2rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>記憶ゲーム</h1>
  <button id="start">スタート</button>
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
  <p id="result"></p>

function shuffle(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }

createTable();

document.querySelector('#start').addEventListener('click', () => {
      createTable();
      document.querySelectorAll('td').forEach(td => {
        td.addEventListener('click', handleClick);
      });
    });
  </script>
</body>
</html>
```

この記憶ゲームは、3x3のテーブルを持ち、表のセルをクリックすることで遊びます。スタートボタンを押すことで、表の中にランダムに並べられた8つの絵文字（計16個）が表示されます。プレイヤーは、これらの絵文字を順番に覚えて、すべての絵文字を選択してクリアすることを目指します。絵文字を選択するたびに、選択済みの絵文字は黄色い背景色で表示されます。すべての絵文字を選択すると、「クリア！」というアラートが表示され、テーブルがリセットされます。ただし、同じ絵文字を2回以上選択することはできません。絵文字はランダムに配置され、毎回異なるゲームがプレイできます。