SOURCE

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
  body { margin: 0; background: #111; color: white; overflow: hidden; font-family: sans-serif; }
  #game { display: block; width: 100vw; height: 100vh; }
  #menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(17,17,17,0.9); z-index: 10; }
  h1 { color: #4ff0c1; letter-spacing: 5px; }
  button { padding: 15px 40px; font-size: 18px; margin: 10px; border-radius: 30px; border: 2px solid #4ff0c1; background: transparent; color: #4ff0c1; }
  button:active { background: #4ff0c1; color: #111; }
  #backBtn { position: fixed; top: 20px; right: 20px; display: none; z-index: 20; padding: 10px 20px; font-size: 14px; }
</style>
</head>
<body>

<canvas id="game"></canvas>
<button id="backBtn">返回</button>

<div id="menu">
  <h1>小球斗蛐蛐</h1>
  <button id="startBtn">开始游戏</button>
</div>

<script>
  var canvas = document.getElementById('game');
  var ctx = canvas.getContext('2d');
  var W, H;
  var ball = { x: 0, y: 0, r: 20, vx: 3, vy: 3 };
  var isPlaying = false;

  function resize() {
    W = canvas.width = window.innerWidth;
    H = canvas.height = window.innerHeight;
  }
  window.onresize = resize;
  resize();

  document.getElementById('startBtn').onclick = function() {
    document.getElementById('menu').style.display = 'none';
    document.getElementById('backBtn').style.display = 'block';
    ball.x = W / 2;
    ball.y = H / 2;
    ball.vx = (Math.random() > 0.5 ? 1 : -1) * 4;
    ball.vy = (Math.random() > 0.5 ? 1 : -1) * 4;
    isPlaying = true;
  };

  document.getElementById('backBtn').onclick = function() {
    document.getElementById('menu').style.display = 'flex';
    document.getElementById('backBtn').style.display = 'none';
    isPlaying = false;
  };

  function draw() {
    ctx.clearRect(0, 0, W, H);
    if (isPlaying) {
      ball.x += ball.vx;
      ball.y += ball.vy;
      if (ball.x - ball.r < 0 || ball.x + ball.r > W) ball.vx *= -1;
      if (ball.y - ball.r < 0 || ball.y + ball.r > H) ball.vy *= -1;
    }
    
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
    ctx.fillStyle = '#4ff0c1';
    ctx.fill();
    ctx.closePath();
    
    requestAnimationFrame(draw);
  }
  draw();
</script>
</body>
</html>