image
思路：
1.设置环境
首先是把html弄出来，基本上就只需要一个canvas就可以了
然后设置一个固定的宽高，为canvas的尺寸，然后创建ctx，也就是canvas.getContext('2d')
2.开始设置配置信息
上面的弄好了，然后我们开始想下这个里面有什么东西，一般情况下一个项目的开始基本上都是先看下这个项目基础需要的一些东西，但是有些人想到这个项目，基本上不知道从哪里入手，其实呢，新手来说，可以直接从所看到的入手，然后可以慢慢的完善起来，这样是最笨的方法，但是想要精通，那就要多写，这样就可以从经验入手了
然后呢，我们先看到的呢就是首页图，也就是加载的图，然后我们就可以向下，如果需要弄出这个来，需要干什么：
1》这个首页图其实是加载图片的时候的一个图，然后我们就会知道，如果一个游戏开始，那么就需要先把所有的游戏的素材先加载过来，也就是图片这些，然后加载图片的话，就需要一个过程，然后我们就分析下如何把所有的图片加载过来
2》首先我们需要写一个函数，这个函数名字就叫做download，用于加载所有的图片，然后加载完之后，页面上会出现百分比，然后加载一个图片，百分比就会增加一点
3》因为我们里面有个百分比，所以我们download里面有个函数，就是单独画下百分比的，如果图片加载完了，那就可以开始游戏了，代码如下：
function drawProgress(){ //每次加载完一张图片，都会重新绘制当前进度
ctx.clearRect(0,0,canvasWidth,canvasHeight);//清除画布上已有的内容
var txt = progress+'%';
var w = ctx.measureText(txt).width;
ctx.fillText(txt, canvasWidth/2-w/2, canvasHeight/2+80/2);
ctx.strokeText(txt,canvasWidth/2-w/2, canvasHeight/2+80/2);
if(progress>=100){ //所有图片加载完成，开始游戏
startGame();
}
}
4》然后呢，是加载图片，因为这个项目里是飞机大战，主要就几个飞机和子弹的图片，所以，这些图片我们要分类放起来，每次加载完之后，需要放到变量里面，用于后面使用，所以开始的时候会声明一些变量或数组，专门用于存放这些图片，下面是加载图片的代码，
代码段1
下面是图片加载的时候，这些的话图片太多了，所以就截取这点，其他的同样的方法，也可以用循环去下载，方法一样
代码段2
5》下载完之后，我们就开始弄首页的图片，首先我们先画下里面的天空，因为这个图片是属于循环一直走的，所以我们可以画两个图片，然后第一个图片到底了的时候再画一个相同的图片放到底部继续走，这样对接就相当于是一张无限长的图片了
代码：
function Sky(img){
this.x1 = 0; //初始时第一张背景图坐标
this.y1 = 0;
this.x2 = 0; //初始时第二张背景图坐标
this.y2 = -img.height;
this.draw = function(){ //绘制天空对象
//每次绘制的背景图都是铺满，会自动覆盖已有的全部内容，无需再调用clearRect()
ctx.drawImage(img,this.x1,this.y1);
ctx.drawImage(img,this.x2,this.y2);
}
this.move = function(){ //移动天空对象
this.y1++; //图片坐标下移
this.y2++;
if(this.y1>=canvasHeight){ //第1张背景图移出画布了
this.y1 = this.y2-img.height;
}
if(this.y2>=canvasHeight){ //第2张背景图移出画布了
this.y2 = this.y1-img.height;
}
}
}
今天先写到这里，剩下的部分给大家时间自己想着写下，然后明天继续写剩下的部分，游戏地址的话，我放到我的服务器上，虽然还不算完美，但是算是能玩的
里面还有另外俩游戏，
网友评论