Table tanis slow bol speed's game

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

No:19373

←

Prev Next

→

Table tanis slow bol speed
Developer User8579｜Date and time 23/10/3 10:13:55
Build time 17.494 sec｜Game capacity 3.752KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Table Tennis Game</title>
</head>
<body>
  
  <canvas id="gameCanvas" width="600" height="400"></canvas>

// Set up game variables
    var player1 = { x: 10, y: canvas.height / 2, width: 10, height: 80 };
    var player2 = { x: canvas.width - 20, y: canvas.height / 2, width: 10, height: 80 };
    var ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 5, speedX: 3, speedY: 3 };
    var tableCenterX = canvas.width / 2;

// Set up event listener for touchscreen controls
    canvas.addEventListener("touchmove", handleTouchMove, false);

function handleTouchMove(e) {
      var touches = e.changedTouches;

for (var i = 0; i < touches.length; i++) {
        var touch = touches[i];
        var touchX = touch.clientX - canvas.offsetLeft;
        var touchY = touch.clientY - canvas.offsetTop;

if (touchX < tableCenterX && touchX >= player1.x && touchY >= player1.y && touchY <= player1.y + player1.height) {
          player1.y = touchY - player1.height / 2;
        } else if (touchX >= tableCenterX && touchX <= player2.x && touchY >= player2.y && touchY <= player2.y + player2.height) {
          player2.y = touchY - player2.height / 2;
        }
      }
    }

// Function to draw the player1 paddle
    function drawPlayer1() {
      context.fillStyle = "#FF0000";
      context.fillRect(player1.x, player1.y, player1.width, player1.height);
    }

// Function to draw the player2 paddle
    function drawPlayer2() {
      context.fillStyle = "#0000FF";
      context.fillRect(player2.x, player2.y, player2.width, player2.height);
    }

// Function to draw the ball
    function drawBall() {
      context.beginPath();
      context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
      context.fillStyle = "#000000";
      context.fill();
      context.closePath();
    }

// Function to update game objects and perform collision detection
    function updateGame() {
      // Move the ball
      ball.x += ball.speedX;
      ball.y += ball.speedY;

// Check for collision with player1 paddle
      if (ball.x - ball.radius < player1.x + player1.width && ball.y > player1.y && ball.y < player1.y + player1.height) {
        ball.speedX = -ball.speedX;
      }

// Check for collision with player2 paddle
      if (ball.x + ball.radius > player2.x && ball.y > player2.y && ball.y < player2.y + player2.height) {
        ball.speedX = -ball.speedX;
      }

// Check for collision with top or bottom wall
      if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
        ball.speedY = -ball.speedY;
      }

// Check for scoring points
      if (ball.x - ball.radius < 0) {
        // Player 2 scores a point
        resetBall();
      } else if (ball.x + ball.radius > canvas.width) {
        // Player 1 scores a point
        resetBall();
      }
    }

// Function to reset the ball position after scoring a point
    function resetBall() {
      ball.x = canvas.width / 2;
      ball.y = canvas.height / 2;
      ball.speedX = -ball.speedX;
      ball.speedY = Math.random() < 0.5 ? -3 : 3;
    }

// Function to redraw the game canvas
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawPlayer1();
      drawPlayer2();
      drawBall();
    }

// Function to update and redraw the game canvas
    function gameLoop() {
      updateGame();
      draw();

requestAnimationFrame(gameLoop);
    }

// Start the game loop
    gameLoop();
  </script>
</body>
</html>