Pacman With ghost and Pong's game

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

No:17304

←

Prev Next

→

Pacman With ghost and Pong
Developer User7638｜Date and time 23/9/23 3:58:53
Build time 43.045 sec｜Game capacity 3.825KB｜

Script

Sure! Here's a simple implementation of a game combining elements of Pacman and Pong, using JavaScript and pictograms. The game can be played on a smartphone.

You can copy the above code and save it in a single HTML file. Open that file in a web browser on a smartphone, and you will be able to play the game! The game combines elements of Pacman (with the paddle acting as the player's character) and Pong (bouncing the ball off the paddle). Enjoy playing the game!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of a game combining elements of Pacman and Pong, using JavaScript and pictograms. The game can be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Pacman Pong Game</title>
  <style>
    body {
      background-color: black;
      margin: 0;
      overflow: hidden;
    }
    
    canvas {
      border: 2px solid white;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Game variables
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");
    const paddleWidth = 80;
    const paddleHeight = 10;
    let paddleX = canvas.width / 2 - paddleWidth / 2;
    let direction = 0; // -1 for left, 1 for right
    const ballRadius = 10;
    let ballX = canvas.width / 2;
    let ballY = canvas.height - paddleHeight - ballRadius - 1;
    let ballDX = 3; // Ball's horizontal velocity
    let ballDY = -3; // Ball's vertical velocity
    let score = 0;

// Pictogram icons
    const pacmanIcon = "👻";
    const ghostIcon = "👻";
    
    // Event listeners for mobile controls
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

// Move paddle based on key press event
    function keyDownHandler(event) {
      if (event.key === "ArrowLeft") {
        direction = -1;
      } else if (event.key === "ArrowRight") {
        direction = 1;
      }
    }

// Stop paddle movement when key is released
    function keyUpHandler(event) {
      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
        direction = 0;
      }
    }

// Update game logic
    function update() {
      // Move the paddle
      paddleX += direction * 8;
      if (paddleX < 0) {
        paddleX = 0;
      }
      if (paddleX + paddleWidth > canvas.width) {
        paddleX = canvas.width - paddleWidth;
      }

// Move the ball
      ballX += ballDX;
      ballY += ballDY;

// Bounce the ball off walls
      if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
        ballDX = -ballDX;
      }
      if (ballY - ballRadius < 0) {
        ballDY = -ballDY;
      }

// Handle paddle-ball collision
      if (
        ballY + ballRadius > canvas.height - paddleHeight &&
        ballX >= paddleX &&
        ballX <= paddleX + paddleWidth
      ) {
        ballDY = -ballDY;
        score++;
      }

// Game over condition
      if (ballY + ballRadius > canvas.height) {
        alert("Game Over! Final Score: " + score);
        document.location.reload();
      }
    }

// Render game objects
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw paddle
      context.fillStyle = "white";
      context.fillRect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);

// Draw ball
      context.beginPath();
      context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      context.fillStyle = "white";
      context.fill();
      context.closePath();

// Draw score
      context.font = "16px Arial";
      context.fillStyle = "white";
      context.fillText("Score: " + score, 8, 20);
    }

// Game loop
    function gameLoop() {
      update();
      draw();
      requestAnimationFrame(gameLoop);
    }

// Start the game
    gameLoop();

</script>
</body>
</html>
```