僵尸入侵之背景绘制3

建立assets文件夹用来保存所用到的背景和精灵素材:

ground1:

sprites:

在setting,.js中对图片资源定义：

//定义assets属性，如果加载完毕后，会在每个属性对应的值对象里增加一个obj属性，对应加载到内存中的image对象var game_images ={    sprites:{src:"assets/sprites.png"},    ground1:{src:"assets/ground1.jpg"}    };

有了图片素材后，编写图像加载程序。新建resource_loader.js文件并导入。浏览器中的js程序有一个线程进行，但图片资源的加载是一个单独的线程来执行。当资源加载完毕后，用过回调函数来通知使之执行：imageload方法用来把image图像对象转换为一个数组。通过_imageload来加载。递归调用

//回调函数为资源加载完之后来function imageLoad(images,completeCalback) {    var arr =[];    for(var id in images){        var obj ={"id":id};        obj.src=images[id].src;        arr.push(obj);        }        _imageLoad(images,arr,completeCalback);}function _imageLoad(images,arr,completeCalback) {    if (arr&&arr.length>0) {        var img =new Image();        var item = arr[0];        images[item.id].obj=img;        var restImages=arr.slice(1);        if (restImages&&restImages.length>0)             img.onload=function(){                _imageLoad(images,restImages,completeCalback);            };            else            img.onload=completeCalback;            img.src=item.src;            console.log(img.src);        }      }

下面改变game中的启动方式：

在gameInit()中加入

  imageLoad(game_images,Game.start);

游戏是一个横向卷轴类游戏，所以需要一个从右向左的滚动背景，需要首先建立一个离屏的图片，按照一定的速度绘制在画布上。建立gamemap.js并导入

开始编辑：

var GameMap =function(speed,numOfGrass){    //新建离屏画布    var map =document.createElement("canvas");    map.width=GAME_CONFIG.width;    map.height=GAME_CONFIG.height;    var tmpCtx=map.getContext("2d");        var groundImg=game_images["ground1"].obj;//用来做离屏画布的填充模式，在XY方向重复绘制    tmpCtx.fillStyle=tmpCtx.createPattern(groundImg,"repeat");    tmpCtx.fillRect(0,0,map.width,map.height);             var offset=0;

        this.draw=function(ctx){        var intOffset=Math.floor(offset);        var remaining=map.width-intOffset;        if (intOffset>0) {            ctx.drawImage(map,                          0,0,intOffset,map.height,                          remaining,0,                          intOffset,map.height);                    }                if (remaining>0) {            ctx.drawImage(map,                          intOffset,0,                          remaining,map.height,                          0,0,                          remaining,map.height);        }        };        this.step=function(dt){            offset+=dt*speed;            offset=offset%map.width;                    };};

修改game.js显示游戏场景：在game方法中增加属性this.boards，存放放置在画布上的内容，再添加设置获取board的方法。

增加一个this.run方法，循环处理画布上的内容;假定每个内容的对象都有step,draw方法

var Game = (function(){    this.boards=[];        $this= this;    this.setCtx=function(context){        this.ctx=context;    };    this.setBoard=function(num,board){        this.boards[num]=board;    }    this.getBoard=function(num){       return this.boards[num];     };    this.start=function(){        setBoard(0,new GameMap(20));               loop();            };       this.run=function(dt){        for(var i=0,len=this.boards.length;i<len;i++){            if (this.boards[i]) {                this.boards[i].step(dt);                this.boards[i].draw(this.ctx);                }        }    };    this.loop=function(){              console.log("Loop");        setTimeout($this.loop,GAME_CONFIG.tick);                       var dt=GAME_CONFIG.tick/1000;        $this.run(dt);            };        return this;     })();

为了生动背景，可以简历纹理绘制体系。新建texturemanager.js文件并导入.

进入setting.js中。配置纹理

sx,sy表示纹理为位置，w,h，表示纹理高度。frame表示从左向右绘制.注意纹理的图片最好是透明的png图片。

var textures={    player:{sx:0,sy:60,w:60,h:60,frames:1,image:"sprites"},    bullet:{sx:120,sy:60,w:60,h:15,frames:1,image:"sprites"},    bomb:{sx:120,sy:80,w:30,h:20,frames:1,image:"sprites"},    zombie1:{sx:0,sy:120,w:60,h:60,frames:1,image:"sprites"},    zombie2:{sx:60,sy:120,w:60,h:60,frames:1,image:"sprites"},    zombie3:{sx:120,sy:120,w:60,h:60,frames:1,image:"sprites"},    zombie4:{sx:180,sy:120,w:60,h:60,frames:1,image:"sprites"},    explosion:{sx:0,sy:0,w:64,h:60,frames:12,image:"sprites"},    bonus:{sx:120,sy:100,w:30,h:20,frames:1,image:"sprites"},    bonus2:{sx:150,sy:80,w:30,h:26,frames:1,image:"sprites"},    ground1:{sx:736,sy:148,w:32,h:32,frames:1,image:"sprites"},    grass1:{sx:340,sy:180,w:60,h:60,frames:1,image:"sprites"},    grass2:{sx:400,sy:100,w:40,h:60,frames:1,image:"sprites"}};

回到texturemanager中编写纹理的绘制方法draw

<pre name="code" class="javascript">var TextureManager=(function(){    this.map={};    this.load=function(data){        this.map=data;    };    this.draw=function(ctx,sprite,x,y,frame){        var s =this.map[sprite];        var image=game_images[s.image].obj;        if (!frame)          frame=0;        ctx.drawImage(image,                      s.sx+frame*s.w,                      s.sy,                      s.w,s.h,                      Math.floor(x),Math.floor(y),                      s.w,s.h)  ;                //code        };        return this;    }    )();

来到gamemap类中，加入随机绘制草的代码.

先增加草数量的参数"，有随机数进行选取。

   for(var i=0;i<numOfGrass;i++){        var b=Math.random()>0.5;        TextureManager.draw(tmpCtx,b?"grass1":"grass2",                            Math.floor(Math.random()*(map.width)-(b?60:40)),                            Math.floor(Math.random()*(map.height)-(b?60:40)),0);    }    

回到game.js的start方法中，为setboard再新加一个参数：

 setBoard(0,new GameMap(20,200));

再在gameInit中，增加纹理的调用：

  TextureManager.load(textures);