Pong with up and down controls with score but no gameover screen's game

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

No:17636

←

Prev Next

→

Pong with up and down controls with score but no g..ALL
Developer User7745｜Date and time 23/9/24 4:33:15
Build time 33.414 sec｜Game capacity 3.6KB｜

Script

Sure! Here's an example of a simplified Pong game that meets the given requirements. It uses SVG pictograms to represent the paddles and the ball. The game starts automatically and keeps track of the score without a gameover screen. The controls are designed for smartphone operation, with touch events used to move the paddles up and down.

To play the game, you can copy the above code into a single HTML file and open it in a web browser or an HTML viewer on your smartphone. The paddles can be controlled by touching and dragging anywhere above or below the center of the screen. The score is displayed at the top. Please note that this is a basic implementation of Pong and may not have all the features of a fully polished game.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      svg {
        background-color: #000;
        width: 100vw;
        height: 100vh;
      }

#paddle1,
      #paddle2 {
        width: 10px;
        height: 80px;
        fill: #fff;
      }

#ball {
        cx: 395;
        cy: 295;
        r: 5;
        fill: #fff;
      }

#score {
        fill: #fff;
        font-size: 24px;
        text-anchor: middle;
      }
    </style>
  </head>
  <body>
    <script>
      var paddle1Y = 250; // Initial position of paddle 1
      var paddle2Y = 250; // Initial position of paddle 2
      var ballX = 395; // Initial position of the ball on the X-axis
      var ballY = 295; // Initial position of the ball on the Y-axis
      var ballSpeedY = 5; // Initial speed of the ball
      var score1 = 0; // Score for player 1
      var score2 = 0; // Score for player 2

// Update the positions of paddles and the ball
      function move() {
        // Move the ball
        ballX += ballSpeedY;
        ballY += ballSpeedY;

// Check if the ball hits the top or bottom walls
        if (ballY < 5 || ballY > 595) {
          ballSpeedY = -ballSpeedY;
        }

// Check if the ball hits the paddles
        if (
          (ballX <= 20 && ballY >= paddle1Y && ballY <= paddle1Y + 80) ||
          (ballX >= 770 && ballY >= paddle2Y && ballY <= paddle2Y + 80)
        ) {
          ballSpeedY = -ballSpeedY;
        }

// Check if the ball goes out-of-bounds
        if (ballX < 5) {
          score2++;
          reset();
        } else if (ballX > 795) {
          score1++;
          reset();
        }

// Move the paddles based on touch events
        document.addEventListener("touchmove", function (event) {
          event.preventDefault(); // Prevent scrolling
          var touchY = event.touches[0].clientY;
          if (touchY < 400) {
            paddle1Y = touchY - 40;
          } else {
            paddle2Y = touchY - 40;
          }
        });

// Update the SVG elements
        document.getElementById("paddle1").setAttribute("y", paddle1Y);
        document.getElementById("paddle2").setAttribute("y", paddle2Y);
        document.getElementById("ball").setAttribute("cx", ballX);
        document.getElementById("ball").setAttribute("cy", ballY);
        document.getElementById("score").textContent = score1 + " - " + score2;

requestAnimationFrame(move); // Request for next frame
      }

// Reset the ball position after scoring
      function reset() {
        ballX = 395;
        ballY = 295;
      }

// Start the game
      move();
    </script>

To play the game, you can copy the above code into a single HTML file and open it in a web browser or an HTML viewer on your smartphone. The paddles can be controlled by touching and dragging anywhere above or below the center of the screen. The score is displayed at the top.

Please note that this is a basic implementation of Pong and may not have all the features of a fully polished game.