AI game creator

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

No:24801

←

Prev Next

→

I want a pong game
Developer User11869｜Date and time 23/11/12 8:30:50
Build time 159.471 sec｜Game capacity 5.357KB｜

Script

Sure! Here's an example of a simple Pong game implemented as a single HTML file with JavaScript and enclosed in script tags. The game assumes smartphone operation and uses pictograms as much as possible.

To play the game, simply copy the provided code into a new HTML file (e.g., `pong.html`) and open it in a web browser. The game canvas will be displayed, and you can move the paddle by moving your mouse/finger. The objective is to bounce the ball off the paddles and score points by preventing the opponent from catching the ball. The first player to score the winning number of points (defined by `winningScore` variable) wins the game. Clicking/tapping on the canvas resets the game if a winner is determined. Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pong Game</title>
  <style>
    canvas { background-color: #000000; display: block; margin: 0 auto; }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Game variables
    let canvas, canvasContext;
    let ballX = 50, ballY = 50;
    let ballSpeedX = 10, ballSpeedY = 4;
    let paddle1Y = 150, paddle2Y = 150;
    const paddleHeight = 100, paddleWidth = 10;
    let player1Score = 0, player2Score = 0;
    const winningScore = 3;
    let showingWinScreen = false;

function calculateMousePos(event) {
      const rect = canvas.getBoundingClientRect();
      const root = document.documentElement;
      const mouseX = event.clientX - rect.left - root.scrollLeft;
      const mouseY = event.clientY - rect.top - root.scrollTop;
      return {
        x: mouseX,
        y: mouseY
      };
    }

function handleMouseClick(event) {
      if (showingWinScreen) {
        player1Score = 0;
        player2Score = 0;
        showingWinScreen = false;
      }
    }

window.onload = function() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');

const framesPerSecond = 30;
      setInterval(() => {
        moveEverything();
        drawEverything();
      }, 1000 / framesPerSecond);

canvas.addEventListener('mousemove', (event) => {
        const mousePos = calculateMousePos(event);
        paddle1Y = mousePos.y - paddleHeight / 2;
      });

canvas.addEventListener('mousedown', handleMouseClick);
    };

function ballReset() {
      if (player1Score >= winningScore || player2Score >= winningScore) {
        showingWinScreen = true;
      }

ballSpeedX = -ballSpeedX;
      ballX = canvas.width / 2;
      ballY = canvas.height / 2;
    }

function moveEverything() {
      if (showingWinScreen) {
        return;
      }

computerMovement();

ballX += ballSpeedX;
      ballY += ballSpeedY;

if (ballX < 0) {
        if (ballY > paddle1Y && ballY < paddle1Y + paddleHeight) {
          ballSpeedX = -ballSpeedX;

const deltaY = ballY - (paddle1Y + paddleHeight / 2);
          ballSpeedY = deltaY * 0.35;
        } else {
          player2Score++;
          ballReset();
        }
      }

if (ballX > canvas.width) {
        if (ballY > paddle2Y && ballY < paddle2Y + paddleHeight) {
          ballSpeedX = -ballSpeedX;

const deltaY = ballY - (paddle2Y + paddleHeight / 2);
          ballSpeedY = deltaY * 0.35;
        } else {
          player1Score++;
          ballReset();
        }
      }

if (ballY < 0) {
        ballSpeedY = -ballSpeedY;
      }

if (ballY > canvas.height) {
        ballSpeedY = -ballSpeedY;
      }
    }

function drawNet() {
      for (let i = 0; i < canvas.height; i += 40) {
        drawRect(canvas.width / 2 - 1, i, 2, 20, 'white');
      }
    }

function drawEverything() {
      // Clear the canvas
      drawRect(0, 0, canvas.width, canvas.height, 'black');

if (showingWinScreen) {
        canvasContext.fillStyle = 'white';

if (player1Score >= winningScore) {
          canvasContext.fillText('You Win!', 190, 200);
        } else if (player2Score >= winningScore) {
          canvasContext.fillText('Computer Wins!', 170, 200);
        }

canvasContext.fillText('Click to continue', 175, 500);
        return;
      }

drawNet();

// Paddles
      drawRect(0, paddle1Y, paddleWidth, paddleHeight, 'white');
      drawRect(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight, 'white');

// Ball
      drawCircle(ballX, ballY, 10, 'white');

// Scores
      canvasContext.fillText(player1Score, 100, 100);
      canvasContext.fillText(player2Score, canvas.width - 100, 100);
    }

function drawCircle(centerX, centerY, radius, color) {
      canvasContext.fillStyle = color;
      canvasContext.beginPath();
      canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
      canvasContext.fill();
    }

function drawRect(leftX, topY, width, height, color) {
      canvasContext.fillStyle = color;
      canvasContext.fillRect(leftX, topY, width, height);
    }
  </script>
</body>
</html>
```