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

No:26442

←

Prev Next

→

😇が降ってきて😄が取る
Developer User13119｜Date and time 23/11/30 20:36:35
Build time 73.523 sec｜Game capacity 2.266KB｜

Script

了解です！以下に、ゲームの実装例を示します。

Emoji Catcher

Score: 0

この実装例では、スマホで遊べるように、画面全体を占める`game`という要素を用意し、その中にランダムな位置に表示される絵文字をクリックしてスコアを稼ぐゲームです。ゲームが開始されると、1秒ごとに絵文字がランダムな位置に作成されます。絵文字をクリックすると、スコアが増え、絵文字は画面から消えます。スコアは`score`という変数で管理され、`score`の値は画面上に表示されます。

←

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>Emoji Catcher</title>
  <style>
    body {
      text-align: center;
    }
    
    #game {
      position: relative;
      width: 100%;
      height: 500px;
      border: 1px solid black;
    }
    
    .emoji {
      position: absolute;
      font-size: 40px;
    }
  </style>
</head>
<body>
  <h1>Emoji Catcher</h1>
  <h3>Score: <span id="score">0</span></h3>
  
  <div id="game"></div>
  
  <script>
    // Emojiの種類
    const emojis = ["😄", "😃", "😀", "😊", "😉", "😎", "😍", "🥰", "🤩", "😘"];
    
    // ゲームのステータス
    let score = 0;
    let gameInterval;
    
    // Emojiをランダムな位置に作成する関数
    function createEmoji() {
      const gameDiv = document.getElementById("game");
      const emoji = document.createElement("span");
      emoji.className = "emoji";
      emoji.innerText = emojis[Math.floor(Math.random() * emojis.length)];
      emoji.style.left = Math.random() * (gameDiv.offsetWidth - emoji.offsetWidth) + "px";
      emoji.style.top = Math.random() * (gameDiv.offsetHeight - emoji.offsetHeight) + "px";
      gameDiv.appendChild(emoji);
      
      // Emojiをクリックした場合の処理
      emoji.addEventListener("click", () => {
        score++;
        document.getElementById("score").innerText = score;
        gameDiv.removeChild(emoji);
      });
    }
    
    // Emojiを一定間隔で作成する関数
    function startGame() {
      gameInterval = setInterval(createEmoji, 1000);
    }
    
    // ゲームを開始する
    startGame();
  </script>
</body>
</html>
```