Pac-Man (chess game)'s game

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

No:11512

106

←

Prev Next

→

Pac-Man (chess game)
Developer User4906｜Date and time 23/8/10 19:34:48
Build time 25.071 sec｜Game capacity 2.481KB｜

Script

了解しました。以下にパックマンのゲームを実装したHTMLファイルの例を記述します。

このコードでは、HTMLとCSSを使用してゲームボードとパックマンの要素を作成し、JavaScriptを使用してキーボードの矢印キー入力に応じてパックマンを移動させる処理を実装しています。プレイヤーは矢印キーを押すことで、パックマンを上下左右に移動させることができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にパックマンのゲームを実装したHTMLファイルの例を記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Pac-Man Game</title>
  <style>
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }

.pacman {
      position: absolute;
      width: 50px;
      height: 50px;
      background: yellow;
      border-radius: 50%;
    }

.pacman.open {
      background: none;
      border-top: 25px solid yellow;
      border-right: 25px solid yellow;
      border-bottom: 25px solid transparent;
      border-left: 25px solid yellow;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="pacman" class="pacman"></div>
  </div>

// パックマンの要素を取得
    const pacman = document.getElementById('pacman');

// パックマンの初期位置
    let pacmanX = 0;
    let pacmanY = 0;

// 上方向に移動する関数
    function moveUp() {
      pacmanY -= 50;
      pacman.style.top = pacmanY + 'px';
    }

// 右方向に移動する関数
    function moveRight() {
      pacmanX += 50;
      pacman.style.left = pacmanX + 'px';
    }

// 下方向に移動する関数
    function moveDown() {
      pacmanY += 50;
      pacman.style.top = pacmanY + 'px';
    }

// 左方向に移動する関数
    function moveLeft() {
      pacmanX -= 50;
      pacman.style.left = pacmanX + 'px';
    }

// キーボードの矢印キー入力時の処理
    document.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowUp') {
        moveUp();
      } else if (event.key === 'ArrowRight') {
        moveRight();
      } else if (event.key === 'ArrowDown') {
        moveDown();
      } else if (event.key === 'ArrowLeft') {
        moveLeft();
      }
    });
  </script>
</body>
</html>
```