Pacman at Safari Park's game

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

No:5429

2691

←

Prev Next

→

Pacman at Safari Park
Developer User3826｜Date and time 23/6/30 2:38:41
Build time 19.788 sec｜Game capacity 1.853KB｜

Script

以下は、HTMLおよびJavaScriptを使用して実装されたパックマンゲームの例です。実際のゲームプレイはスマートフォン上で操作されます。絵文字は使用していませんが、パックマンのアイコンが表示されます。

☺

この例では、黄色い絵文字のパックマンが表示され、上下左右の矢印キーで操作することができます。パックマンは画面の枠内で移動し、壁を越えることはありません。上下左右の矢印キーはスマートフォンのタッチ操作で代替することができます。

←

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>パックマンゲーム</title>
  <style>
    #game-board {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: black;
    }

.pacman {
      position: absolute;
      font-size: 40px;
      color: yellow;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <span id="pacman" class="pacman">☺</span>
  </div>

document.addEventListener('keydown', (event) => {
      const key = event.key;

// パックマンの移動処理
      let left = parseInt(window.getComputedStyle(pacman).getPropertyValue('left'));
      let top = parseInt(window.getComputedStyle(pacman).getPropertyValue('top'));

if (key === 'ArrowUp' && top > 0) {
        pacman.style.top = `${top - 40}px`;
      }

if (key === 'ArrowDown' && top < 360) {
        pacman.style.top = `${top + 40}px`;
      }

if (key === 'ArrowLeft' && left > 0) {
        pacman.style.left = `${left - 40}px`;
      }

if (key === 'ArrowRight' && left < 360) {
        pacman.style.left = `${left + 40}px`;
      }
    });
  </script>
</body>
</html>
```