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

No:9014

239

←

Prev Next

→

Pokemon sleep
Developer User4246｜Date and time 23/7/20 13:44:25
Build time 19.646 sec｜Game capacity 2.124KB｜

Script

了解しました。以下にポケモンスリープというゲームを作成したHTMLファイルのコードを示します。このゲームはスマホ操作を前提としており、JavaScriptを用いて実装されています。

ポケモンスリープ

😴

タップして起こしてください！

このゲームでは、起きているポケモンの絵文字が表示され、そのポケモンをタップすることでスリープモードに入ります。スリープモードではカウントダウンが表示され、10秒経過すると「おやすみなさい…」というメッセージが表示されます。再びポケモンをタップするとゲームがリセットされ、ポケモンが起きた状態になります。以上がポケモンスリープというゲームを作成したHTMLファイルの例です。

←

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>
    .pokemon {
      font-size: 50px;
      text-align: center;
      cursor: pointer;
    }
    .countdown {
      font-size: 30px;
      text-align: center;
    }
    .message {
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>ポケモンスリープ</h1>
  <p class="pokemon" id="pokemon">😴</p>
  <p class="countdown" id="countdown">10</p>
  <p class="message" id="message">タップして起こしてください！</p>

var countdown = 10;
    var gameOver = false;

pokemonElem.addEventListener('click', function() {
      if (!gameOver) {
        countdown = 10;
        countdownElem.textContent = countdown;

var timer = setInterval(function() {
          countdown--;
          countdownElem.textContent = countdown;

if (countdown === 0) {
            clearInterval(timer);
            gameOver = true;
            messageElem.textContent = 'おやすみなさい…';
          }
        }, 1000);
      }
    });
  </script>
</body>
</html>
```

以上がポケモンスリープというゲームを作成したHTMLファイルの例です。