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

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
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

1859

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ファイルです。絵文字を使用しなくても、プログラム自体がゲーム化されています。