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

No:20172

←

Prev Next

→

パックマン
Developer User8975｜Date and time 23/10/8 17:36:20
Build time 17.482 sec｜Game capacity 2.521KB｜

Script

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

Pacman

このHTMLファイルは、Pacmanを実装しており、スマホ操作にも対応しています。キーボードの矢印キーでパックマンを操作することができます。パックマンの位置は常に`pacmanPosition`で管理され、キー入力に応じて位置が変更されます。ゲームボードは`game-board`というidのdiv要素で表現され、dotというクラスのdiv要素でドット（食べ物）が表示されます。パックマンは絵文字の"👻"で表現されます。以上が、パックマンのゲームを含むHTMLファイルの例です。

←

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>Pacman</title>
    <style>
      #game-board {
        display: flex;
        flex-wrap: wrap;
        width: 300px;
        height: 300px;
        background-color: black;
      }
      .dot {
        width: 30px;
        height: 30px;
        background-color: yellow;
        border-radius: 50%;
      }
      .empty {
        width: 30px;
        height: 30px;
        background-color: black;
      }
      #pacman {
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Pacman</h1>
    <div id="game-board"></div>

function createGameBoard() {
        for (let i = 0; i < width ** 2; i++) {
          const dot = document.createElement('div');
          dot.className = 'dot';
          dots.push(dot);
          gameBoard.appendChild(dot);
        }
        dots[pacmanPosition].innerHTML = '👻';
      }

function handleKeyDown(event) {
        const key = event.key;
        dots[pacmanPosition].innerHTML = '';

if (key === 'ArrowLeft' && pacmanPosition % width !== 0) {
          pacmanPosition--;
        } else if (key === 'ArrowRight' && pacmanPosition % width !== width - 1) {
          pacmanPosition++;
        } else if (key === 'ArrowUp' && pacmanPosition >= width) {
          pacmanPosition -= width;
        } else if (key === 'ArrowDown' && pacmanPosition < width * (width - 1)) {
          pacmanPosition += width;
        }

dots[pacmanPosition].innerHTML = '👻';
      }

document.addEventListener('keydown', handleKeyDown);

createGameBoard();
    </script>
  </body>
</html>
```

以上が、パックマンのゲームを含むHTMLファイルの例です。