Simple HTML Game: Bounce the Ball and Score Points

<h1>Simple HTML Game: Bounce the Ball and Score Points</h1>
<p>Here's a simple HTML game you can try out! It's all about bouncing a ball and keeping it from falling off the screen. </p>
<h2>Instructions</h2>
<ol>
<li>Click the 'Start Game' button to begin.</li>
<li>Use the left and right arrow keys on your keyboard to move the paddle and prevent the ball from falling.</li>
<li>Every time the ball hits the paddle, your score increases.</li>
<li>The game ends when the ball falls off the bottom of the screen.</li>
</ol>
<h2>Game</h2>
<p><button onclick="startGame()">Start Game</button></p>
<div id="gameArea"></div>
<script>
// Set up canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 480;
canvas.height = 320;
document.getElementById('gameArea').appendChild(canvas);

// Set up ball and paddle
var ball = {
  x: canvas.width/2,
  y: canvas.height-30,
  dx: 2,
  dy: -2,
  radius: 10
};
var paddle = {
  x: (canvas.width-75)/2,
  y: canvas.height-10,
  width: 75,
  height: 10,
  dx: 7
};
var score = 0;

// Draw ball on canvas
function drawBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

// Draw paddle on canvas
function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

// Detect collision between ball and paddle
function detectCollision() {
  if (ball.x > paddle.x && ball.x < paddle.x + paddle.width && ball.y > paddle.y - ball.radius) {
    ball.dy = -ball.dy;
    score++;
  }
}

// Update canvas and ball position
function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  drawPaddle();
  detectCollision();

  // Bounce ball off walls
  if (ball.x + ball.dx > canvas.width-ball.radius || ball.x + ball.dx < ball.radius) {
    ball.dx = -ball.dx;
  }
  if (ball.y + ball.dy < ball.radius) {
    ball.dy = -ball.dy;
  } else if (ball.y + ball.dy > canvas.height-ball.radius) {
    // Check if ball hits paddle
    if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
      ball.dy = -ball.dy;
      score++;
    } else {
      alert('Game Over');
      document.location.reload();
      clearInterval(interval);
    }
  }

  // Move paddle with arrow keys
  if (rightPressed && paddle.x < canvas.width-paddle.width) {
    paddle.x += paddle.dx;
  } else if (leftPressed && paddle.x > 0) {
    paddle.x -= paddle.dx;
  }
}

// Handle arrow key presses
var rightPressed = false;
var leftPressed = false;
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);

function keyDownHandler(e) {
  if(e.keyCode == 39) {
    rightPressed = true;
  } else if(e.keyCode == 37) {
    leftPressed = true;
  }
}

function keyUpHandler(e) {
  if(e.keyCode == 39) {
    rightPressed = false;
  } else if(e.keyCode == 37) {
    leftPressed = false;
  }
}

// Start game
function startGame() {
  var interval = setInterval(update, 10);
}
</script>