html5 canvas 练习 坦克大战雏形 目前只能打炮
元旦加班，实在无聊。学习用CANVAS，写了个坦克大战的雏形。
JS的OOP方式写法 还不是很会，所以就直接写了。
大家瞧瞧吧 。本来还准备加上坦克大小 速度设置的。。无赖时间不多，所以就没写了
目前只在谷歌浏览器下运行
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>