有了上个物理实验SuperBall开发总结(二)-让小球动起来，其实就真正明白了这个游戏的整体框架。
以后的工作就是丰富render(), checkHit()和update()，当然当代码量逐渐增多时，我们还需要将代码分块，便于阅读、扩展和维护。
现在我们要将游戏中玩家控制的木板实现出来.
完成效果
SuperBall_02-Add_A_BOARD
需要先鼠标左键点击一下效果框(Result框)，获取焦点后，才会将键盘事件监听导向木板。
加入木板对象
var board = {
x : 100,
y : 200 -10,
weight : 4,
height : 5, c
olor : "grey"
}
添加木板渲染代码
//render the board
context.beginPath();
context.moveTo(board.x, board.y);
context.lineTo(board.x + board.width, board.y);
context.lineWidth = board.weight;
context.strokeStyle = board.color;
context.stroke();
context.closePath();
添加小球碰撞木板的检测代码
//check the ball hit the board
if(ball.x >= board.x && ball.x <= board.x + board.width)
if(ball.y >= board.y - board.weight/2 - ball.r){
ball.y = board.y - board.weight/2 - ball.r;
ball.vy *= -1;
}
注意这里判断标准的细节，由于木板是用一条线画出来的，所以木板的长度是board.width而宽度是board.weight
添加键盘监听
document.onkeydown = checkKeyDown;
function checkKeyDown(event){
switch (event.keyCode) {
case 37: //left
board.x -= 20;
break;
case 39: //right
board.x += 20;
break;
}
}
别让木板跑出去
//ensure the board is in the canvas
if(board.x <= 0)
board.x = 0;
if(board.x >= 300 - board.width)
board.x = 300 - board.width;
这里的键盘监听函数主要是捕获键盘点击的代码，而向左键是37， 向右键是39.
SuperBall开发总结(四)-BOSS出场
