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

No:5510

2671

←

Prev Next

→

human cannon
Developer User3694｜Date and time 23/6/30 8:04:30
Build time 26.38 sec｜Game capacity 2.709KB｜

Script

了解しました。以下に、スマホで遊べるシンプルなゲームの例を示します。このゲームでは、プレイヤーが大砲から人間を発射し、的に命中させることを目指します。

人間大砲

このゲームでは、スマホのタッチ操作に対応しており、指で人間を上方向にスライドさせることで発射角度を調整します。指を離すと人間が的に向かって発射されます。注意: 実行するにはHTMLファイルを作成し、ブラウザで開いてください。また、絵文字を使用せず、代わりにCSSの背景色を設定しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>人間大砲</title>
    <style>
      body {
        background-color: #DDD;
      }
      #cannon {
        width: 80px;
        height: 120px;
        background-color: #555;
        position: relative;
        margin: 0 auto;
      }
      #human {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #F00;
        position: absolute;
        bottom: 0;
      }
      #target {
        width: 60px;
        height: 60px;
        background-color: #33CC33;
        position: absolute;
        top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>人間大砲</h1>
    <div id="cannon">
      <div id="human"></div>
    </div>
    <div id="target"></div>

let humanFired = false;

function moveHuman(event) {
        if (humanFired) return;

const cannonTop = cannon.getBoundingClientRect().top;
        const cannonHeight = cannon.offsetHeight;
        const mouseY = event.changedTouches[0].clientY;
        const relativeMouseY = mouseY - cannonTop;
        const maxMouseY = cannonHeight - human.offsetHeight;

if (relativeMouseY < maxMouseY) {
          human.style.bottom = relativeMouseY + "px";
        } else {
          human.style.bottom = maxMouseY + "px";
        }
      }

function fireHuman() {
        if (humanFired) return;

const launchHeight = parseInt(human.style.bottom);
        const targetTop = target.getBoundingClientRect().top;

human.style.transition = "transform 1s";
        human.style.transform = `translateY(-${bodyHeight - launchHeight - targetTop}px)`;

humanFired = true;
      }

document.body.addEventListener("touchmove", moveHuman);
      document.body.addEventListener("touchend", fireHuman);
    </script>
  </body>
</html>
```

このゲームでは、スマホのタッチ操作に対応しており、指で人間を上方向にスライドさせることで発射角度を調整します。指を離すと人間が的に向かって発射されます。

注意: 実行するにはHTMLファイルを作成し、ブラウザで開いてください。また、絵文字を使用せず、代わりにCSSの背景色を設定しています。