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

No:43571

Pong for mobile score on top of game use swipes to..ALL
Developer User19162｜Date and time 24/2/16 3:38:19
Build time 18.495 sec｜Game capacity 4.795KB｜

Script

Sure! Here's an example of a simple Pong game written in a single HTML file, using JavaScript and embedded within script tags. The game is playable on a smartphone and uses swipe gestures to move the player's stick, while the opponent's stick is controlled by AI. The score is displayed on top of the game using pictograms.

0 - 0

Save this code into an HTML file and open it in a web browser on your smartphone to play the Pong game. Swipe left to right or right to left to move your stick and try to score against the AI opponent. The score is displayed on top of the game using pictograms (numbers). Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #gameCanvas {
      position: relative;
      width: 100%;
      height: calc(100vh - 40px);
      background-color: black;
    }
    
    #score {
      position: fixed;
      top: 0;
      left: 0;
      padding: 10px;
      font-size: 24px;
      color: white;
    }
  </style>
</head>
<body>
  <h1 id="score">0 - 0</h1>
  <div id="gameCanvas"></div>

var opponent = {
      x: paddleGap,
      y: height / 2 - paddleHeight / 2,
      width: paddleWidth,
      height: paddleHeight,
      dy: 0
    };

// Ball
    var ball = {
      x: width / 2,
      y: height / 2,
      size: ballSize,
      dx: -ballSpeed,
      dy: ballSpeed
    };

// Event listeners for swipe gestures
    document.addEventListener('touchstart', handleTouchStart, false);
    document.addEventListener('touchmove', handleTouchMove, false);

var xTouchStart = null;

function handleTouchStart(event) {
      xTouchStart = event.touches[0].clientX;
    }

function handleTouchMove(event) {
      if (!xTouchStart) {
        return;
      }

var xTouchMove = event.touches[0].clientX;
      var xDiff = xTouchStart - xTouchMove;

if (xDiff > 0) {
        // Swipe right to left
        player.dy = -6;
      } else if (xDiff < 0) {
        // Swipe left to right
        player.dy = 6;
      }

xTouchStart = null;
    }

function update() {
      // Move the paddles
      player.y += player.dy;
      opponent.y += (ball.y - (opponent.y + opponent.height / 2)) * 0.1;

// Collisions with the walls
      if (player.y < 0) {
        player.y = 0;
      }
      if (player.y + player.height > height) {
        player.y = height - player.height;
      }
      if (opponent.y < 0) {
        opponent.y = 0;
      }
      if (opponent.y + opponent.height > height) {
        opponent.y = height - opponent.height;
      }

// Move the ball
      ball.x += ball.dx;
      ball.y += ball.dy;

// Collisions with paddles
      if (
        ball.y + ball.size >= player.y &&
        ball.y <= player.y + player.height &&
        ball.x + ball.size >= player.x) {
        ball.dx = -ballSpeed;
      }

if (
        ball.y + ball.size >= opponent.y &&
        ball.y <= opponent.y + opponent.height &&
        ball.x <= opponent.x + opponent.width) {
        ball.dx = ballSpeed;
      }

// Collisions with top and bottom walls
      if (ball.y <= 0 || ball.y + ball.size >= height) {
        ball.dy *= -1;
      }

// Score
      if (ball.x <= 0) {
        opponentScore++;
        resetBall();
      } else if (ball.x + ball.size >= width) {
        playerScore++;
        resetBall();
      }
    }

function resetBall() {
      ball.x = width / 2;
      ball.y = height / 2;
      ball.dx = -ball.dx;
      ball.dy = ballSpeed;
    }

function draw() {
      // Clear the canvas
      ctx.clearRect(0, 0, width, height);

// Draw the paddles
      ctx.fillStyle = "white";
      ctx.fillRect(player.x, player.y, player.width, player.height);
      ctx.fillRect(opponent.x, opponent.y, opponent.width, opponent.height);

// Draw the ball
      ctx.fillRect(ball.x, ball.y, ball.size, ball.size);

// Draw the score
      document.getElementById("score").innerHTML = playerScore + " - " + opponentScore;
    }

function loop() {
	  update();
	  draw();
	  requestAnimationFrame(loop);
	}

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