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

No:1456

103

←

Prev Next

→

A ball will fall from above. The player wins if he..ALL
Developer User3329｜Date and time 23/6/18 16:47:25
Build time 23.226 sec｜Game capacity 3.62KB｜

Script

ます。球を打ち返すと、スコアが加算されます。球を誤って落としてしまうとゲームオーバーです。スコアが高いほどランキング上位に載るようになっています。スマホで遊べるように、画面の左右にボタンを配置しています。絵文字を多めに使って、可愛らしい雰囲気を出しています。以下が実際のプログラムです。

打ち返しゲーム

スコア：0

←

Prev　Next

→ 　

Back　

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

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

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打ち返しゲーム</title>
  </head>
  <body>
    <h1>打ち返しゲーム</h1>
    <div id="scoreboard">スコア：0</div>
    <div id="gamearea"></div>
    <div id="buttons">
      <button id="left-button">⬅️</button>
      <button id="right-button">➡️</button>
    </div>
    <script>
      // 初期値
      let score = 0;
      let isGameOver = false;
      const gameArea = document.getElementById('gamearea');
      const scoreboard = document.getElementById('scoreboard');
      const leftButton = document.getElementById('left-button');
      const rightButton = document.getElementById('right-button');
      
      // ボタンの押下時の処理
      leftButton.addEventListener('click', function() {
        if (!isGameOver) {
          movePaddle(-50);
        }
      });
      rightButton.addEventListener('click', function() {
        if (!isGameOver) {
          movePaddle(50);
        }
      });
      
      // パドルの移動
      function movePaddle(distance) {
        const paddle = gameArea.children[1];
        const left = parseInt(paddle.style.left) || 0;
        paddle.style.left = `${left + distance}px`;
      }
      
      // 球の落下
      function startGame() {
        let position = { x: 0, y: 0 };
        const ball = document.createElement('div');
        ball.classList.add('ball');
        gameArea.appendChild(ball);
        
        // 毎フレームの処理
        function moveBall() {
          position.y += 10;
          ball.style.top = `${position.y}px`;
          
          // パドルとの当たり判定
          const paddle = gameArea.children[1];
          if (position.y + 50 >= paddle.offsetTop && position.x + 50 >= paddle.offsetLeft && position.x <= paddle.offsetLeft + 200) {
            score++;
            scoreboard.innerHTML = `スコア：${score}`;
          }
          
          // ボールの画面外チェック
          if (position.y > gameArea.offsetHeight) {
            isGameOver = true;
            alert(`ゲームオーバー！スコアは${score}点でした！`);
            // ランキング登録処理ここに書く
          }
          
          // 次のフレームの処理
          if (!isGameOver) {
            requestAnimationFrame(moveBall);
          }
        }
        moveBall();
      }
      startGame();
    </script>
    <style>
      #gamearea {
        width: 400px;
        height: 600px;
        background-color: #ddd;
        position: relative;
      }
      #gamearea .paddle {
        width: 200px;
        height: 20px;
        background-color: #333;
        position: absolute;
        bottom: 30px;
        left: 100px;
      }
      #gamearea .ball {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: #c00;
        position: absolute;
        top: 0;
        left: 175px;
      }
      #buttons {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
      }
    </style>
  </body>
</html>
```