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

No:6237

201

←

Prev Next

→

Pac-Man (chess game)
Developer もちきなこ｜Date and time 23/7/1 23:06:14
Build time 32.011 sec｜Game capacity 2.652KB｜

Script

了解しました。以下に、スマホ操作を前提としたパックマンのゲームの実装例を示します。

Pacman

このプログラムでは、スマホ上でタッチ操作によってPacmanの位置を変更することができます。スクリーン上の任意の場所をタッチすると、Pacmanがその位置に移動し、向きも変わります。ただし、ゴーストやドットの動作など、完全なゲームを作るにはさらに多くの実装が必要です。以上のプログラムは、ゲームの一部を表現するための基本的な実装例です。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解しました。以下に、スマホ操作を前提としたパックマンのゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Pacman</title>
  <style>
    #map {
      position: relative;
      width: 300px;
      height: 300px;
      border: 1px solid black;
    }
    #pacman {
      position: absolute;
      top: 0;
      left: 0;
    }
    .dot {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: yellow;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <h1>Pacman</h1>
  <div id="map"></div>

// マップの生成
    const map = document.getElementById("map");
    for (let i = 0; i < mapSize; i++) {
      for (let j = 0; j < mapSize; j++) {
        const dot = document.createElement("div");
        dot.className = "dot";
        dot.style.top = `${i * 30}px`;
        dot.style.left = `${j * 30}px`;
        map.appendChild(dot);
      }
    }

// Pacmanの生成
    const pacman = document.createElement("img");
    pacman.src = "pacman.png";
    pacman.id = "pacman";
    map.appendChild(pacman);

// Pacmanの初期位置
    let pacmanX = 0;
    let pacmanY = 0;

// 画面タッチ時のイベントリスナー
    map.addEventListener("touchstart", (event) => {
      const touchX = event.touches[0].pageX;
      const touchY = event.touches[0].pageY;

if ((touchX - pacmanX) >= 0) {
        pacman.style.transform = "rotateY(0deg)";
      } else {
        pacman.style.transform = "rotateY(180deg)";
      }

if ((touchY - pacmanY) >= 0) {
        pacman.style.transform += " rotateX(0deg)";
      } else {
        pacman.style.transform += " rotateX(180deg)";
      }

pacman.style.left = `${touchX - pacman.offsetWidth / 2}px`;
      pacman.style.top = `${touchY - pacman.offsetHeight / 2}px`;

pacmanX = touchX - pacman.offsetWidth / 2;
      pacmanY = touchY - pacman.offsetHeight / 2;

event.preventDefault();
    });
  </script>
</body>
</html>
```