Tennis up, down, left and right's game

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

No:2095

4690

←

Prev Next

→

Tennis up, down, left and right
Developer anonymous｜Date and time 70/1/1 9:55:27
Build time unknown sec｜Game capacity 3.327KB｜

Script

In implementing the application、Combining HTML and JavaScript、Tennis game created. Below is the actual program.

In this application.、The up, down, left, and right keys operate the paddles and、The ball bounces back. When the ball hits the edge of the screen, it bounces back、When it hits the paddle, it bounces back again. You can even control it with your phone.、Paddles are placed at the bottom of the screen and、We restrict them so that they do not appear on the left or right edge. I dont use any particular pictograms.、The background color and ball color are changed for easy viewing.

←

Prev　Next

→ 　

Back　

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

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

アプリを実装するにあたり、HTMLとJavaScriptを組み合わせて、テニスゲームを作成しました。

以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>テニスゲーム</title>
  <style>
    #ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: yellow;
      position: absolute;
      top: 50%;
      left: 50%;
    }

#paddle {
      width: 80px;
      height: 20px;
      background-color: blue;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
</head>

// パドルの要素を取得
    const paddle = document.getElementById('paddle');

// ボールの初期位置
    let ballX = 50;
    let ballY = 50;

// ボールの移動速度
    let ballSpeedX = 5;
    let ballSpeedY = 5;

// パドルの位置
    let paddleX = 40;

// ゲーム開始
    function startGame() {
      // ボールを移動させる
      setInterval(moveBall, 30);
    }

// ボールを移動させる
    function moveBall() {
      // 次のフレームのボールの位置を計算
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// ボールが画面の端に当たったら跳ね返る
      if (ballX < 0 || ballX > 350) {
        ballSpeedX = -ballSpeedX;
      }
      if (ballY < 0 || ballY > 500) {
        ballSpeedY = -ballSpeedY;
      }

// ボールがパドルに当たったら跳ね返る
      if (ballY > 470 && ballX > paddleX && ballX < paddleX + 80) {
        ballSpeedY = -ballSpeedY;
      }

// ボールの位置を反映
      ball.style.left = ballX + 'px';
      ball.style.top = ballY + 'px';
    }

// パドルを移動させる
    function movePaddle(direction) {
      // パドルを移動させる
      switch (direction) {
        case 'left':
          paddleX -= 10;
          break;
        case 'right':
          paddleX += 10;
          break;
      }

// パドルが画面の端に出ないようにする
      if (paddleX < 0) {
        paddleX = 0;
      } else if (paddleX > 270) {
        paddleX = 270;
      }

// パドルの位置を反映
      paddle.style.left = paddleX + 'px';
    }

// キーボードのイベントリスナーを設定
    document.addEventListener('keydown', function (event) {
      switch (event.key) {
        case 'ArrowLeft':
          movePaddle('left');
          break;
        case 'ArrowRight':
          movePaddle('right');
          break;
      }
    });

// ゲーム開始
    startGame();
  </script>
</body>

</html>
```

このアプリでは、上下左右のキーでパドルを操作し、ボールを跳ね返しています。ボールが画面の端に当たると跳ね返り、パドルに当たるとまた跳ね返ります。スマホでも操作できるように、画面下部にパドルを配置し、左右の端に出ないように制限をかけています。絵文字は特に使用していませんが、背景色やボールの色を変更することで見やすくしています。