Lets recombine the code so that it can be recombined after output.'s game

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

No:5451

2007

←

Prev Next

→

Lets recombine the code so that it can be recombin..ALL
Developer User3589｜Date and time 23/6/30 3:03:50
Build time 27.825 sec｜Game capacity 2.958KB｜

Script

了解しました。以下に、JavaScriptを含むHTMLファイルで実装したゲームの例を示します。このゲームはスマートフォンでの操作を前提としており、絵文字を使用しています。

このゲームでは、画面上に表示される絵文字をタップしてスコアを稼ぐゲームです。画面上には最初にいくつかの絵文字が表示され、それらをタップすることでスコアが加算されます。定期的に新しい絵文字が表示され、画面上に絵文字がなくなるとゲームが終了し、スコアが表示されます。また、ゲームが終了した後は再度絵文字が表示されるようになっています。このように、HTML内にJavaScriptのコードを埋め込むことにより、プログラムとして実行可能なゲームを作成することができます。

←

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>
    #game-area {
      display: flex;
      flex-wrap: wrap;
      max-width: 360px;
      margin: 0 auto;
    }
    
    .emoji {
      width: 60px;
      height: 60px;
      font-size: 32px;
      text-align: center;
      line-height: 1.2;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="game-area"></div>

function createEmoji() {
      const gameArea = document.getElementById('game-area');

for (let i = 0; i < emojis.length; i++) {
        const emoji = document.createElement('div');
        emoji.innerHTML = emojis[i];
        emoji.classList.add('emoji');
        emoji.addEventListener('click', () => {
          score++;
          emoji.style.opacity = 0;
          setTimeout(() => {
            emoji.remove();
          }, 500);
        });

gameArea.appendChild(emoji);
      }
    }

createEmoji();

setInterval(() => {
      const gameArea = document.getElementById('game-area');
      const emojiCount = gameArea.childElementCount;

if (emojiCount < emojis.length) {
        const emoji = document.createElement('div');
        const randomIndex = Math.floor(Math.random() * emojis.length);
        emoji.innerHTML = emojis[randomIndex];
        emoji.classList.add('emoji');
        emoji.addEventListener('click', () => {
          score++;
          emoji.style.opacity = 0;
          setTimeout(() => {
            emoji.remove();
          }, 500);
        });

gameArea.appendChild(emoji);
      }
    }, 1000);

setInterval(() => {
      const gameArea = document.getElementById('game-area');
      const emojiCount = gameArea.childElementCount;

if (emojiCount === 0) {
        alert(`ゲーム終了！スコア: ${score}`);
        score = 0;
        createEmoji();
      }
    }, 100);
  </script>
</body>
</html>
```

このように、HTML内にJavaScriptのコードを埋め込むことにより、プログラムとして実行可能なゲームを作成することができます。