AI game creator

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

No:44064

←

Prev Next

→

Pac-Man
Developer User19311｜Date and time 24/2/17 3:43:49
Build time 17.332 sec｜Game capacity 4.901KB｜

Script

Sure! Here's a simple Pac-Man game implemented in a single HTML file using JavaScript. It's designed to be playable on smartphones and uses pictograms for the game elements.

To play the game, copy the above code into a text editor and save it with a .html extension (e.g., `pacman.html`). Then, open the saved file in any modern web browser on your smartphone. You can control Pac-Man's movements by swiping in the desired direction on the screen. The goal is to avoid colliding with the blue ghost. Once you are caught by the ghost, the game will display a "Game Over" message and reset. Enjoy playing Pac-Man on your smartphone!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure! Here's a simple Pac-Man game implemented in a single HTML file using JavaScript. It's designed to be playable on smartphones and uses pictograms for the game elements.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Pac-Man Game</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script>
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

const gameWidth = 400;
      const gameHeight = 400;
      const blockSize = 40;

const pacManSize = 30;
      const pacManSpeed = 5;

const ghostSize = 30;
      const ghostSpeed = 3;

let pacManX = gameWidth / 2;
      let pacManY = gameHeight / 2;
      let pacManDirection = '';
      let pacManMouthOpen = true;

let ghostX = Math.random() * gameWidth;
      let ghostY = Math.random() * gameHeight;

function drawPacMan() {
        ctx.beginPath();
        ctx.arc(pacManX, pacManY, pacManSize, 0.2 * Math.PI, 1.8 * Math.PI);

if (pacManMouthOpen) {
          ctx.lineTo(pacManX, pacManY);
        } else {
          ctx.lineTo(
            pacManX + pacManSize * Math.cos(0.8 * Math.PI),
            pacManY + pacManSize * Math.sin(0.8 * Math.PI)
          );
        }

ctx.fillStyle = 'yellow';
        ctx.fill();
        ctx.closePath();
      }

function drawGhost() {
        ctx.beginPath();
        ctx.arc(ghostX, ghostY, ghostSize, 0, 2 * Math.PI);
        ctx.fillStyle = 'blue';
        ctx.fill();
        ctx.closePath();
      }

function clearCanvas() {
        ctx.clearRect(0, 0, gameWidth, gameHeight);
      }

function moveGhost() {
        const directionX = Math.sign(pacManX - ghostX);
        const directionY = Math.sign(pacManY - ghostY);

if (directionX !== 0) {
          if (
            directionX < 0 &&
            Math.abs(pacManX - ghostX) > blockSize &&
            ghostX > 0
          ) {
            ghostX -= ghostSpeed;
          } else if (
            directionX > 0 &&
            Math.abs(pacManX - ghostX) > blockSize &&
            ghostX < gameWidth
          ) {
            ghostX += ghostSpeed;
          }
        }

if (directionY !== 0) {
          if (
            directionY < 0 &&
            Math.abs(pacManY - ghostY) > blockSize &&
            ghostY > 0
          ) {
            ghostY -= ghostSpeed;
          } else if (
            directionY > 0 &&
            Math.abs(pacManY - ghostY) > blockSize &&
            ghostY < gameHeight
          ) {
            ghostY += ghostSpeed;
          }
        }
      }

function detectCollision() {
        const distance = Math.sqrt(
          Math.pow(pacManX - ghostX, 2) + Math.pow(pacManY - ghostY, 2)
        );
        if (distance <= pacManSize + ghostSize) {
          alert('Game Over!');
          location.reload();
        }
      }

function updateGame() {
        clearCanvas();
        movePacMan();
        moveGhost();
        detectCollision();
        drawPacMan();
        drawGhost();
        requestAnimationFrame(updateGame);
      }

function handleTouchEvent(event) {
        event.preventDefault();
        pacManDirection = '';

const touchX = event.touches[0].clientX;
        const touchY = event.touches[0].clientY;

if (touchX < pacManX) {
          pacManDirection = 'left';
        } else if (touchX > pacManX) {
          pacManDirection = 'right';
        }

if (touchY < pacManY) {
          pacManDirection = 'up';
        } else if (touchY > pacManY) {
          pacManDirection = 'down';
        }
      }

canvas.addEventListener('touchstart', handleTouchEvent);
      canvas.addEventListener('touchmove', handleTouchEvent);

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

Enjoy playing Pac-Man on your smartphone!