<!DOCTYPEhtml>
<html>
<head>
<title>测试--坦克大战</title>
</head>
<styletype="text/css">
img{width:50px; height: 50px; position:absolute; }
div{width: 10px; height: 10px; top:25px; left:25px; position: absolute;background-color: red;}
</style>
<script type="text/javascript"src="js/jquery-1.3.1.js" ></script>
<scripttype="text/javascript">
$(function () {
//var left=0;
//var top=0;
//var pdleft=20;
//var pdtop=20;
vart={"left":0,"top":0,"pdleft":20,"pdtop":20,"fx":"up"}
$(document).keyup(function (event) {
//alert("你刚刚按了我一下...");
console.log(event.keyCode);
//if(event.keyCode==39){
//alert("你按了右方位键...")
//}
//动态修改html属性
switch(event.keyCode){
case 13: //enter键开炮
dd();
break;
case 37: //左边
t.left-=50;
t.pdleft-=50;
$("img").attr("src","img/1_03.png");
$("img").css("left",t.left);
$("div").css("left",t.pdleft);
t.fx="left";
break;
case 38://上边
t.top-=50;
t.pdtop-=50;
$("img").attr("src","img/1_01.png");
$("img").css("top",t.top);
$("div").css("top",t.pdtop);
t.fx="up";
break;
case 39://右边
t.left+=50;
t.pdleft+=50;
$("img").attr("src","img/1_04.png");
$("img").css("left",t.left);
$("div").css("left",t.pdleft);
t.fx="right";
break;
case 40://下边
t.top+=50;
t.pdtop+=50;
//alert("按了一下下键");
$("img").attr("src","img/1_02.png");
$("img").css("top",t.top);
$("div").css("top",t.pdtop);
t.fx="down";
break;
}
})
function dd(){
if(t.fx=="up"){
$("div").animate({top:"-=1000"},500,function () {
$("div").animate({top:"+=1000"},0)
});
}
if(t.fx=="down"){
$("div").animate({top:"+=1000"},500,function () {
$("div").animate({top:"-=1000"},0)
});
}
if(t.fx=="left"){
$("div").animate({left:"-=1000"},500,function () {
$("div").animate({left:"+=1000"},0)
});
}
if(t.fx=="right"){
$("div").animate({left:"+=1000"},500,function () {
$("div").animate({left:"-=1000"},0)
});
}
}
})
</script>
<body>
<img src="img/1_01.png" />
<div></div>
</body>
</html>