坦克大战html5的简单介绍

html5坦克大战怎么实现多人对战

在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种子下载地址有么？好东西大家分享

传智播客+韩顺平+HTML5游戏-坦克大战06+阶段小结.wmv种子下载地址：

thunder://QUFodHRwOi8vYWlrYW5keS5vcmcv5Lyg5pm65pKt5a6iK+mfqemhuuW5sytIVE1MNea4uOaIjy3lnablhYvlpKfmiJgwNivpmLbmrrXlsI/nu5Mud212P2ZpZD02dmV6Y1IwbmxheGxkSU8yZGpQKkhvaWhWOXdBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBJm1pZD02NjYmdGhyZXNob2xkPTE1MCZ0aWQ9RTUxREQ3QkMwMUE5MjgyQkE3N0VDMUMzQkVCM0NCRjcmc3JjaWQ9MTIwJnZlcm5vPTFaWg==

记得采纳

html5坦克大战画障碍物思想

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技术，有这些网站就够了

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的支持情况如何，各种标签和组件的支持情况。

所以，网站已经分享给你们了，如果真心要学习此项技能，快去实践吧!