AI game creator

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

No:50617

130

←

Prev Next

→

Ping pong game
Developer User21371｜Date and time 24/3/9 9:30:15
Build time 9.474 sec｜Game capacity 2.378KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
 
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
 
    let ballX = canvas.width/2;
    let ballY = canvas.height/2;
    let ballSpeedX = 5;
    let ballSpeedY = 4;
    const ballSize = 10;
 
    let paddle1Y = canvas.height/2 - 50;
    let paddle2Y = canvas.height/2 - 50;
    const paddleWidth = 10;
    const paddleHeight = 100;
    const paddleSpeed = 5;
 
    function update() {
      ballX += ballSpeedX;
      ballY += ballSpeedY;
      if(ballY < 0 || ballY > canvas.height) {
        ballSpeedY *= -1;
      }
      if(ballX < 0) {
        ballSpeedX = 5;
        ballSpeedY = 4;
        ballX = canvas.width/2;
        ballY = canvas.height/2;
      }
      if(ballX > canvas.width) {
        ballSpeedX = -5;
        ballSpeedY = -4;
        ballX = canvas.width/2;
        ballY = canvas.height/2;
      }
 
      if(ballX < paddleWidth && ballY > paddle1Y && ballY < paddle1Y + paddleHeight
        || ballX > canvas.width - paddleWidth && ballY > paddle2Y && ballY < paddle2Y + paddleHeight) {
        ballSpeedX *= -1;
      }
    }
 
    function draw() {
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
 
      ctx.fillStyle = "white";
      ctx.fillRect(paddleWidth, paddle1Y, paddleWidth, paddleHeight);
      ctx.fillRect(canvas.width - 2 * paddleWidth, paddle2Y, paddleWidth, paddleHeight);
 
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballSize, 0, Math.PI*2);
      ctx.fill();
    }
 
    function keyDownHandler(event) {
      switch(event.keyCode) {
        case 38:
          if(paddle2Y > 0) {
            paddle2Y -= paddleSpeed;
          }
          break;
        case 40:
          if(paddle2Y + paddleHeight < canvas.height) {
            paddle2Y += paddleSpeed;
          }
          break;
        case 87:
          if(paddle1Y > 0) {
            paddle1Y -= paddleSpeed;
          }
          break;
        case 83:
          if(paddle1Y + paddleHeight < canvas.height) {
            paddle1Y += paddleSpeed;
          }
          break;
      }
    }
 
    function gameLoop() {
      update();
      draw();
    }
 
    document.addEventListener("keydown", keyDownHandler);
    setInterval(gameLoop, 1000/60);
  </script>
</body>
</html>