Simple HTML Ping Pong Game - No Instructions - 常规

<html>
<head>
  <title>Ping Pong</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #canvas {
      background: #CCC;
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
    #paddle1 {
      background: #000;
      height: 80px;
      position: absolute;
      width: 10px;
      z-index: 1;
    }
    #paddle2 {
      background: #000;
      height: 80px;
      position: absolute;
      width: 10px;
      z-index: 1;
    }
    #ball {
      background: #000;
      height: 10px;
      position: absolute;
      width: 10px;
      z-index: 1;
    }
  </style>
</head>
<body onload='init()'>
  <canvas id='canvas' width='500' height='300'></canvas>
  <script>
    var canvas;
    var ctx;
    var windowWidth;
    var windowHeight;
    var paddle1;
    var paddle2;
    var ball;
    var upPressed = false;
    var downPressed = false;
    var wPressed = false;
    var sPressed = false;
    var scoreOne = 0;
    var scoreTwo = 0;
    var speedX = 4;
    var speedY = 4;
<pre><code>function init() {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  windowWidth = canvas.width;
  windowHeight = canvas.height;
  paddle1 = {
    x: 10,
    y: windowHeight/2 - 40,
    width: 10,
    height: 80,
    color: '#000'
  };
  paddle2 = {
    x: windowWidth-20,
    y: windowHeight/2 - 40,
    width: 10,
    height: 80,
    color: '#000'
  };
  ball = {
    x: windowWidth/2,
    y: windowHeight/2,
    width: 10,
    height: 10,
    color: '#000'
  };
  document.addEventListener('keydown', keyDownHandler, false);
  document.addEventListener('keyup', keyUpHandler, false);
  setInterval(draw, 10);
}

function draw() {
  ctx.clearRect(0, 0, windowWidth, windowHeight);
  drawRectangle(paddle1);
  drawRectangle(paddle2);
  drawRectangle(ball);
  move();
}

function drawRectangle(rect) {
  ctx.fillStyle = rect.color;
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
}

function move() {
  ball.x += speedX;
  ball.y += speedY;

  if (ball.x &gt; windowWidth || ball.x &lt; 0) {
    speedX *= -1;
  }
  if (ball.y &gt; windowHeight || ball.y &lt; 0) {
    speedY *= -1;
  }

  if (upPressed) {
    paddle1.y -= 7;
    if (paddle1.y &lt; 0) {
      paddle1.y = 0;
    }
  }
  if (downPressed) {
    paddle1.y += 7;
    if (paddle1.y + paddle1.height &gt; windowHeight) {
      paddle1.y = windowHeight - paddle1.height;
    }
  }
  if (wPressed) {
    paddle2.y -= 7;
    if (paddle2.y &lt; 0) {
      paddle2.y = 0;
    }
  }
  if (sPressed) {
    paddle2.y += 7;
    if (paddle2.y + paddle2.height &gt; windowHeight) {
      paddle2.y = windowHeight - paddle2.height;
    }
  }

  if (ball.x + ball.width &gt; paddle2.x &amp;&amp;
    ball.x &lt; paddle2.x + paddle2.width &amp;&amp;
    ball.y + ball.height &gt; paddle2.y &amp;&amp;
    ball.y &lt; paddle2.y + paddle2.height) {
    speedX *= -1;
  }
  if (ball.x + ball.width &gt; paddle1.x &amp;&amp;
    ball.x &lt; paddle1.x + paddle1.width &amp;&amp;
    ball.y + ball.height &gt; paddle1.y &amp;&amp;
    ball.y &lt; paddle1.y + paddle1.height) {
    speedX *= -1;
  }

  if (ball.x &lt; 0) {
    scoreTwo += 1;
    reset();
  }
  if (ball.x &gt; windowWidth) {
    scoreOne += 1;
    reset();
  }
}

function keyDownHandler(e) {
  if(e.keyCode == 38) {
    upPressed = true;
  }
  else if(e.keyCode == 40) {
    downPressed = true;
  }
  else if(e.keyCode == 87) {
    wPressed = true;
  }
  else if(e.keyCode == 83) {
    sPressed = true;
  }
}

function keyUpHandler(e) {
  if(e.keyCode == 38) {
    upPressed = false;
  }
  else if(e.keyCode == 40) {
    downPressed = false;
  }
  else if(e.keyCode == 87) {
    wPressed = false;
  }
  else if(e.keyCode == 83) {
    sPressed = false;
  }
}

function reset() {
  ball.x = windowWidth/2;
  ball.y = windowHeight/2;
}
</code></pre>
  </script>
</body>
</html>