Make a colorful full ping pong game that you can control with one off them and score's game

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

No:19764

←

Prev Next

→

Make a colorful full ping pong game that you can c..ALL
Developer User8801｜Date and time 23/10/6 19:12:34
Build time 21.721 sec｜Game capacity 3.099KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  overflow: hidden;
  background-color: #000;
}

canvas {
  display: block;
}
</style>
</head>
<body>
<canvas id="pingPongCanvas" width="800" height="400"></canvas>

// Paddle properties
var paddleWidth = 10;
var paddleHeight = 80;
var leftPaddleY = canvas.height / 2 - paddleHeight / 2;
var rightPaddleY = canvas.height / 2 - paddleHeight / 2;
var paddleSpeed = 8;

// Ball properties
var ballSize = 10;
var ballSpeed = 5;

// Initialize the ball position
var ballX = canvas.width / 2;
var ballY = canvas.height / 2;
var ballSpeedX = ballSpeed;
var ballSpeedY = ballSpeed;

var leftScore = 0;
var rightScore = 0;

// Listen to touch events on smartphones
canvas.addEventListener("touchmove", handleTouchMove);

function handleTouchMove(evt) {
  var touch = evt.touches[0];
  var touchY = touch.clientY - (canvas.offsetTop + paddleHeight / 2);

if (touchY > 0 && touchY < canvas.height - paddleHeight) {
    leftPaddleY = touchY;
  }
}

// Draw the paddles
function drawPaddles() {
  context.fillStyle = "#FFF"; // White color
  context.fillRect(0, leftPaddleY, paddleWidth, paddleHeight); // Left paddle
  context.fillRect(canvas.width - paddleWidth, rightPaddleY, paddleWidth, paddleHeight); // Right paddle
}

// Draw the ball
function drawBall() {
  context.fillStyle = "#FFF"; // White color
  context.beginPath();
  context.arc(ballX, ballY, ballSize, 0, Math.PI * 2, false);
  context.closePath();
  context.fill();
}

// Move the ball
function moveBall() {
  ballX += ballSpeedX;
  ballY += ballSpeedY;

// Ball collision with paddles
  if (ballX - ballSize < paddleWidth && ballY + ballSize > leftPaddleY && ballY - ballSize < leftPaddleY + paddleHeight) {
    ballSpeedX = -ballSpeedX;
  } else if (ballX + ballSize > canvas.width - paddleWidth && ballY + ballSize > rightPaddleY && ballY - ballSize < rightPaddleY + paddleHeight) {
    ballSpeedX = -ballSpeedX;
  }

// Ball collision with walls
  if (ballY - ballSize < 0 || ballY + ballSize > canvas.height) {
    ballSpeedY = -ballSpeedY;
  }

// Ball going out of bounds
  if (ballX - ballSize < 0) {
    rightScore++;
    resetBall();
  } else if (ballX + ballSize > canvas.width) {
    leftScore++;
    resetBall();
  }
}

// Reset the ball position
function resetBall() {
  ballX = canvas.width / 2;
  ballY = canvas.height / 2;
  ballSpeedX = -ballSpeedX;
  ballSpeedY = ballSpeedY < 0 ? -ballSpeed : ballSpeed;
}

// Update the game state
function update() {
  moveBall();
  draw();

requestAnimationFrame(update);
}

// Draw the game elements
function draw() {
  // Clear the canvas
  context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the paddles and ball
  drawPaddles();
  drawBall();

// Draw the scores
  context.font = "30px Arial";
  context.fillStyle = "#FFF";
  context.fillText(leftScore, canvas.width / 4, 50);
  context.fillText(rightScore, canvas.width / 4 * 3, 50);
}

update();
</script>
</body>
</html>