测试--坦克大战

<!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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值