The rules of the game are to manipulate the ATM to withdraw money that falls from the screen. The player can move the ATM left or right.'s game | AI game creator

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

No:4188

1824

The rules of the game are to manipulate the ATM to..ALL
Developer User3589｜Date and time 23/6/27 13:56:55
Build time 34.496 sec｜Game capacity 3.345KB｜

ATMを操作してお金を引き出すゲームを作りました。プレイヤーはスマホ画面を左右に傾けて操作できるようにしています。お金が画面上から落ちてくるので、プレイヤーはATMを動かしてお金を引き出すことが目的です。 HTMLファイルを以下に示します。

このHTMLファイルはJavaScriptを含み、scriptタグで囲まれています。また、スマホ操作に対応するために、onmousemoveイベントを使用しています。ゲームのルールは、ATMを操作して画面上から落ちてくるお金を引き出すことです。お金は定期的に下に移動していくため、プレイヤーはATMを動かしてお金との衝突を避けながら引き出す必要があります。ゲームの遊び方は、スマホ画面を左右に傾けるだけです。ATMはスマホ画面の上部に表示され、ユーザーが操作することができます。お金とATMの衝突判定は、checkCollision()関数で行っています。お金が画面下部に落ちた場合やATMと衝突した場合には、ゲームオーバーとなります。ゲーム開始は、moveMoney()関数を定期的に実行することで実現しています。この関数では、お金を10px下へ移動させています。また、衝突判定もこの関数から呼び出しています。以上が、ATMを操作してお金を引き出すゲームを作るためのHTMLファイルです。絵文字を使用しなくても、プログラム自体がゲーム化されています。

→ 　

1　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

ATMを操作してお金を引き出すゲームを作りました。プレイヤーはスマホ画面を左右に傾けて操作できるようにしています。お金が画面上から落ちてくるので、プレイヤーはATMを動かしてお金を引き出すことが目的です。

HTMLファイルを以下に示します。

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ATMゲーム</title>
    <style>
      #atm {
        position: relative;
        width: 100px;
        height: 50px;
        background-color: gray;
        border-radius: 5px;
      }
      #money {
        position: absolute;
        bottom: 0;
        width: 20px;
        height: 20px;
        background-color: gold;
        border-radius: 50%;
      }
    </style>
  </head>
  <body onmousemove="moveATM(event)">
    <div id="atm"></div>
    <script>
      function moveATM(event) {
        var atm = document.getElementById("atm");
        var x = event.clientX;
        var y = event.clientY;
        atm.style.left = x - 50 + "px";
        atm.style.top = y - 25 + "px";
      }

function checkCollision() {
        var atm = document.getElementById("atm");
        var atmLeft = atm.offsetLeft;
        var atmRight = atm.offsetLeft + 100;
        var money = document.getElementById("money");
        var moneyTop = money.offsetTop;

if (moneyTop > window.innerHeight) {
          clearInterval(interval);
          alert("ゲームオーバー！引き出し忘れた？");
        } else if (moneyTop + 20 >= window.innerHeight - 80 && 
          atmLeft < money.offsetLeft + 20 && atmRight > money.offsetLeft) {
          clearInterval(interval);
          alert("おめでとう！お金を引き出しました！");
        }
      }

function moveMoney() {
        var money = document.getElementById("money");
        var moneyTop = money.offsetTop;
        money.style.top = moneyTop + 10 + "px";
        checkCollision();
      }

var interval = setInterval(moveMoney, 100);
    </script>
  </body>
</html>
```

このHTMLファイルはJavaScriptを含み、scriptタグで囲まれています。また、スマホ操作に対応するために、onmousemoveイベントを使用しています。

ゲームのルールは、ATMを操作して画面上から落ちてくるお金を引き出すことです。お金は定期的に下に移動していくため、プレイヤーはATMを動かしてお金との衝突を避けながら引き出す必要があります。

ゲームの遊び方は、スマホ画面を左右に傾けるだけです。ATMはスマホ画面の上部に表示され、ユーザーが操作することができます。

お金とATMの衝突判定は、checkCollision()関数で行っています。お金が画面下部に落ちた場合やATMと衝突した場合には、ゲームオーバーとなります。

ゲーム開始は、moveMoney()関数を定期的に実行することで実現しています。この関数では、お金を10px下へ移動させています。また、衝突判定もこの関数から呼び出しています。

以上が、ATMを操作してお金を引き出すゲームを作るためのHTMLファイルです。絵文字を使用しなくても、プログラム自体がゲーム化されています。