html5 canvas 美化游戏界面及总结

这里zidan新增了一个draw函数。

把子弹的样式也进行了封装。子弹的移动方式在move里封装。

网页中只要调用对应的方法就可以了。

背景，飞机也可以做类似的处理。

大家可以从网上找一个子弹的图片，代替小黑圈。

同样可以把背景也美化下。

 

总结：玩了几天的html5 canvas，感觉开源还是硬伤。如果一个项目只有纯客户端代码，太容易复制了，必须放核心的代码到服务器端。

如果用来做游戏，ai本来应该放在服务器端，界面可以放到客户端，就有响应速度和资源加载的问题。当然flash也有这2个问题。

当然商业公司用别人的代码有有风险的。rangecheck就是个例子。

 

function Czidan(){
    this.x = 245;
    this.y = 400;
    this.jiaodu = Math.PI * 0.5;
    this.sudu = 10;
    this.dadao = 0;//0代表没打到，1代表打到
    this.stop = 1;
    this.move = function () {
        if (this.stop == 1)
        { }
        else
        {
            this.y = this.y - this.sudu ;
            //this.x = this.x + this.sudu * Math.sin(this.jiaodu);
            if (this.y < 10)
                this.stop=1;
            //if (this.y == 10)
            //this.jiaodu = Math.atan((x - this.x) / (y - this.y));
        }
    }
    //下面我们来做美工，让飞机和背景好看点
    this.draw=function(ctx)
    {
        ctx.beginPath();
        ctx.arc(this.x, this.y, 10, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
    }
}

 

子弹用一个图片代替的代码：

function Czidan(){
    this.x = 245;
    this.y = 400;
    this.jiaodu = Math.PI * 0.5;
    this.sudu = 10;
    this.dadao = 0;//0代表没打到，1代表打到
    this.stop = 1;
    this.img=new Image();
    this.img.src="xigua2.jpg";
    this.move = function () {
        if (this.stop == 1)
        { }
        else
        {
            this.y = this.y - this.sudu ;
            //this.x = this.x + this.sudu * Math.sin(this.jiaodu);
            if (this.y < 10)
                this.stop=1;
            //if (this.y == 10)
            //this.jiaodu = Math.atan((x - this.x) / (y - this.y));
        }
    }
    //下面我们来做美工，让飞机和背景好看点
    this.draw=function(ctx)
    {
       
        //ctx.beginPath();
        //ctx.arc(this.x, this.y, 10, 0, Math.PI * 2, false);
        //ctx.closePath();
        //ctx.fill();
        ctx.drawImage(this.img,this.x,this.y);
    }
}