html5 canvas 练习 坦克大战雏形 目前只能打炮
元旦加班，实在无聊。学习用CANVAS，写了个坦克大战的雏形。JS的OOP方式写法 还不是很会，所以就直接写了。
大家瞧瞧吧 。本来还准备加上坦克大小 速度设置的。。无赖时间不多，所以就没写了
目前只在谷歌浏览器下运行
<html> <head> <title>tank fighting</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content="swimming"> <meta name="Keywords" content="tank"> <meta name="Description" content="tank fight by html5"> </head> <body onkeydown="drawtank()"> <center> <canvas id="tankmap" width="800" height="500" style="border:1px solid #c3c3c3;"> </canvas> </center>x:<input type="text" id="tank_x"/>y:<input type="text" id="tank_y"/><!--<input type="button" value="set tank size" ><input type="text" id="tanksize" value="10"/><input type="button" value="set tank speed" ><input type="text" id="tankspeed" value="10"/>--><div>swimming 的 坦克大战雏形</div> <script type="text/javascript"> var c = document.getElementById("tankmap");var bulletsize=10;var bullettag=10;var gunsize=1;var gunlength=10;var gunway=38;var tankspeed=10; var tanksize=10;var tank_x=c.width/2;var tank_y=c.height/2;var bulletspeed=25; var cxt = c.getContext("2d");var guna=tank_x+tanksize/2;var gunb=tank_y-gunlength;var gunc=gunsize;var gund=gunlength;var bulleta=0;var bulletb=0;var bulletc=0;var bulletd=0; cxt.fillStyle = "#FF0000"; cxt.fillRect(tank_x, tank_y, tanksize, tanksize); cxt.fillRect(tank_x+tanksize/2, tank_y-gunlength, gunsize, gunlength); function drawtank(){ k = event.keyCode;cxt.fillStyle = "white";cxt.fillRect(tank_x, tank_y, tanksize, tanksize);cxt.fillRect(guna, gunb, gunc, gund);cxt.fillStyle = "red"; switch (k) { case 37:tank_x=tank_x-tankspeed;if(tank_x<=gunlength){tank_x=gunlength;}cxt.fillRect(tank_x, tank_y, tanksize, tanksize);cxt.fillRect(tank_x-gunlength, tank_y+tanksize/2, gunlength, gunsize);guna=tank_x-gunlength;gunb=tank_y+tanksize/2;gunc=gunlength;gund=gunsize;gunway=37; break; case 38:tank_y=tank_y-tankspeed;if(tank_y<=gunlength){tank_y=gunlength;}cxt.fillRect(tank_x, tank_y, tanksize, tanksize);cxt.fillRect(tank_x+tanksize/2, tank_y-gunlength, gunsize, gunlength);guna=tank_x+tanksize/2;gunb=tank_y-gunlength;gunc=gunsize;gund=gunlength;gunway=38; break; case 39:tank_x=tank_x+tankspeed;if(tank_x>=c.width-tanksize-gunlength){tank_x=c.width-tanksize-gunlength;}cxt.fillRect(tank_x, tank_y, tanksize, tanksize);cxt.fillRect(tank_x+tanksize, tank_y+tanksize/2, gunlength, gunsize);guna=tank_x+tanksize;gunb=tank_y+tanksize/2;gunc=gunlength;gund=gunsize;gunway=39; break; case 40:tank_y=tank_y+tankspeed;if(tank_y>=c.height-tanksize-gunlength){tank_y=c.height-tanksize-gunlength;}cxt.fillRect(tank_x, tank_y, tanksize, tanksize);cxt.fillRect(tank_x+tanksize/2, tank_y+gunlength, gunsize, gunlength);guna=tank_x+tanksize/2;gunb=tank_y+gunlength;gunc=gunsize;gund=gunlength;gunway=40; break;case 32:tankfire(gunway);break; }document.getElementById("tank_x").value=tank_x;document.getElementById("tank_y").value=tank_y; }var int=0;function tankfire(gunway){ cxt.fillStyle = "white"; cxt.fillRect(bulleta, bulletb, bulletc, bulletd); cxt.fillStyle = "#FF0000";g =gunway;window.clearInterval(int);cxt.fillStyle = "red";switch (gunway) { case 37:cxt.fillRect(tank_x, tank_y, tanksize, tanksize);cxt.fillRect(tank_x-gunlength, tank_y+tanksize/2, gunlength, gunsize);cxt.fillRect(tank_x-gunlength-bulletsize-bullettag, tank_y+tanksize/2-bulletsize/2, bulletsize, bulletsize);bulleta=tank_x-gunlength-bulletsize-bullettag;bulletb=tank_y+tanksize/2-bulletsize/2;bulletc=bulletsize;bulletd=bulletsize;int=window.setInterval("bullletmove(g,bulleta,bulletb,bulletc,bulletd)", 500); break; case 38:cxt.fillRect(tank_x, tank_y, tanksize, tanksize);cxt.fillRect(tank_x+tanksize/2, tank_y-gunlength, gunsize, gunlength);cxt.fillRect(tank_x+tanksize/2-bulletsize/2, tank_y-gunlength-bulletsize-bullettag, bulletsize, bulletsize);bulleta=tank_x+tanksize/2-bulletsize/2;bulletb=tank_y-gunlength-bulletsize-bullettag;bulletc=bulletsize;bulletd=bulletsize;int=window.setInterval("bullletmove(g,bulleta,bulletb,bulletc,bulletd)", 500); break; case 39:cxt.fillRect(tank_x, tank_y, tanksize, tanksize);cxt.fillRect(tank_x+tanksize, tank_y+tanksize/2, gunlength, gunsize);cxt.fillRect(tank_x+tanksize+bulletsize+bullettag, tank_y+tanksize/2-bulletsize/2, bulletsize, bulletsize); bulleta=tank_x+tanksize+bulletsize+bullettag;bulletb=tank_y+tanksize/2-bulletsize/2;bulletc=bulletsize;bulletd=bulletsize;int=window.setInterval("bullletmove(g,bulleta,bulletb,bulletc,bulletd)", 500); break; case 40:cxt.fillRect(tank_x, tank_y, tanksize, tanksize);cxt.fillRect(tank_x+tanksize/2, tank_y+gunlength, gunsize, gunlength);cxt.fillRect(tank_x+tanksize/2-bulletsize/2, tank_y+gunlength+bulletsize+bullettag, bulletsize, bulletsize); bulleta=tank_x+tanksize/2-bulletsize/2;bulletb=tank_y+gunlength+bulletsize+bullettag;bulletc=bulletsize;bulletd=bulletsize;int=window.setInterval("bullletmove(g,bulleta,bulletb,bulletc,bulletd)", 500); break; }}function bullletmove(g,a,b,c,d){//alert(gunway);cxt.fillStyle = "white";cxt.fillRect(a,b,c,d);cxt.fillStyle = "red";switch (g) { case 37:cxt.fillRect(a-bulletspeed,b,c,d);bulleta=a-bulletspeed; break; case 38:cxt.fillRect(a,b-bulletspeed,c,d);bulletb=b-bulletspeed; break; case 39:cxt.fillRect(a+bulletspeed,b,c,d);bulleta=a+bulletspeed; break; case 40:cxt.fillRect(a,b+bulletspeed,c,d);bulletb=b+bulletspeed; break; }}function settanksize(){cxt.fillStyle = "white";cxt.fillRect(tank_x, tank_y, tanksize, tanksize);cxt.fillRect(tank_x+tanksize/2, tank_y-gunlength, gunsize, gunlength);tanksize=document.getElementById("tanksize").value;cxt.fillStyle = "#FF0000";cxt.fillRect(tank_x, tank_y, tanksize, tanksize);cxt.fillRect(tank_x+tanksize/2, tank_y-gunlength, gunsize, gunlength);}function settankspeed(){tankspeed=parseInt(document.getElementById("tankspeed").value);} </script> </body></html>
页:
[1]