SuperBall开发总结(三)-加入木板

有了上个物理实验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出场