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

No:1494

266

←

Prev Next

→

Harvesting sweet potatoes
Developer sayaensm｜Date and time 23/6/18 17:35:02
Build time 19.53 sec｜Game capacity 1.851KB｜

Script

ゲームの概要：「さつまいもの収穫」プレイヤーは、畑に設置されたさつまいもをクリックして収穫していくゲームです。以下がJavaScriptを含んだ1枚のhtmlファイルのプログラム例です。

さつまいもの収穫

畑に設置されたさつまいもをクリックして収穫してください！

上記のプログラムでは、畑を表示するために div 要素を用意し、そこにさつまいもの絵文字を表示しました。さつまいもをクリックすると、そのさつまいもが消えて score が加算されます。SCORE を表示するために div 要素を用意しました。スマホで操作しやすいように、大きなフォントサイズを設定しています。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

ゲームの概要：「さつまいもの収穫」
プレイヤーは、畑に設置されたさつまいもをクリックして収穫していくゲームです。

以下がJavaScriptを含んだ1枚のhtmlファイルのプログラム例です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>さつまいもの収穫</title>
    <style>
      body {
        font-size: 3em;
        text-align: center;
      }
      .sweet-potato {
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <h1>さつまいもの収穫</h1>
    <p>畑に設置されたさつまいもをクリックして収穫してください！</p>
    <div id="field"></div>
    <script>
      const field = document.getElementById('field');
      let score = 0;
      for (let i = 0; i < 9; i++){
        const sweetPotato = document.createElement('span');
        sweetPotato.setAttribute('class', 'sweet-potato');
        sweetPotato.innerHTML = '🍠';
        sweetPotato.addEventListener('click', ()=>{
          sweetPotato.style.display = 'none';
          score++;
          updateScore();
        });
        field.appendChild(sweetPotato);
      }
      const scoreDiv = document.createElement('div');
      scoreDiv.innerHTML = `SCORE: ${score}`;
      document.body.appendChild(scoreDiv);
      function updateScore(){
        scoreDiv.innerHTML = `SCORE: ${score}`;
      }
    </script>
  </body>
</html>