AI game creator

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

No:43237

←

Prev Next

→

Ping pong
Developer User19158｜Date and time 24/2/15 3:28:05
Build time 11.457 sec｜Game capacity 3.08KB｜

Script

Sure! Here's a simple ping pong game implemented as a single HTML file:

This ping pong game allows you to control a paddle using the arrow keys on your smartphone. The goal is to bounce the ball off the paddle and prevent it from hitting the bottom of the canvas. If the ball hits the bottom, it's game over.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's a simple ping pong game implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Ping Pong Game</title>
  <style>
    #gameCanvas {
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      display: block;
      margin: 0 auto;
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>
  
  <script>
    // Game initialization
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");

var ball = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 10,
      dx: 2,
      dy: -2
    };

var paddle = {
      x: canvas.width / 2 - 40,
      y: canvas.height - 20,
      width: 80,
      height: 10,
      dx: 6
    };

var rightPressed = false;
    var leftPressed = false;

function keyDownHandler(event) {
      if (event.keyCode === 39) {
        rightPressed = true;
      } else if (event.keyCode === 37) {
        leftPressed = true;
      }
    }

function keyUpHandler(event) {
      if (event.keyCode === 39) {
        rightPressed = false;
      } else if (event.keyCode === 37) {
        leftPressed = false;
      }
    }

function drawBall() {
      context.beginPath();
      context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
      context.fillStyle = "#0095DD";
      context.fill();
      context.closePath();
    }

function drawPaddle() {
      context.beginPath();
      context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
      context.fillStyle = "#0095DD";
      context.fill();
      context.closePath();
    }

document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

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