Shoot game with moving 🎯.'s game

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

No:254

234

←

Prev Next

→

Shoot game with moving 🎯.
Developer User2906｜Date and time 23/6/11 12:46:36
Build time 23.204 sec｜Game capacity 2.787KB｜

Script

以下がJavaScriptを含むアプリの実装例です。このアプリは、スマホで操作が前提となっており、絵文字も多く使用されています。また、ゲームの概要としては、ユーザーが的🎯を撃つゲームになります。

このアプリは、動的に移動する目標🎯をクリックして弾丸を発射し、目標に当たるかどうかを判断するシンプルなゲームです。ユーザーはスマホで操作できます。また、アプリのスタイルやレイアウトはCSSで定義されています。

←

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.0">
    <title>動く🎯を撃つゲーム</title>
    <style>
      #game-container {
        width: 100%;
        height: 500px;
        text-align: center;
        position: relative;
      }
      #target {
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      #bullet {
        width: 20px;
        height: 20px;
        background-color: black;
        border-radius: 50%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="target"></div>
      <div id="bullet"></div>
    </div>
    <script>
      let target = document.getElementById('target');
      let bullet = document.getElementById('bullet');
      let gameContainer = document.getElementById('game-container');
      
      let targetTop = target.offsetTop;
      let targetLeft = target.offsetLeft;

let bulletBottom = bullet.offsetTop + bullet.offsetHeight;
      let bulletSpeed = 10;
      let bulletIntervalID = null;

target.addEventListener('click', () => {
        clearInterval(bulletIntervalID);
        bullet.style.bottom = "0px";
        bullet.style.display = "block";
        bulletIntervalID = setInterval(shootBullet, 10);
      });

function shootBullet() {
        bulletBottom += bulletSpeed;
        bullet.style.bottom = bulletBottom + "px";

if (bulletBottom >= gameContainer.offsetHeight - targetTop) {
          let bulletLeft = bullet.offsetLeft;
          if (bulletLeft >= targetLeft && bulletLeft <= targetLeft + target.offsetWidth) {
            alert("当たり！🎉");
          } else {
            alert("外れ・・・😞");
          }
          clearInterval(bulletIntervalID);
          bulletBottom = bullet.offsetTop + bullet.offsetHeight;
          bullet.style.display = "none";
        }
      }
    </script>
  </body>
</html>