听了韩顺平老师的视频教程，学到了不少编程思想，原来看似简单的坦克大战小游戏写起来其实并不简单。这里总结一下这几天学到的东西。
首先是关于html5的知识了。这里我们基本上只用了画布canvas来画坦克，还有就是html5的第一行<!DOCTYPE html>来说明这是一个使用html5写的页面,html5的特性之一就包括canvas，这是html中没有的标签。
另外一个就是js了，涉及到的语法都是最简单、最基本的用法，这在代码中进行解释。同时，韩老师在这个视频中代码有个bug就是敌人坦克在死后依然会发子弹，小弟在此进行了修正。
接下来最重要的就是我们要来分析一下坦克大战小游戏的设计思路：
1、要有作战区域，这有canvas 可以帮我们解决。
2、要有坦克，包括自己的、敌人的。
3、要能有子弹，包括自己的、敌人的。
4、要有炸弹。
5、我的坦克要能按键发射子弹，敌人的坦克要能连续自动发射子弹。
6、我的子弹打到敌人时子弹要消失，同时敌人爆炸并消失，不能再发子弹。
以上是游戏设计的简单思路，这是初步设计，接下来以代码来分析详细的设计过程：
步骤一：
组织代码，为了代码易读，而且我使用的是html5+js来实现，自不必多说，使用tankGame.js+tankGame.html来组织我的代码，js用于类以及方法的实现过程，html实现函数调用以及网页的显示。
步骤二：设计作战区域：
code 1 from tankeGame.html
<canvas id="tankMap" width="500px" height="500px" style="background-color:black"></canvas><pre class="html" name="code"><script type="text/javascript">//得到画布var canvas1=document.getElementById("tankMap");//获得画图工具var cxt=canvas1.getContext("2d");</script><script type="text/javascript">//得到画布var canvas1=document.getElementById("tankMap");//得到绘图上下文(你可以理解是画笔)var cxt=canvas1.getContext("2d");</script>
步骤三：画坦克,包括自己的和敌人的：
// 基类，里面有基本的共有属性和方法function Tank(x,y,direct,color){this.x=x;this.y=y;this.speed=1;this.isLive=true;this.direct=direct;//一个坦克，需要两个颜色.this.color=color;//上移this.moveUp=function(){this.y-=this.speed;this.direct=0;}//向右this.moveRight=function(){this.x+=this.speed;this.direct=1;}//下移this.moveDown=function(){this.y+=this.speed;this.direct=2;}//左this.moveLeft=function(){this.x-=this.speed;this.direct=3;}}
//子类Hero和EnemyTanke继承自基类。注意继承的方法。
//定义一个Hero类//x 表示坦克的 横坐标, y 表示纵坐标, direct 方向function Hero(x,y,direct,color){//继承的方法和格式，tank其实就是一个对象this.tank=Tank;this.tank(x,y,direct,color);//增加一个私有函数，，射击敌人坦克.this.shotEnemy=function(){//创建子弹, 子弹的位置应该和hero有关系，并且和hero的方向有关switch(this.direct){case 0:heroBullet=new Bullet(this.x+9,this.y,this.direct,3,"hero",this);break;case 1:heroBullet=new Bullet(this.x+30,this.y+9,this.direct,3,"hero",this);break;case 2:heroBullet=new Bullet(this.x+9,this.y+30,this.direct,3,"hero",this);break;case 3: //右heroBullet=new Bullet(this.x,this.y+9,this.direct,3,"hero",this);break;}//把这个子弹对象放入到数组中 -> push函数heroBullets.push(heroBullet);//定时器.var timer=window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);//把这个timer赋给这个子弹(js对象是引用传递!)heroBullets[heroBullets.length-1].timer=timer;}} //定义一个EnemyTank类 function EnemyTank (x,y,direct,color){ //继承Tank this.tank=Tank; this.count=0; this.bulletIsLive=true; this.tank(x,y,direct,color); this.qetBullet=null; this.run=function run(){ //判断敌人的坦克当前方向 switch(this.direct){ case 0: if(this.y>0){ this.y-=this.speed; } break; case 1: if(this.x+30<400){ this.x+=this.speed; } break; case 2: if(this.y+30<300){ this.y+=this.speed; } break; case 3: if(this.x>0){ this.x-=this.speed; } break; } //改变方向,走50次，再改变方向 if(this.count>50){ this.direct=Math.round(Math.random()*3);//随机生成 0,1,2,3 this.count=0; } this.count++; //判断敌人坦克是否还活着 //if(this.tank.isLive==true){ //判断子弹是否已经死亡，如果死亡，则增加新的一颗子弹 if(this.bulletIsLive==false){ //增子弹,这是需要考虑当前这个敌人坦克的方向，在增加子弹 switch(this.direct){ case 0: qetBullet=new Bullet(this.x+9,this.y,this.direct,3,"enemy",this); break; case 1: qetBullet=new Bullet(this.x+30,this.y+9,this.direct,3,"enemy",this); break; case 2: qetBullet=new Bullet(this.x+9,this.y+30,this.direct,3,"enemy",this); break; case 3: //右 qetBullet=new Bullet(this.x,this.y+9,this.direct,3,"enemy",this); break; }</p><p> //把子弹添加到敌人子弹数组中 enemyBullets.push(qetBullet); //启动新子弹run var mytimer=window.setInterval("enemyBullets["+(enemyBullets.length-1)+"].run()",50); enemyBullets[enemyBullets.length-1].timer=mytimer;</p><p> this.bulletIsLive=true; } } //绘制坦克(敌人坦克和自己的坦克)function drawTank(tank){//说明所有的坦克都要isLive这个属性if(tank.isLive){//考虑方向switch(tank.direct){case 0: //上case 2:// 下//画出自己的坦克，使用前面的绘图技术//设置颜色cxt.fillStyle=tank.color[0];//韩老师使用 先死—>后活 (初学者最好用这个方法)//先画出左面的矩形cxt.fillRect(tank.x,tank.y,5,30);//画出右边的矩形(这时请大家思路->一定要一个参照点)cxt.fillRect(tank.x+15,tank.y,5,30);//画出中间矩形cxt.fillRect(tank.x+6,tank.y+5,8,20);//画出坦克的盖子cxt.fillStyle=tank.color[1];cxt.arc(tank.x+10,tank.y+15,4,0,360,true);cxt.fill();//画出炮筒(直线)cxt.strokeStyle=tank.color[1];//设置线条的宽度cxt.lineWidth=1.5;cxt.beginPath();cxt.moveTo(tank.x+10,tank.y+15);if(tank.direct==0){cxt.lineTo(tank.x+10,tank.y);}else if(tank.direct==2){cxt.lineTo(tank.x+10,tank.y+30);}cxt.closePath();cxt.stroke();break;case 1: //右和左case 3://画出自己的坦克，使用前面的绘图技术//设置颜色cxt.fillStyle=tank.color[0];//韩老师使用 先死—>后活 (初学者最好用这个方法)//先画出左面的矩形cxt.fillRect(tank.x,tank.y,30,5);//画出右边的矩形(这时请大家思路->一定要一个参照点)cxt.fillRect(tank.x,tank.y+15,30,5);//画出中间矩形cxt.fillRect(tank.x+5,tank.y+6,20,8);//画出坦克的盖子cxt.fillStyle=tank.color[1];cxt.arc(tank.x+15,tank.y+10,4,0,360,true);cxt.fill();//画出炮筒(直线)cxt.strokeStyle=tank.color[1];//设置线条的宽度cxt.lineWidth=1.5;cxt.beginPath();cxt.moveTo(tank.x+15,tank.y+10);//向右if(tank.direct==1){cxt.lineTo(tank.x+30,tank.y+10);}else if(tank.direct==3){ //向左cxt.lineTo(tank.x,tank.y+10);}cxt.closePath();cxt.stroke();break;}}}下午某时，天气晴，我在某地，想念你。
