Make a completely playable game of pong's game

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

No:35946

←

Prev Next

→

Make a completely playable game of pong
Developer User16702｜Date and time 24/1/16 5:12:58
Build time 14.161 sec｜Game capacity 3.362KB｜

Script

Sure! Here's a simple implementation of the classic game Pong as a single HTML file using JavaScript:

This implementation allows you to control the player paddle using the arrow keys (up and down) and control the computer paddle using the 'W' and 'S' keys. The ball interacts with the paddles and the walls, changing direction when collided. Note: Since pictograms weren't specified, the game uses simple colored rectangles for the paddles and a colored circle (ball) using HTML canvas rendering. You can customize the colors and styles as per your preference.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the classic game Pong as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pong Game</title>
  <style>
    canvas {
      background: #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="pong" width="800" height="400"></canvas>
  <script>
    const canvas = document.getElementById("pong");
    const context = canvas.getContext("2d");

// Create paddles
    const paddleWidth = 10;
    const paddleHeight = 100;

const player = {
      x: 0,
      y: canvas.height / 2 - paddleHeight / 2,
      width: paddleWidth,
      height: paddleHeight,
      color: "#8D8D8D",
      dy: 10,
    };

const computer = {
      x: canvas.width - paddleWidth,
      y: canvas.height / 2 - paddleHeight / 2,
      width: paddleWidth,
      height: paddleHeight,
      color: "#8D8D8D",
      dy: 4,
    };
    
    // Create ball
    const ball = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 10,
      speed: 4,
      dx: 4,
      dy: 4,
      color: "#8D8D8D",
    };

// Move paddles
    function movePaddle(paddle, upKey, downKey) {
      document.addEventListener("keydown", function(event) {
        switch (event.keyCode) {
          case upKey:
            paddle.y -= paddle.dy;
            break;
          case downKey:
            paddle.y += paddle.dy;
            break;
        }
      });
    }

// Update canvas
    function update() {
      requestAnimationFrame(update);
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw paddles
      context.fillStyle = player.color;
      context.fillRect(player.x, player.y, player.width, player.height);

context.fillStyle = computer.color;
      context.fillRect(computer.x, computer.y, computer.width, computer.height);

// Draw ball
      context.fillStyle = ball.color;
      context.beginPath();
      context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
      context.closePath();
      context.fill();

// Move players
      movePaddle(player, 38, 40); // Up arrow, Down arrow
      movePaddle(computer, 87, 83); // W key, S key

// Move ball
      ball.x += ball.dx;
      ball.y += ball.dy;

// Collision detection - top/bottom walls
      if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
        ball.dy *= -1;
      }

// Collision detection - paddles
      function intersectRect(rect1, rect2) {
        return (
          rect1.x < rect2.x + rect2.width &&
          rect1.x + rect1.width > rect2.x &&
          rect1.y < rect2.y + rect2.height &&
          rect1.y + rect1.height > rect2.y
        );
      }

if (intersectRect(ball, player) || intersectRect(ball, computer)) {
        ball.dx *= -1;
      }

}

update(); // Start the game
  </script>
</body>
</html>
```

Note: Since pictograms weren't specified, the game uses simple colored rectangles for the paddles and a colored circle (ball) using HTML canvas rendering. You can customize the colors and styles as per your preference.