Pong for mobile score on top of game use buttons to move your stick, opponent's stick is controlled by AI's game

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

No:43572

←

Prev Next

→

Pong for mobile score on top of game use buttons t..ALL
Developer User19162｜Date and time 24/2/16 3:39:49
Build time 15.093 sec｜Game capacity 3.846KB｜

Script

Sure! Here's an example of a simple Pong game implemented as a single HTML file using JavaScript, enclosed in script tags. The game can be played on a smartphone using buttons to move the player's stick, while the opponent's stick is controlled by AI.

To play the game, you can copy the above code into a new HTML file and open it in a web browser on your smartphone. The game uses the up and down arrow buttons to move the player's stick up and down on the screen. The opponent's stick is controlled by an AI that follows the movement of the ball. The score is displayed at the top of the game canvas. Have fun playing Pong!

←

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>
</head>
<body>
  <canvas id="pongCanvas" width="640" height="480"></canvas>
  
  <script>
    var canvas = document.getElementById("pongCanvas");
    var context = canvas.getContext("2d");
    
    // Game variables
    var player = {
      x: 10,
      y: canvas.height / 2 - 40,
      width: 10,
      height: 80,
      dy: 6
    };
    
    var opponent = {
      x: canvas.width - 20,
      y: canvas.height / 2 - 40,
      width: 10,
      height: 80,
      dy: 3
    };
    
    var ball = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 10,
      speed: 4,
      dx: 4,
      dy: 4
    };
    
    var playerScore = 0;
    var opponentScore = 0;
    
    // Handle user input (buttons)
    document.addEventListener("keydown", function(event) {
      if (event.keyCode === 38 && player.y > 0) {
        player.y -= player.dy;
      }
      else if (event.keyCode === 40 && player.y + player.height < canvas.height) {
        player.y += player.dy;
      }
    });
    
    // Game loop
    function gameLoop() {
      update();
      draw();
      requestAnimationFrame(gameLoop);
    }
    
    // Update game state
    function update() {
      ball.x += ball.dx;
      ball.y += ball.dy;
      
      var paddleCollision = function(ball, paddle) {
        return ball.x < paddle.x + paddle.width &&
               ball.y + ball.radius > paddle.y &&
               ball.y - ball.radius < paddle.y + paddle.height;
      };
      
      if (paddleCollision(ball, player)) {
        ball.dx = -ball.dx;
      }
      
      if (paddleCollision(ball, opponent)) {
        ball.dx = -ball.dx;
      }
      
      if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
        ball.dy = -ball.dy;
      }
      
      if (ball.x - ball.radius < 0) {
        opponentScore++;
        resetBall();
      }
      
      if (ball.x + ball.radius > canvas.width) {
        playerScore++;
        resetBall();
      }
      
      opponent.y += (ball.y - (opponent.y + opponent.height / 2)) * 0.1;
    }
    
    // Reset ball position
    function resetBall() {
      ball.x = canvas.width / 2;
      ball.y = canvas.height / 2;
      ball.dx = Math.sign(ball.dx) * ball.speed;
      ball.dy = Math.sign(ball.dy) * ball.speed;
    }
    
    // Draw game objects
    function draw() {
      // Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw player paddle
      context.fillStyle = "#000";
      context.fillRect(player.x, player.y, player.width, player.height);
      
      // Draw opponent paddle
      context.fillStyle = "#000";
      context.fillRect(opponent.x, opponent.y, opponent.width, opponent.height);
      
      // Draw ball
      context.beginPath();
      context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
      context.fillStyle = "#000";
      context.fill();
      
      // Draw scores
      context.font = "20px Arial";
      context.fillText("Player: " + playerScore, 20, 40);
      context.fillText("Opponent: " + opponentScore, canvas.width - 150, 40);
    }
    
    // Start the game
    gameLoop();
  </script>
</body>
</html>
```