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

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

No:5926

1160

←

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` イベントを使ってタッチ操作を検知し、正方形の位置情報を更新しています。

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