用javascript写星际飞机大战游戏

在github里看到了个不错的脚本游戏，决定亲自动手来写，效果如下

 

下面是代码的思路分享

把整个代码理解消化确实不容易，但是如果你坚持看完相信你一定会有收获

如果没兴趣可以直接点击下面的链接 复制代码 开玩：

http://www.cnblogs.com/demonxian3/p/6241755.html

 

1丶首先准备好素材

游戏的元素有：飞机 敌机 子弹 背景 暂停

 

 

素材的大小可以通过drawImage()来改变其大小，因此不需要太纠结素材多少像素

 

创建一个html文件 和一个js文件 

然后开始编辑该html文件

 

2.写一个画布：

<canvas id="canvas" width=500 height=500 style="border:1px solid #c3c3c3"></canvas>

 

 

3.获取画布对象

canvas = document.getElementById('canvas') 

cxt = canvas.getContext('2d');

 

 

4.设置画布属性

var boxx=0

var boxy=0

var boxwidth=500

var boxheight=500

 

 

 

 **************************画飞机****************************

 

5.声明飞机相关的变量

飞机横坐标 纵坐标 宽度 高度 这些都是为下面的drawImage做准备的

var planex;

var planey;

var planewidth=60;

var planeheight=60;

var planeImage = new Image();

planeImage.src="images/hero.jpg";  //引入图片

 

6.布置飞机初始位置

planex = (boxwidth - planewidth) / 2   //画布的中央

planey = boxheight - planeheight　　　　 //画布的底端

因为这里的坐标(x,y)指的是飞机左上角的坐标，因此需要把飞机的长度算上 

 

 

7.画出飞机

有了坐标和宽高就可以把飞机画出来了

cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);

 

现在可以打开网页测试下，看看飞机是否画出来了，

如果没有画出来，那么请别灰心，耐心的查一下有什么错误的地方

如果成功显示出飞机了那么go on！

 

 

飞机画出来了但是飞机不会动