Leverless Controller's game

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

No:11396

152

←

Prev Next

→

Leverless Controller
Developer User1006｜Date and time 23/8/9 15:44:21
Build time 24.095 sec｜Game capacity 2.729KB｜

Script

以下は、スマホ向けのレバーレス・コントローラーを実装したゲームの例です。

このコードでは、上下左右のボタンをクリックまたはタッチすることで、プレイヤーが移動します。`x`と`y`の値を更新し、`transform`スタイルを使ってプレイヤーを移動させています。スマホ向けに設計されているため、スマホで実際に動作させることを推奨します。パソコンのブラウザで実行する場合は、デベロッパーツールを開いてモバイルデバイスのエミュレーションモードを使用すると、スマホのような操作感で動作を確認できます。

←

Prev　Next

→ 　

Back　

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

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

以下は、スマホ向けのレバーレス・コントローラーを実装したゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>レバーレス・コントローラー</title>
  <style>
    #controller {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      height: 100vh;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div id="controller">
    <button id="up">⇧</button>
    <div>
      <button id="left">⇦</button>
      <button id="right">⇨</button>
    </div>
    <button id="down">⇩</button>
  </div>

function updatePosition() {
      player.style.transform = `translate(${x}px, ${y}px)`;
    }

function handleMove(event) {
      const direction = event.target.id;
      switch (direction) {
        case 'up':
          y -= 10;
          break;
        case 'down':
          y += 10;
          break;
        case 'left':
          x -= 10;
          break;
        case 'right':
          x += 10;
          break;
      }
      updatePosition();
    }

function handleTouchStart(event) {
      event.preventDefault();
      handleMove(event);
      event.target.addEventListener('touchmove', handleTouchMove);
      event.target.addEventListener('touchend', handleTouchEnd);
    }

function handleTouchMove(event) {
      event.preventDefault();
      handleMove(event);
    }

function handleTouchEnd(event) {
      event.preventDefault();
      event.target.removeEventListener('touchmove', handleTouchMove);
      event.target.removeEventListener('touchend', handleTouchEnd);
    }

document.getElementById('up').addEventListener('touchstart', handleTouchStart);
    document.getElementById('down').addEventListener('touchstart', handleTouchStart);
    document.getElementById('left').addEventListener('touchstart', handleTouchStart);
    document.getElementById('right').addEventListener('touchstart', handleTouchStart);
  </script>
</body>
</html>
```

このコードでは、上下左右のボタンをクリックまたはタッチすることで、プレイヤーが移動します。`x`と`y`の値を更新し、`transform`スタイルを使ってプレイヤーを移動させています。

スマホ向けに設計されているため、スマホで実際に動作させることを推奨します。パソコンのブラウザで実行する場合は、デベロッパーツールを開いてモバイルデバイスのエミュレーションモードを使用すると、スマホのような操作感で動作を確認できます。