Pictogram Wars (series of international wars between Japan and China, covering the period from 1467 to 1448)'s game

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

No:8105

1205

←

Prev Next

→

Pictogram Wars (series of international wars betwe..ALL
Developer User4134｜Date and time 23/7/13 0:19:58
Build time 17.004 sec｜Game capacity 2.397KB｜

Script

了解しました。では、絵文字大戦のゲームを作成します。

上記のコードは、絵文字をランダムに配置し、タップすると文字色が赤くなるという簡単なゲームです。htmlファイルとして実装されており、JavaScriptは`script`タグで囲まれています。ゲームはスマートフォンで操作することを前提としており、絵文字を使っています。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。では、絵文字大戦のゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>絵文字大戦</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    #game-board {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      height: 100%;
    }
    .emoji {
      width: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// ゲームボードのサイズ
    const boardSize = 6;

// ゲームボードの要素を生成する関数
    function createBoard() {
      const gameBoard = document.getElementById('game-board');
      for (let i = 0; i < boardSize * boardSize; i++) {
        const emoji = document.createElement('div');
        emoji.className = 'emoji';
        gameBoard.appendChild(emoji);
      }
    }

// 絵文字をランダムに配置する関数
    function placeEmojis() {
      const emojiElements = document.getElementsByClassName('emoji');
      for (let i = 0; i < emojiElements.length; i++) {
        const randomIndex = Math.floor(Math.random() * emojis.length);
        emojiElements[i].textContent = emojis[randomIndex];
      }
    }

// 絵文字をタップしたときの処理を設定する関数
    function addClickEventListener() {
      const emojiElements = document.getElementsByClassName('emoji');
      for (let i = 0; i < emojiElements.length; i++) {
        emojiElements[i].addEventListener('click', function() {
          this.style.color = 'red';
        });
      }
    }

// ゲームを開始する関数
    function startGame() {
      createBoard();
      placeEmojis();
      addClickEventListener();
    }

// ゲーム開始
    startGame();
  </script>
</body>
</html>
```