AI game creator

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

No:16670

102

←

Prev Next

→

Simple tennis game
Developer User7420｜Date and time 23/9/20 2:21:06
Build time 39.987 sec｜Game capacity 3.505KB｜

Script

Sure! Here's a simple tennis game implemented as a single HTML file using JavaScript and enclosed in script tags. The game is designed for smartphone operation and uses pictograms for a better visual experience.

To play the game, simply copy the code into an HTML file and open it in a web browser, or you can try running it in an online HTML/CSS/JS editor like CodePen or JSFiddle. Use the left and right arrow keys to move the paddle and hit the ball with it. The game ends when the ball goes beyond the bottom of the game area, and an alert will be displayed saying "Game Over".

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Simple Tennis Game</title>
  <style>
    #game {
      position: relative;
      width: 100%;
      height: 400px;
      background-color: #000;
      overflow: hidden;
    }
    #ball {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #fff;
      border-radius: 50%;
    }
    #paddle {
      position: absolute;
      width: 100px;
      height: 20px;
      background-color: #fff;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="ball"></div>
    <div id="paddle"></div>
  </div>

var ballSize = 20;
    var ballX = gameWidth / 2 - ballSize / 2;
    var ballY = gameHeight / 2 - ballSize / 2;
    var ballSpeedX = 3;
    var ballSpeedY = 3;

var paddleWidth = 100;
    var paddleHeight = 20;
    var paddleX = gameWidth / 2 - paddleWidth / 2;
    var paddleY = gameHeight - paddleHeight - 10;

var leftPressed = false;
    var rightPressed = false;

function movePaddle() {
      if (leftPressed && paddleX > 0) {
        paddleX -= 5;
      }
      if (rightPressed && paddleX < gameWidth - paddleWidth) {
        paddleX += 5;
      }
    }

function updateGame() {
      ballX += ballSpeedX;
      ballY += ballSpeedY;
      movePaddle();
      collisionDetection();
      ball.style.left = ballX + "px";
      ball.style.top = ballY + "px";
      paddle.style.left = paddleX + "px";
      paddle.style.top = paddleY + "px";
    }

function gameLoop() {
      updateGame();
      requestAnimationFrame(gameLoop);
    }

function gameover() {
      alert("Game Over");
      document.location.reload();
    }

gameLoop();
  </script>
</body>
</html>
```