Simple HTML Game - Catch the Ball - 常规

<!DOCTYPE html>
<html>
<head>
  <title>Simple HTML Game - Catch the Ball</title>
  <style>
    body {
      text-align: center;
      background-color: #3b3b3b;
    }
<pre><code>#container {
  width: 800px;
  margin: 0 auto;
}

#game-area {
  width: 600px;
  height: 600px;
  background-color: #fff;
  border: 1px solid #000;
  margin: 0 auto;
}
</code></pre>
  </style>
</head>
<body>
  <div id="container">
    <h1>Catch the Ball</h1>
    <div id="game-area"></div>
  </div>
  <script>
    let gameArea = document.getElementById("game-area");
<pre><code>//Create a ball
let ball = document.createElement(&quot;div&quot;);
ball.style.width = &quot;50px&quot;;
ball.style.height = &quot;50px&quot;;
ball.style.backgroundColor = &quot;#000&quot;;
ball.style.borderRadius = &quot;25px&quot;;
ball.style.position = &quot;absolute&quot;;
ball.style.left = &quot;50%&quot;;
ball.style.top = &quot;50%&quot;;
gameArea.appendChild(ball);

//Create a paddle
let paddle = document.createElement(&quot;div&quot;);
paddle.style.width = &quot;100px&quot;;
paddle.style.height = &quot;20px&quot;;
paddle.style.backgroundColor = &quot;#000&quot;;
paddle.style.position = &quot;absolute&quot;;
paddle.style.left = &quot;50%&quot;;
paddle.style.bottom = &quot;20px&quot;;
gameArea.appendChild(paddle);

//Create a wall
let wall = document.createElement(&quot;div&quot;);
wall.style.width = &quot;50px&quot;;
wall.style.height = &quot;400px&quot;;
wall.style.backgroundColor = &quot;#000&quot;;
wall.style.position = &quot;absolute&quot;;
wall.style.right = &quot;20px&quot;;
wall.style.top = &quot;50px&quot;;
gameArea.appendChild(wall);

//Create a score area
let scoreArea = document.createElement(&quot;div&quot;);
scoreArea.style.width = &quot;200px&quot;;
scoreArea.style.height = &quot;50px&quot;;
scoreArea.style.position = &quot;absolute&quot;;
scoreArea.style.right = &quot;20px&quot;;
scoreArea.style.bottom = &quot;20px&quot;;
scoreArea.innerHTML = &quot;Score: 0&quot;;
gameArea.appendChild(scoreArea);

//Initialise game variables
let score = 0;
let gameOver = false;

//Handle user input
document.addEventListener(&quot;keydown&quot;, function(e) {
  if (e.keyCode == 37) {
    //Left arrow
    paddle.style.left = paddle.offsetLeft - 10 + &quot;px&quot;;
  } else if (e.keyCode == 39) {
    //Right arrow
    paddle.style.left = paddle.offsetLeft + 10 + &quot;px&quot;;
  }
});

//Game loop
let gameLoop = setInterval(function() {
  //Move ball
  ball.style.left = ball.offsetLeft + 5 + &quot;px&quot;;
  ball.style.top = ball.offsetTop + 5 + &quot;px&quot;;

  //Collision detection
  //Wall
  if (ball.offsetLeft &gt;= wall.offsetLeft - 50 &amp;&amp; ball.offsetTop &lt;= wall.offsetTop + 400) {
    gameOver = true;
  }
  //Paddle
  if (ball.offsetLeft &gt;= paddle.offsetLeft - 50 &amp;&amp; ball.offsetTop &gt;= paddle.offsetTop - 50) {
    score++;
    scoreArea.innerHTML = &quot;Score: &quot; + score;
  }

  //Game over
  if (gameOver) {
    alert(&quot;Game Over!&quot;);
    clearInterval(gameLoop);
  }
}, 20);
</code></pre>
  </script>
</body>
</html>