在html中绘图，先实例化一个坦克类new Hero(140,140,0)，然后绘画出一个坦克drawTank(hero)，然后加载一个接受用户按键的函数getCommand()，当用户按下不同的键时，重新绘制出不同的坦克，从而实现坦克的移动。
成都网站设计、成都做网站的开发，更需要了解用户，从用户角度来建设网站，获得较好的用户体验。创新互联建站多年互联网经验，见的多，沟通容易、能帮助客户提出的运营建议。作为成都一家网络公司，打造的就是网站建设产品直销的概念。选择创新互联建站，不只是建站，我们把建站作为产品，不断的更新、完善，让每位来访用户感受到浩方产品的价值服务。
!DOCTYPE html
html
head
meta charset="utf-8"/
/head
body onkeydown="getCommand();"
h1hmtl5-经典的坦克大战/h1
!--坦克大战的战场--
canvas id="tankMap" width="400px" height="300px"
style="background-color:black"/canvas
!--把tankGames.js引入到本页面--
传智播客+韩顺平+HTML5游戏-坦克大战06+阶段小结.wmv种子下载地址：
thunder://QUFodHRwOi8vYWlrYW5keS5vcmcv5Lyg5pm65pKt5a6iK+mfqemhuuW5sytIVE1MNea4uOaIjy3lnablhYvlpKfmiJgwNivpmLbmrrXlsI/nu5Mud212P2ZpZD02dmV6Y1IwbmxheGxkSU8yZGpQKkhvaWhWOXdBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBJm1pZD02NjYmdGhyZXNob2xkPTE1MCZ0aWQ9RTUxREQ3QkMwMUE5MjgyQkE3N0VDMUMzQkVCM0NCRjcmc3JjaWQ9MTIwJnZlcm5vPTFaWg==
记得采纳
script type="text/javascript" src="tankGame7.js"/script
script type="text/javascript"
//得到画布
var canvas1=document.getElementById("tankMap");
//得到绘图上下文(你可以理解是画笔)
var cxt=canvas1.getContext("2d");
//我的坦克 hero
//方向
var hero=new Hero(140,140,0,heroColor);
//定义子弹数组
var heroBullets=new Array();
//定义敌人的坦克(敌人的坦克有多少? 思路 : 是单个单个的定义，还是放在数组中?)
var enemyTanks=new Array();
//定义敌人子弹的数组
var enemyBullets=new Array();
//定义一个炸弹数组(可以存放很多炸弹,)
var bombs=new Array();
//先死后活 ，定3个，后面我们把敌人坦克的数量，作出变量
//0-上, 1-右, 2-下 3-左
for(var i=0;i3;i++){
//创建一个坦克
var enemyTank=new EnemyTank((i+1)*50,0,2,enmeyColor);
//把这个坦克放入数组
enemyTanks[i]=enemyTank;
//启动这个敌人的坦克
window.setInterval("enemyTanks["+i+"].run()",50);
//当创建敌人坦克时就分配子弹
var eb=new Bullet(enemyTanks[i].x+9,enemyTanks[i].y+30,2,1.2,"enemy",enemyTanks[i]);
enemyBullets[i]=eb;
//启动该子弹
var ettimer=window.setInterval("enemyBullets["+i+"].run()",50);
enemyBullets[i].timer=ettimer;
}
//先调用一次
flashTankMap();
//专门写一个函数，用于定时刷新我们的作战区，把要在作战区出现的元素(自己坦克，敌人坦克，子弹，炸弹，
//障碍物...)-游戏思想
function flashTankMap(){
//把画布清理
cxt.clearRect(0,0,400,300);
//我的坦克
drawTank(hero);
//画出自己的子弹
//子弹飞效果是怎么出现的?[答 ： 首先我们应该每隔一定时间(setInterval)就去刷新作战区,如果在刷新的时候，子弹坐标变换了，给人的感觉就是子弹在飞!]
drawHeroBullet();
//敌人的坦克
//判断一下敌人坦克是否击中
isHitEnemyTank();
drawEnemyBomb();
drawEnemyBullet();
//画出所有敌人坦克
for(var i=0;i3;i++){
drawTank(enemyTanks[i]);
}
}
//这是一个接受用户按键函数
function getCommand(){
//我怎么知道，玩家按下的是什么键
//说明当按下键后 事件---event对象-----事件处理函数()
var code=event.keyCode;//对应字母的ascii码-我们看码表
switch(code){
case 87://上
hero.moveUp();
break;
case 68:
hero.moveRight();
break;
case 83:
hero.moveDown();
break;
case 65:
hero.moveLeft();
break;
case 74:
hero.shotEnemy();
break;
}
//触发这个函数 flashTankMap();
flashTankMap();
//重新绘制所有的敌人的坦克.你可以在这里写代码(思想,我们干脆些一个函数，专门用于定时刷新我们的画布[作战区])
}
//每隔100毫秒去刷新一次作战区
window.setInterval("flashTankMap()",100);
/script
HTML5基础知识网站
1.W3C
全称“W3School”，简直是学习网站中的“战斗机”，每一节都有学生时代老师般的“板书”，丰富的实例展示，还有工具书、小测验等提升工具，私教般的存在!
2.Dive into HTML5
这个网站几乎都是关于HTML5的文档，讲一些很基础的知识，简洁清新。如果想学习HTML5的同时提高英语阅读能力，这个网站是极好的。类似的英文网站还有woorkup。
3.h5之家
除了丰富且与时俱进的教程，这个网站还有很多关于HTML5业界的独特见解，闲暇时候看看，拓展知识又能在人前装X，这样的网站哪里找!
HTML5案例网站
1.HTML5xCSS3
拥有超丰富的HTML5案例和模板，随便点开一个案例都好看到让人震惊。里面的全部都是HTML5响应式网站哟!
2.360html5基地
350旗下的HTML5作品展示网站，大部分是HTML5游戏展示，可爱有趣。比如打开一个割绳子的HTML5展示：
3.HTML5 Games
相对360来说更丰富的HTML5游戏资源，玩着玩着技能激发设计灵感呢!
HTML5技术网站
1.whatwg
网络超文本应用技术工作小组(Web Hypertext Application Technology Working Group)的博客，里面一些文章能让人受益匪浅。
2.HTML5医生
一些关于html5语义及如何使用它们的文章，医生会定时回答网友们的问题。
3.HTML5中国
一个真的能手把手教你6小时做一个HTML5坦克大战游戏的网站，还有各类HTML5的资讯、沟通交流论坛等。
HTML5测试网站
1.HTMLDemos
测试HTML5标签在各浏览器的兼容性，还能查看各种HTML5的标准Demo演示。
2.html5 test
能为浏览器对HTML5的兼容性打分，可以知道你当前的浏览器对HTML5的支持情况如何，各种标签和组件的支持情况。
所以，网站已经分享给你们了，如果真心要学习此项技能，快去实践吧!
