AI game creator

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

No:40398

←

Prev Next

→

Pong
Developer User17003｜Date and time 24/2/2 11:06:06
Build time 12.441 sec｜Game capacity 3.391KB｜

Script

Sure! Here's a simple implementation of Pong as a single HTML file, using JavaScript and enclosed in script tags. The game can be played on a smartphone and uses pictograms for the visuals. Please note that this is a basic implementation and can be further enhanced with additional features, controls, and styling.

To play the game, simply copy and paste the code into an HTML file, save it, and open it in a web browser on your smartphone. The game should start automatically, and you can control the paddle's movement by touching and dragging on the screen. The objective is to prevent the ball from hitting the right side of the canvas by moving the paddle with your finger. If the ball hits the right side, a "Game Over" alert will be displayed, and the game can be restarted by reloading the page.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: 2px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="pong" width="400" height="400"></canvas>

// Paddle and ball variables
      const paddleWidth = 10;
      const paddleHeight = 60;
      const ballRadius = 8;
      let paddleY = canvas.height / 2 - paddleHeight / 2;
      let ballX = canvas.width / 2;
      let ballY = canvas.height / 2;
      let ballSpeedX = 3;
      let ballSpeedY = 3;

// Update the paddle position based on touch events
      function updatePaddlePosition(event) {
        const touch = event.touches[0];
        paddleY = touch.clientY - canvas.getBoundingClientRect().top - paddleHeight / 2;
      }

// Function to draw the paddle
      function drawPaddle() {
        context.fillStyle = "black";
        context.fillRect(10, paddleY, paddleWidth, paddleHeight);
      }

// Function to draw the ball
      function drawBall() {
        context.beginPath();
        context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2, false);
        context.fillStyle = "black";
        context.fill();
        context.closePath();
      }

// Update the ball position and check collisions
      function updateBall() {
        ballX += ballSpeedX;
        ballY += ballSpeedY;

if (ballY + ballRadius > canvas.height || ballY - ballRadius < 0) {
          ballSpeedY = -ballSpeedY;
        }

const paddleTop = paddleY;
        const paddleBottom = paddleY + paddleHeight;
        const paddleLeft = paddleWidth;
        const ballRight = ballX + ballRadius;

if (ballY + ballRadius > paddleTop && ballY - ballRadius < paddleBottom && ballX - ballRadius < paddleLeft) {
          ballSpeedX = -ballSpeedX;
        }

if (ballRight > canvas.width) {
          // Game over scenario
          alert("Game Over");
          document.location.reload();
        }
      }

// Clear the canvas and redraw the game elements
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawPaddle();
        drawBall();
        updateBall();
      }

// Add event listener for touch events
      canvas.addEventListener("touchmove", updatePaddlePosition);

// Render the game every 10ms
      setInterval(draw, 10);
    </script>
  </body>
</html>
```