AI game creator

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

No:21899

←

Prev Next

→

夏祭り
Developer バファリンヌ｜Date and time 23/10/19 7:32:08
Build time 37.904 sec｜Game capacity 1.973KB｜

Script

了解です！以下に、スマートフォンで遊ぶことができる夏祭りのゲームの実装例を示します。ゲームの内容は、花火を打ち上げるというシンプルなものです。

このプログラムでは、スマートフォンで画面をタッチすることで花火が打ち上げられます。画面上のどこをタッチしても花火が表示されます。表示された花火は1秒後に消えます。「sky」というIDを持つdiv要素を表示し、その中に「firework」というクラス名を持つdiv要素（花火）を動的に追加しています。タッチイベントが発生した位置に花火を表示し、1秒後に消えるように設定しています。絵文字などのデザインは省略していますが、CSSを調整することで見た目をカスタマイズすることが可能です。

←

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>
      #sky {
        width: 100%;
        height: 100vh;
        background-color: black;
        position: relative;
      }
      .firework {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: yellow;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div id="sky"></div>

const fireworks = document.getElementsByClassName("firework");
        setTimeout(() => {
          sky.removeChild(firework);
        }, 1000);
      }

window.addEventListener("touchstart", launchFirework);
    </script>
  </body>
</html>
```

このプログラムでは、スマートフォンで画面をタッチすることで花火が打ち上げられます。画面上のどこをタッチしても花火が表示されます。表示された花火は1秒後に消えます。

「sky」というIDを持つdiv要素を表示し、その中に「firework」というクラス名を持つdiv要素（花火）を動的に追加しています。タッチイベントが発生した位置に花火を表示し、1秒後に消えるように設定しています。

絵文字などのデザインは省略していますが、CSSを調整することで見た目をカスタマイズすることが可能です。