网页版坦克大战的的设计与开发.docVIP

网页版坦克大战的设计与开发 HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改，HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。从如今层出不穷的移动应用就知道，在这个智能手机和将平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。HTML5的优点主要在于，这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，而如今的趋势就是在移动终端上的游戏是比较流行的，针对此现象，利用HTML5来编写经典游戏，坦克大战。 !DOCTYPE html html head meta charset=utf-8/ script src=tankGame.js/script /head body onkeydown=changeDirect() canvas id=tankMap width=500px height=300px style=background-color:black /canvas span id=aa/span /body script //开始画出我们的tanke var canvas = document.getElementById(tankMap); //相当于获得画笔 var ctx = canvas.getContext(2d); //定义炸弹 var bombs = new Array(); var hero = new Hero(140,90,0,heroColor); var enemyTanks = new Array(); //敌人的子弹数组 var enemyBullets = new Array(); for(var i=0;i3;i++){ var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor); enemyTanks[i] = enemyTank; //drawTank(enemyTanks[i]); //让敌人的坦克动起来 var timer = window.setInterval(enemyTanks[+i+].run(),50); enemyTanks[i].timer = timer; //让敌人发射子弹 var enemyBullet = new Bullet(enemyTanks[i].x+9,enemyTanks[i].y+30,enemyTanks[i].direct,enemyTanks[i],enemy); enemyBullets.push(enemyBullet); enemyBullets[i].timer = window.setInterval(enemyBullets[+i+].run(),50); } //定义子弹数组 var heroBullets = new Array(); var heroBullet = null; if(hero.isLive){ drawTank(hero); } flashMap(); function flashMap(){ ctx.clearRect(0,0,500,300); isHitHeroTank(enemyBullets,hero); if(hero.isLive){ drawTank(hero); } isHitEnemyTank(heroBullets,enemyTanks); //画出自己坦克的子弹 drawHeroBullet(heroBullets); //画出敌人坦克的子弹 drawEnemyBullet(enemyBullets,enemyTanks); for(var i=0;i3;i++){ if(enemyTanks[i].isLive){ drawTank(enemyTanks[i]); } } //画出炸弹 for(var k=0;kbombs.length;k++){ var img = new Image(); img.src = bomb_1.gif; var x = bombs[k].x; var y = bombs[k].y; ctx.drawImage(img,x,y,30,30