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

No:16228

143

←

Prev Next

→

もかちゃんのゲーム🐥
Developer おまめちゃん｜Date and time 23/9/16 20:26:39
Build time 27.934 sec｜Game capacity 2.598KB｜

Script

了解です！以下が実際のプログラムです。

もかちゃんのゲーム🐥

Score: 0

このプログラムでは、ゲームスタートボタンをクリックすると、1秒ごとに画面上にランダムな位置に「🐥」という絵文字が表示されます。絵文字をクリックするとスコアが加算され、絵文字は消えます。5秒後には表示されていた絵文字も消えます。スコアは画面上部に表示され、スタートボタンはゲーム中は無効化されます。

←

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>もかちゃんのゲーム🐥</title>
    <style>
      body {
        font-size: 3rem;
        text-align: center;
        margin-top: 30vh;
      }
    </style>
  </head>
  <body>
    <h1>もかちゃんのゲーム🐥</h1>
    <h2 id="score">Score: 0</h2>
    <button id="startButton" onClick="startGame()">スタート</button>

function startGame() {
        document.getElementById("startButton").disabled = true;  // スタートボタンを無効化
        document.getElementById("startButton").innerText = "ゲーム中";  // スタートボタンの表示を変更
        document.getElementById("score").innerText = "Score: " + score;

interval = setInterval(() => {
          const emoji = document.createElement("span");  // 絵文字要素を作成
          emoji.innerHTML = "🐥";  // 絵文字を設定
          const xPos = Math.random() * (window.innerWidth - 100);  // ランダムなx座標を生成
          const yPos = Math.random() * (window.innerHeight - 200);  // ランダムなy座標を生成
          emoji.style.position = "absolute";  // 絵文字の配置方法を設定
          emoji.style.left = xPos + "px";  // 絵文字のx座標を設定
          emoji.style.top = yPos + "px";  // 絵文字のy座標を設定

emoji.addEventListener("click", () => {  // 絵文字がクリックされた時の処理を追加
            score++;  // スコアを加算
            document.getElementById("score").innerText = "Score: " + score;
            emoji.style.display = "none";  // クリックされた絵文字を非表示にする
          });

document.body.appendChild(emoji);  // 絵文字をbody要素に追加

setTimeout(() => {  // 5秒後に絵文字を削除
            emoji.style.display = "none";
          }, 5000);
        }, 1000);
      }
    </script>
  </body>
</html>
```