html5 canvas 练习坦克大战雏形目前只能打炮

xwm111 2011-01-02

元旦加班，实在无聊。学习用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" onclick="settanksize()"><input type="text" id="tanksize" value="10"/>
		<input type="button" value="set tank speed" onclick="settankspeed()"><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>