A mess that sparks the next outrageous AI to come.'s game

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
A mess that sparks the next outrageous AI to come.'s game | AI game creator

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

No:5926

1178

←

Prev Next

→

A mess that sparks the next outrageous AI to come.
Developer User1006｜Date and time 23/7/1 2:26:29
Build time 25.02 sec｜Game capacity 2.578KB｜

Script

了解です。以下に、スマホで遊べるシンプルなゲームを実装します。

このゲームでは、画面上に表示される赤い正方形をスマホのタッチ操作で動かすことができます。スクリプトの中で位置情報を更新し、それに応じて正方形が移動します。 `#square` の CSS スタイルで表示位置が設定されており、JavaScript でその位置を変更することで移動させています。スクリプトでは、`mousedown` イベントと `mousemove` イベントを使ってタッチ操作を検知し、正方形の位置情報を更新しています。このプログラムでは、スマホでの動作を想定して作成していますが、パソコンのブラウザでも動作するはずです。遊んでみてください！

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解です。以下に、スマホで遊べるシンプルなゲームを実装します。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>スクエアゲーム</title>
    <style>
      #square {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="square"></div>

// スマホのタッチイベントを取得し、正方形を移動する
      document.addEventListener("touchstart", handleTouchStart, false);
      document.addEventListener("touchmove", handleTouchMove, false);

let xStart = null;
      let yStart = null;

function handleTouchStart(event) {
        xStart = event.touches[0].clientX;
        yStart = event.touches[0].clientY;
      }

function handleTouchMove(event) {
        if (!xStart || !yStart) {
          return;
        }

const xEnd = event.touches[0].clientX;
        const yEnd = event.touches[0].clientY;

const deltaX = xEnd - xStart;
        const deltaY = yEnd - yStart;

posX += deltaX;
        posY += deltaY;

const square = document.getElementById("square");
        square.style.left = `${posX}px`;
        square.style.top = `${posY}px`;

xStart = xEnd;
        yStart = yEnd;

event.preventDefault();
      }

// ゲーム開始時に正方形を表示する
      window.addEventListener("load", function() {
        const square = document.getElementById("square");
        square.style.left = `${posX}px`;
        square.style.top = `${posY}px`;
      });
    </script>
  </body>
</html>
```

このゲームでは、画面上に表示される赤い正方形をスマホのタッチ操作で動かすことができます。スクリプトの中で位置情報を更新し、それに応じて正方形が移動します。

`#square` の CSS スタイルで表示位置が設定されており、JavaScript でその位置を変更することで移動させています。スクリプトでは、`touchstart` イベントと `touchmove` イベントを使ってタッチ操作を検知し、正方形の位置情報を更新しています。

このプログラムでは、スマホでの動作を想定して作成していますが、パソコンのブラウザでも動作するはずです。遊んでみてください！