tank01

来源：互联网发布：mac 快递打印编辑：程序博客网时间：2024/06/08 17:55

<html>
   <head>
       <title>tank game</title>
       <script>
           var canvas,context;
           var game,tank,shot;
           var tank_x=70,tank_y=60,shot_x,shot_y;
           var bearing = "up";
           window.onload = function(){
               //alert("onload");
               game = game();
               //alert(game);
               //alert(this.tank);
               game.init();
               tank = tank();
               shot = shot();

               //tank.drawTankLeft();
               //game.drawTank(150,60);
               tank.drawTank(tank_x,tank_y);
               //alert("tank.drawTanDown();");
               //tank.drawTanDown();
               tank.move();
               //shot.draw();
           }

           function game(){
               function init(){
                   //alert("init");
                   canvas = document.getElementById("canvas");
                   //alert("canvas----"+canvas);
                   context = canvas.getContext("2d");
                   //alert("context----"+context);
                   //drawTank(70,60);
               }

               return{
                   init:init,
               };

           };
           function tank(){
               this.drawTank = function(x,y){
                   tank_x = x;
                   tank_y = y;
                   //alert("tanke_x----"+tank_x);
                   //alert("tanke_y----"+tank_y);
                   //alert("drawTank()");


                   context.fillRect(x-10,y-5,10,30);
                   context.fillRect(x,y,15,20);
                   context.fillRect(x+10,y-5,10,30);
                   context.fillRect(x+2.5,y-10,5,10);
                   /*
                   context.fillRect(x-10,y-5,10,30);
                   context.fillRect(x,y,15,20);
                   context.fillRect(x+10,y-5,10,30);
                   context.fillRect(x+2.5,y+20,5,10);
                   */

               },
               //function move(){
                   //alert("move()');
               //}
               this.move = function(direction){
                   //alert("move_x()");
                   if(direction=="left"){
                       tank_x = tank_x - 3;
                   }
                   if(direction=="right"){
                       tank_x = tank_x + 3;
                   }

                   if(direction=="up"){
                       tank_y = tank_y - 3;
                   }
                   if(direction=="down"){
                       tank_y = tank_y + 3;
                   }
                   //alert("tank_x---"+tank_x);
               },
               this.drawTankLeft = function(){
                   //alert("drawTankLeft");
                   context.fillRect(tank_x-6,tank_y-10,30,10); //tank_x,tank_y;
                   context.fillRect(tank_x,tank_y,20,15);
                   context.fillRect(tank_x-6,tank_y+10,30,10);
                   context.fillRect(tank_x-10,tank_y+2.5,10,5);

               },/*
               this.drawTankLeft = function(){
                   //alert("drawTankLeft");
                   context.fillRect(tank_x-6,tank_y-10,30,10); //tank_x,tank_y;
                   context.fillRect(tank_x,tank_y,20,15);
                   context.fillRect(tank_x-6,tank_y+10,30,10);
                   context.fillRect(tank_x-10,tank_y+2.5,10,5);
                   //context.fillRect(tank_x+20,tank_y+2.5,10,5);

               },*/
               this.drawTankRight = function(){
                   //alert("drawTankLeft");
                   context.fillRect(tank_x-6,tank_y-10,30,10); //tank_x,tank_y;
                   context.fillRect(tank_x,tank_y,20,15);
                   context.fillRect(tank_x-6,tank_y+10,30,10);
                   //context.fillRect(tank_x-10,tank_y+2.5,10,5);
                   context.fillRect(tank_x+20,tank_y+2.5,10,5);

               }
               this.drawTankRight = function(){
                   //alert("drawTankLeft");
                   context.fillRect(tank_x-6,tank_y-10,30,10); //tank_x,tank_y;
                   context.fillRect(tank_x,tank_y,20,15);
                   context.fillRect(tank_x-6,tank_y+10,30,10);
                   //context.fillRect(tank_x-10,tank_y+2.5,10,5);
                   context.fillRect(tank_x+20,tank_y+2.5,10,5);

               },
               this.drawTankRight = function(){
                   //alert("drawTankLeft");
                   context.fillRect(tank_x-6,tank_y-10,30,10); //tank_x,tank_y;
                   context.fillRect(tank_x,tank_y,20,15);
                   context.fillRect(tank_x-6,tank_y+10,30,10);
                   //context.fillRect(tank_x-10,tank_y+2.5,10,5);
                   context.fillRect(tank_x+20,tank_y+2.5,10,5);

               },
               this.drawTanDown = function(){
                   //alert("drawTanDown()");
                   context.fillRect(tank_x-10,tank_y-5,10,30);
                   context.fillRect(tank_x,tank_y,15,20);
                   context.fillRect(tank_x+10,tank_y-5,10,30);
                   context.fillRect(tank_x+2.5,tank_y+20,5,10);
               }

               return{drawTank:drawTank,move:move,drawTankLeft:drawTankLeft,drawTankRight:drawTankRight,drawTanDown:drawTanDown,};

           } //end class tank

           function shot(){
               //alert(tank_x);

               this.draw = function(x,y){
                   //alert("draw");

                   //alert("shot_y---"+shot_y);
                   context.beginPath()
                   context.arc(shot_x+5,shot_y-13,3,0,Math.PI*2,true);
                   context.closePath();
                   context.fill();

               },
               this.move = function(){
                   //alert("shot.move()");
                   shot_y = shot_y-3;
                   //alert(shot_x);
               }
               return {draw:draw,move:move};

           }


           document.onkeydown =function(e){
               //alert("onkeydown");
               //alert(e.keyCode);
               if(e.keyCode==37){

                   tank.move("left");
                   bearing = "left";
                   //alert(bearing);
                   //context.clearRect(0,0,400,500);
                   //tank.drawTank(tank_x,tank_y);
                   //tank.drawTankLeft();
               }
               if(e.keyCode==39){
                   tank.move("right");
                   bearing = "right";
                   //alert(bearing);
                   //context.clearRect(0,0,400,500);
                   //tank.drawTank(tank_x,tank_y);
                   //tank.drawTankRight();
               }
               if(e.keyCode==38){
                   tank.move("up");
                   bearing = "up";
                   //alert(bearing);
                   //context.clearRect(0,0,400,500);
                   tank.drawTank(tank_x,tank_y);
               }
               if(e.keyCode==40){
                   tank.move("down");
                   bearing = "down";
                   //alert(bearing);
                   //context.clearRect(0,0,400,500);
                   //tank.drawTank(tank_x,tank_y);
                   tank.drawTanDown();
               }
               if(e.keyCode == 32){
                   //alert("32---");
                   shot_x = tank_x;
                   //alert("shot_x"+shot_x);
                   shot_y = tank_y;
                   shot.draw(shot_x,shot_y);
                   //shot.move();
               }
           }
           setInterval(function(){
               //alert("aaa");
               context.clearRect(0,0,400,500);
               if(bearing == 'left'){
                   tank.drawTankLeft();
               }else if(bearing == 'right'){
                   tank.drawTankRight();
               }else if(bearing == 'up'){
                   tank.drawTank(tank_x,tank_y);
               }
               shot.move();
               //alert("b");
               shot.draw();
           },1E3);
       </script>
   </head>

   <body>
       <canvas id = "canvas" width = "400" height = "500" style = "border:1px solid red"></canvas>
   </body>
</html>

0 0