<!DOCTYPE html>
<html>
<head>
<meta http_equiv="content-type" content="text/html;charset=utf-8"/>
<style>
body{margin: 0;position: absolute;width: 100%;height: 100%}
canvas{display: block;margin: 20px auto;border: 2px solid #333}
</style>
<title>tank3.0</title>
<script>
var img_td1=new Image();
img_td1.src="tank_down.gif";
var img_tu1=new Image();
img_tu1.src="tank_up.gif";
var img_tl1=new Image();
img_tl1.src="tank_left.gif";
var img_tr1=new Image();
var w_1=60,h_1=60,d_1=0;
var tank1=new Tank(200,200,w_1,h_1,d_1,1,true);
var ud=false;
var dd=false;
var ld=false;
var rd=false;
img_tr1.src="tank_right.gif";
function init(){
ctx=document.getElementById('canvas').getContext('2d');
evListen();
setInterval(draw,16);
}
function evListen(){
document.addEventListener('keydown',function(e){
if(e.keyCode==68){rd=true;d_1=3;}
else if(e.keyCode==65){ld=true;d_1=2;}
else if(e.keyCode==87){ud=true;d_1=0;}
else if(e.keyCode==83){dd=true;d_1=1;}
},false);
document.addEventListener('keyup',function(e){
if(e.keyCode==68)rd=false;
else if(e.keyCode==65)ld=false;
else if(e.keyCode==87)ud=false;
else if(e.keyCode==83)dd=false;
},false);
}
function draw(){
tank1.drawTank();
}
//坦克类
function Tank(x,y,w,h,dir,style,alive){
var img_up=new Image();
var img_down=new Image();
var img_left=new Image();
var img_right=new Image();
switch (style){
case 0:
img_up.src="tank_up.gif";
img_down.src="tank_down.gif";
img_left.src="tank_left.gif";
img_right.src="tank_right.gif";
break;
case 1:
img_up.src="tank_up1.gif";
img_down.src="tank_down1.gif";
img_left.src="tank_left1.gif";
img_right.src="tank_right1.gif";
break;
}
this.drawTank=function drawTank(){
if(alive){
switch(dir){
default :
ctx.drawImage(img_up,x,y,w,h);
break;
case 0 :
ctx.drawImage(img_up,x,y,w,h);
break;
case 1 :
ctx.drawImage(img_down,x,y,w,h);
break;
case 2 :
ctx.drawImage(img_left,x,y,w,h);
break;
case 3 :
ctx.drawImage(img_right,x,y,w,h);
break;
}
}
}
}
onload=init;
</script>
</head>
<body>
<canvas id="canvas" width=800 height="600">不支持!</canvas>
</body>
</html>
<html>
<head>
<meta http_equiv="content-type" content="text/html;charset=utf-8"/>
<style>
body{margin: 0;position: absolute;width: 100%;height: 100%}
canvas{display: block;margin: 20px auto;border: 2px solid #333}
</style>
<title>tank3.0</title>
<script>
var img_td1=new Image();
img_td1.src="tank_down.gif";
var img_tu1=new Image();
img_tu1.src="tank_up.gif";
var img_tl1=new Image();
img_tl1.src="tank_left.gif";
var img_tr1=new Image();
var w_1=60,h_1=60,d_1=0;
var tank1=new Tank(200,200,w_1,h_1,d_1,1,true);
var ud=false;
var dd=false;
var ld=false;
var rd=false;
img_tr1.src="tank_right.gif";
function init(){
ctx=document.getElementById('canvas').getContext('2d');
evListen();
setInterval(draw,16);
}
function evListen(){
document.addEventListener('keydown',function(e){
if(e.keyCode==68){rd=true;d_1=3;}
else if(e.keyCode==65){ld=true;d_1=2;}
else if(e.keyCode==87){ud=true;d_1=0;}
else if(e.keyCode==83){dd=true;d_1=1;}
},false);
document.addEventListener('keyup',function(e){
if(e.keyCode==68)rd=false;
else if(e.keyCode==65)ld=false;
else if(e.keyCode==87)ud=false;
else if(e.keyCode==83)dd=false;
},false);
}
function draw(){
tank1.drawTank();
}
//坦克类
function Tank(x,y,w,h,dir,style,alive){
var img_up=new Image();
var img_down=new Image();
var img_left=new Image();
var img_right=new Image();
switch (style){
case 0:
img_up.src="tank_up.gif";
img_down.src="tank_down.gif";
img_left.src="tank_left.gif";
img_right.src="tank_right.gif";
break;
case 1:
img_up.src="tank_up1.gif";
img_down.src="tank_down1.gif";
img_left.src="tank_left1.gif";
img_right.src="tank_right1.gif";
break;
}
this.drawTank=function drawTank(){
if(alive){
switch(dir){
default :
ctx.drawImage(img_up,x,y,w,h);
break;
case 0 :
ctx.drawImage(img_up,x,y,w,h);
break;
case 1 :
ctx.drawImage(img_down,x,y,w,h);
break;
case 2 :
ctx.drawImage(img_left,x,y,w,h);
break;
case 3 :
ctx.drawImage(img_right,x,y,w,h);
break;
}
}
}
}
onload=init;
</script>
</head>
<body>
<canvas id="canvas" width=800 height="600">不支持!</canvas>
</body>
</html>
