Home > Developer > Web Develop
HTML5制作的坦克游戏 本游戏是基于HTML5开发的 网页游戏，js,css辅助开发The source code is as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> Tank Wars </title>
<body onkeydown= "GetCommand (); >
<canvas id= "Tankmap" width= "600px" height= "500px"
Style= "Background-color:black" ></canvas>
<br/>
<span id= "BB" text-align:center> Friendly tip: control: W S A D J (cannon) 1 Resurrection 2 increase enemy tank </span>
<script type= "Text/javascript" src= "Mytank9.js" ></script>
<script type= "Text/javascript" >
var Canvas1=document.getelementbyid ("Tankmap");
var Cxt=canvas1.getcontext ("2d");
var hero=new hero (240,300,0,herocolor);
var herobullets=new Array ();
var bombs=new Array ();
var enemybullets=new Array ();
var enemytanks=new Array (); To define an empty array
for (Var i=0;i<6;i++) {
Create a tank
var enemytank=new enemtank ((i+1) *70,30,2,enemycolor);
Put the tank into the array
Enemytanks[i]=enemytank;
Start enemy tank (equivalent to boot thread)
Window.setinterval ("enemytanks[" +i+ "].run ()", "50");
//当创建敌人坦克时就分配×××var eb=new Bullet(enemyTanks[i].x+19,enemyTanks[i].y+60,2,5,"enemy",enemyTanks[i]);enemyBullets[i]=eb;//启动该×××var ettimer=window.setInterval("enemyBullets["+i+"].run()",50);enemyBullets[i].timer=ettimer;
}//for Create enemy tanks and XXX etc
Call a refresh function first
Flashtankmap ();
A function dedicated to periodically refreshing the canvas (the elements that appear in the battle zone are refreshed in their tanks)
Enemy Tank xxxxxx Obstacle lawn
function Flashtankmap () {
Clean up the canvas
Cxt.clearrect (0,0,600,500);
if(hero.isLive==true){ //我的坦克hero drawTank(hero); }else{ hero.x=-100; hero.y=-100; } //画出我的××× drawHeroBullet(); //我的×××射击函数 isHitEenemyTank(); //画出爆炸效果 drawEnemyBomb(); //敌人坦克射击我的函数 isHitHeroTank(); //画出敌人的坦克 for(var i=0;i<enemyTanks.length;i++){ drawTank(enemyTanks[i]); } //画出敌人坦克的××× drawEnemyBullet();
}
function to receive user keys
function GetCommand () {
var Code=event.keycode; The corresponding ASCII code
Switch (code) {
Case 87://Up
Hero.moveup ();
Break
Case 68://Right
Hero.moveright ();
Break
Case 83://Down
Hero.movedown ();
Break
Case 65://Left
Hero.moveleft ();
Break
Case 74:
Hero.shotenemy ();
Break
Case 49://press 1 to revive my tank
Hero.islive=true;
hero.x=240;
hero.y=300;
Break
Case 50://press 2 to increase the enemy's tank
Foundenemytank (enemytanks.length);
Break
}
//触发刷新作战区的函数flashTankMap();
}
Refreshed every 200 milliseconds for the war zone.
Window.setinterval ("Flashtankmap ();", 200);
</script>
</body>
：
HTML5-Made tank game
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
