Hurry up with the update of the SacraSchool simulator!!!! 🤬💢game's game

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

No:494

←

Prev Next

→

Hurry up with the update of the SacraSchool simula..ALL
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/15 0:05:47
Build time 30.473 sec｜Game capacity 2.296KB｜

Script

の概要：プレイヤーはスマホ画面内に表示される花火を打ち上げる役目を持つ。画面内のタイミングに合わせてタップして花火を打ち上げ、空に美しい花火を飛ばすゲームである。以下は実装例の一部である。

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

の概要：プレイヤーはスマホ画面内に表示される花火を打ち上げる役目を持つ。画面内のタイミングに合わせてタップして花火を打ち上げ、空に美しい花火を飛ばすゲームである。

以下は実装例の一部である。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>花火シューティング</title>
    <style>
      /* 画面サイズをいっぱい使う */
      body {
        margin: 0;
        padding: 0;
        height: 100vh;
        background: black;
      }
      /* 花火のデザイン */
      .firework {
        position: absolute;
        width: 10px;
        height: 40px;
        background: white;
        border-radius: 50%;
        transform: translateY(-40px);
        animation: shoot-firework ease 1s;
        animation-fill-mode: forwards;
      }
      /* 花火を打ち上げるアニメーション */
      @keyframes shoot-firework {
        from {
          transform: translateY(-40px);
          opacity: 1;
        }
        to {
          transform: translateY(-200px);
          opacity: 0;
        }
      }
      /* スコア表示 */
      #score {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 24px;
        color: white;
      }
    </style>
  </head>
  <body>

<div id="score">Score: 0</div>

<div onclick="shootFirework(event)" style="width: 100%; height: 100%;"></div>

function shootFirework(event) {
        // 花火を打ち上げる座標を取得
        const x = event.clientX;
        const y = event.clientY;

// 花火を表示する要素を作成・追加
        const firework = document.createElement('div');
        firework.className = "firework";
        firework.style.left = `${x - 5}px`; // 中心に合わせるため5ピクセル引く
        firework.style.top = `${y}px`;
        document.body.appendChild(firework);

// スコアを加算
        score += 10;
        document.getElementById('score').textContent = `Score: ${score}`;
      }
    </script>
  </body>
</html>