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

No:6283

2901

←

Prev Next

→

Pac-Man (chess game)
Developer User3589｜Date and time 23/7/2 1:12:33
Build time 33.631 sec｜Game capacity 2.588KB｜

Script

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

Pac-Man

このHTMLファイルをブラウザで開くと、パックマンが表示されたゲームボードが表示されます。キーボードの矢印キーを押すことでパックマンを移動させることができます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pac-Man</title>
  <style>
    #board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      height: 300px;
    }
    .cell {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      border: 1px solid black;
      font-size: 20px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <h1>Pac-Man</h1>
  <div id="board"></div>

// ゲームボードのマップ
    const board = [
      ['', '', '', '', ''],
      ['', '', '🌕', '', ''],
      ['', '🌕', '🌕', '🌕', ''],
      ['', '🌕', '', '', ''],
      ['', '', '', '', '']
    ];

// ゲームボードを表示する関数
    function render() {
      const boardElement = document.getElementById('board');
      boardElement.innerHTML = '';

for (let y = 0; y < board.length; y++) {
        for (let x = 0; x < board[y].length; x++) {
          const cell = document.createElement('div');
          cell.className = 'cell';

// パックマンの位置なら表示
          if (pacman.x === x && pacman.y === y) {
            cell.innerText = '😁';
          } else {
            cell.innerText = board[y][x];
          }

boardElement.appendChild(cell);
        }
      }
    }

// キー入力に応じてパックマンを移動する関数
    function movePacman(direction) {
      if (direction === 'ArrowUp') {
        pacman.y = Math.max(0, pacman.y - 1);
      } else if (direction === 'ArrowRight') {
        pacman.x = Math.min(board[pacman.y].length - 1, pacman.x + 1);
      } else if (direction === 'ArrowDown') {
        pacman.y = Math.min(board.length - 1, pacman.y + 1);
      } else if (direction === 'ArrowLeft') {
        pacman.x = Math.max(0, pacman.x - 1);
      }

render();
    }

// キー入力に応じてパックマンを移動するイベントリスナーを登録
    document.addEventListener('keydown', function(event) {
      movePacman(event.key);
    });

// ゲームボードの初期表示
    render();
  </script>
</body>
</html>
```