canvas游戏学习笔记（三）--打砖块

写在前面

用scratch和processing都写过打砖块，所以在逻辑上比较熟悉，区别在于编写代码的方式做了些改变。只要能正确理解JavaScript的语法，打砖块还是很快就可以写好的。

---

声明游戏角色

//定义砖块数组，反弹球，球拍
    var bricks=[]; 
    var player;
    var paddle;

定义游戏区域

//定义游戏区域
    var myGameArea={
        canvas:document.createElement("canvas"),   //代码生产canvas
        start:function(){                          //游戏准备
            this.canvas.width=900;
            this.canvas.height=500;
            document.body.insertBefore(this.canvas,document.body.childNodes[0]);    //canvas加入页面
            this.context=this.canvas.getContext("2d");
            this.interval=setInterval(updateGame,20);
        },
        clear:function(){                         //每一帧要清屏
            this.context.fillStyle="black";
            this.context.fillRect(0,0,this.canvas.width,this.canvas.height);
        }
    }

同样通过代码生成canvas，并定义游戏初始化和清屏。

定义游戏角色

 //定义方块，用于产生反弹球、砖块、球拍
    function box(x,y,width,height,color,speed){
        this.width=width;
        this.height=height;
        this.x=x;
        this.y=y;
        this.speed=speed;                        //移动速度（为反弹球设置）
        theta=Math.PI/2+Math.random()*Math.PI;   //初始角度（为反弹球设置）
        this.speedX=this.speed*Math.sin(theta);  //分解水平分量
        this.speedY=this.speed*Math.cos(theta);  //分解垂直分量
        //在canvas里显示
        this.show=function(){
            ctx=myGameArea.context;
            ctx.fillStyle=color;
            myGameArea.context.fillRect(this.x,this.y,this.width,this.height);
        }
        //反弹球更新位置
        this.update=function(){
            this.x+=this.speedX;
            this.y+=this.speedY;
            //检测碰到两边墙壁
            if(this.x>(myGameArea.canvas.width-this.width)||this.x<0){
                this.speedX*=-1;
            }
            //检测碰到上面墙壁
            if(this.y<0){
                this.speedY*=-1;
            }
            //检测碰到球拍
            if(this.y+this.height>paddle.y&&this.x>(paddle.x-this.width)&&this.x<(paddle.x+paddle.width)){
                this.speedY*=-1;
            }
            //检测碰到下面墙壁，游戏停止
            if(this.y+this.height>myGameArea.canvas.height){
                clearInterval(myGameArea.interval);
            }

        }
        //检测球与砖块的碰撞
        this.collision=function(obj){
            if(this.y<(obj.y+obj.height)&&this.y>(obj.y-this.height)&&this.x>(obj.x-this.width)&&this.x<(obj.x+obj.width)){
                this.speedY*=-1;
                return true;    
            }
            return false;
        }
    }

所有的游戏角色都通过box()产生。并定义了显示（show）、更新位置（update）、检测碰撞（collision）等几个函数。其中，每个角色在实例化的时候会根据自身需要选择的函数和参数。

游戏更新

//游戏更新
    function updateGame(){
        myGameArea.clear();            //清屏
        for (var i = bricks.length - 1; i >= 0; i--) {
            bricks[i].show();
            if(player.collision(bricks[i])){
                bricks.splice(i,1);    //如果该砖块碰到反弹球，就从数组中删掉
            };
        };
        player.update();  // 反弹球更新位置                            
        player.show();    //反弹球显示
        // paddle.move();
        paddle.show();    // 每一帧球拍要显示
    }

游戏更新

    //游戏更新
    function updateGame(){
        myGameArea.clear();            //清屏
        for (var i = bricks.length - 1; i >= 0; i--) {
            bricks[i].show();
            if(player.collision(bricks[i])){
                bricks.splice(i,1);    //如果该砖块碰到反弹球，就从数组中删掉
            };
        };
        player.update();  // 反弹球更新位置                            
        player.show();    //反弹球显示
        // paddle.move();
        paddle.show();    // 每一帧球拍要显示
    }

鼠标控制球拍

//鼠标移动paddle
    function paddle_move_by_mouse(event){
        var x =event.clientX;
        if(x<myGameArea.canvas.width){
            paddle.x=x-paddle.width/2;  
        }   
    }

要将该事件正确绑定到onmousemove()。