Xiaoqiang's HTML5 mobile development road (8) – Tank Battle Game 2-H5 Tutorial-php.cn

In the previous article, we have drawn our own tank and can control its movement. Let’s continue the previous article to implement our tank battle game.

1. Separate JS files

Using the idea of OO, we have encapsulated the tank and also encapsulated the painted tank. Next, we will extract these two objects to the outside. js file, the file content is as follows:

//定义一个Hero类(后面还要改进）  
//x表示坦克的横坐标  
//y表示纵坐标  
//direct表示方向  
function Hero(x,y,direct){  
    this.x=x;  
    this.y=y;  
    this.speed=1;  
    this.direct=direct;  
    //上移  
    this.moveUp=function(){  
        this.y-=this.speed;  
        this.direct=0;  
    }  
    //右移  
    this.moveRight=function(){  
        this.x+=this.speed;  
        this.direct=1;  
    }  
    //下移  
    this.moveDown=function(){  
        this.y+=this.speed;  
        this.direct=2;  
    }  
    //左移  
    this.moveLeft=function(){  
        this.x-=this.speed;  
        this.direct=3;  
    }  
}  
  
    //绘制坦克  
function drawTank(tank){  
    //考虑方向  
    switch(tank.direct){  
        case 0:     //向上  
        case 2:     //向下  
            //设置颜色  
            cxt.fillStyle="#BA9658";  
            //左边的矩形  
            cxt.fillRect(tank.x,tank.y,5,30);  
            //右边的矩形  
            cxt.fillRect(tank.x+17,tank.y,5,30);  
            //画中间的矩形  
            cxt.fillRect(tank.x+6,tank.y+5,10,20);  
            //画出坦克的盖子  
            cxt.fillStyle="#FEF26E";  
            cxt.arc(tank.x+11,tank.y+15,5,0,Math.PI*2,true);  
            cxt.fill();  
            //画出炮筒  
            cxt.strokeStyle="#FEF26E";  
            cxt.lineWidth=1.5;  
            cxt.beginPath();  
            cxt.moveTo(tank.x+11,tank.y+15);  
            if(tank.direct==0){         //只是炮筒的方向不同  
                cxt.lineTo(tank.x+11,tank.y);  
            }else{  
                cxt.lineTo(tank.x+11,tank.y+30);  
            }  
            cxt.closePath();  
            cxt.stroke();  
            break;  
        case 1:  
        case 3:  
            //设置颜色  
            cxt.fillStyle="#BA9658";  
            //上边的矩形  
            cxt.fillRect(tank.x-4,tank.y+4,30,5);  
            //下边的矩形  
            cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
            //画中间的矩形  
            cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
            //画出坦克的盖子  
            cxt.fillStyle="#FEF26E";  
            cxt.arc(tank.x+15-4,tank.y+11+4,5,0,Math.PI*2,true);  
            cxt.fill();  
            //画出炮筒  
            cxt.strokeStyle="#FEF26E";  
            cxt.lineWidth=1.5;  
            cxt.beginPath();  
            cxt.moveTo(tank.x+15-4,tank.y+11+4);  
            if(tank.direct==1){         //只是炮筒的方向不同  
                cxt.lineTo(tank.x+30-4,tank.y+11+4);  
            }else{  
                cxt.lineTo(tank.x-4,tank.y+11+4);  
            }  
            cxt.closePath();  
            cxt.stroke();  
            break;    
    }  
      
}

Copy after login

There is a small problem in the previous article, thanks to Mark_Lee for the reminder.

//画出坦克的盖子  
cxt.fillStyle="#FEF26E";  
cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  
cxt.fill();

Copy after login

The tank cover painted here is not round. You can refer to: http://www.w3school.com.cn/html5/canvas_arc.asp

Xiaoqiangs HTML5 mobile development road (8) – Tank Battle Game 2

Okay, now the content in our html has become much clearer. The content in the html is as follows:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8"/>  
</head>  
<body onkeydown="getCommand();">  
<h1>html5-坦克大战</h1>  
<!--坦克大战的战场-->  
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>  
<!--将tankGame04.js引入-->  
<script type="text/javascript" src="tankGame04.js"></script>  
<script type="text/javascript">  
  
  
    //得到画布  
    var canvas1 = document.getElementById("tankMap");  
    //得到绘图上下文  
    var cxt = canvas1.getContext("2d");  
      
    //我的tank  
    //规定0向上、1向右、2向下、3向左  
    var hero = new Hero(40,40,0);  
    drawTank(hero);  
  
      
    //接收用户按键的函数  
    function getCommand(){  
        var code = event.keyCode;  //键盘上字幕的ASCII码  
        switch(code){  
            case 87:  
                hero.moveUp();  
                break;  
            case 68:  
                hero.moveRight();  
                break;  
            case 83:  
                hero.moveDown();  
                break;  
            case 65:  
                hero.moveLeft();  
                break;  
        }  
        //把画布清理  
        cxt.clearRect(0,0,400,300);  
        //重新绘制  
        drawTank(hero);  
    }  
</script>  
</body>  
</html>

Copy after login

2. Draw the enemy tank

Many friends may have ideas now. Isn’t this simple? When drawing an enemy tank, wouldn't it be better to create a new function and write it again after imitating your own tank class? Some friends disagree with this method and say: Since they are all tanks, we don’t need to write them. Wouldn’t it be over if we directly create tank instances? The methods of the first friend and the second friend seem to be object-oriented but are not. When making this kind of game, if we do not use object-oriented thinking to implement it, it can be implemented, but it will be very complicated.

Let’s think about it this way. There are definitely differences between our tanks and enemy tanks, and they cannot be classified into the same category. For example, they fire different bullets, have different colors, etc. But the two have something in common (both are tanks). Should we abstract this part? Yes, we first abstract a Tank class, and then inherit this Tank class respectively. Are you kidding? This is not Java language, this is JavaScript scripting language. Where does the inheritance come from? Haha, we can use object impersonation in JavaScript. Object impersonation is a method for JavaScript and ECMAScript to implement inheritance. Before learning object impersonation to implement inheritance, we must first understand the use of the keyword this

function  classA(color){  
  this.color = color;  
  this.show = function(){alert(this.color);}  
}  
/* 
   Note: 
     1> this 代表的是classA函数所构建的对象，而非函数classA对象本身这样说主要是为了避免（function is object）的影响; 
     2> 在构建classA对象时，是通过this来初始化的属性和方法的，如果用classB的this去冒充classA的this，那么就实现了简单的继承了 
*/

Copy after login

The principle of object impersonation: function classA Initialize properties and methods through this. If you use this of function classB to pretend to be this of classA to execute, classB will have the properties and methods of classA.

Okay, Now we use our own tank and the enemy's tank object to pretend to be a tank, haha.

//定义一个Tank类（基类）  
function Tank(x,y,direct,color){  
    this.x=x;  
    this.y=y;  
    this.speed=1;  
    this.direct=direct;  
    this.color=color;  
    //上移  
    this.moveUp=function(){  
        this.y-=this.speed;  
        this.direct=0;  
    }  
    //右移  
    this.moveRight=function(){  
        this.x+=this.speed;  
        this.direct=1;  
    }  
    //下移  
    this.moveDown=function(){  
        this.y+=this.speed;  
        this.direct=2;  
    }  
    //左移  
    this.moveLeft=function(){  
        this.x-=this.speed;  
        this.direct=3;  
    }  
}  
  
//定义一个Hero类  
function Hero(x,y,direct,color){  
    //下面两句话的作用是通过对象冒充达到继承的效果  
    this.tank=Tank;  
    this.tank(x,y,direct,color);  
}  
  
//定义一个EnemyTank类  
function EnemyTank(x,y,direct,color){  
    this.tank=Tank;  
    this.tank(x,y,direct,color);  
}

Copy after login

In this way, we have defined our own tank and the enemy's tank, so do we need to change the drawTank(tank) for drawing the tank? Because a Tank is drawn, there is no need to change it. Haha, this is object-oriented polymorphism.

Create tank objects now!

//我的tank  
//规定0向上、1向右、2向下、3向左  
var hero=new Hero(40,40,0,heroColor);  
//敌人的tank  
var enemyTanks=new Array();  
for(var i=0;i<3;i++){  
    var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);  
    enemyTanks[i]=enemyTank;      
}

Copy after login

The complete code is as follows:

##tankGame05.js

//为了编程方便，我们定义两个颜色数组  
var heroColor=new Array("#BA9658","#FEF26E");  
var enemyColor=new Array("#00A2B5","#00FEFE");  
  
//定义一个Tank类（基类）  
function Tank(x,y,direct,color){  
    this.x=x;  
    this.y=y;  
    this.speed=1;  
    this.direct=direct;  
    this.color=color;  
    //上移  
    this.moveUp=function(){  
        this.y-=this.speed;  
        this.direct=0;  
    }  
    //右移  
    this.moveRight=function(){  
        this.x+=this.speed;  
        this.direct=1;  
    }  
    //下移  
    this.moveDown=function(){  
        this.y+=this.speed;  
        this.direct=2;  
    }  
    //左移  
    this.moveLeft=function(){  
        this.x-=this.speed;  
        this.direct=3;  
    }  
}  
  
//定义一个Hero类  
function Hero(x,y,direct,color){  
    //下面两句话的作用是通过对象冒充达到继承的效果  
    this.tank=Tank;  
    this.tank(x,y,direct,color);  
}  
  
//定义一个EnemyTank类  
function EnemyTank(x,y,direct,color){  
    this.tank=Tank;  
    this.tank(x,y,direct,color);  
}  
  
    //绘制坦克  
function drawTank(tank){  
    //考虑方向  
    switch(tank.direct){  
        case 0:     //向上  
        case 2:     //向下  
            //设置颜色  
            cxt.fillStyle=tank.color[0];  
            //左边的矩形  
            cxt.fillRect(tank.x,tank.y,5,30);  
            //右边的矩形  
            cxt.fillRect(tank.x+17,tank.y,5,30);  
            //画中间的矩形  
            cxt.fillRect(tank.x+6,tank.y+5,10,20);  
            //画出坦克的盖子  
            cxt.fillStyle=tank.color[1];  
            cxt.arc(tank.x+11,tank.y+15,5,0,Math*PI*2,true);  
            cxt.fill();  
            //画出炮筒  
            cxt.strokeStyle=tank.color[1];  
            cxt.lineWidth=1.5;  
            cxt.beginPath();  
            cxt.moveTo(tank.x+11,tank.y+15);  
            if(tank.direct==0){         //只是炮筒的方向不同  
                cxt.lineTo(tank.x+11,tank.y);  
            }else{  
                cxt.lineTo(tank.x+11,tank.y+30);  
            }  
            cxt.closePath();  
            cxt.stroke();  
            break;  
        case 1:  
        case 3:  
            //设置颜色  
            cxt.fillStyle="#BA9658";  
            //上边的矩形  
            cxt.fillRect(tank.x-4,tank.y+4,30,5);  
            //下边的矩形  
            cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
            //画中间的矩形  
            cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
            //画出坦克的盖子  
            cxt.fillStyle="#FEF26E";  
            cxt.arc(tank.x+15-4,tank.y+11+4,5,0,Math*PI*2,true);  
            cxt.fill();  
            //画出炮筒  
            cxt.strokeStyle="#FEF26E";  
            cxt.lineWidth=1.5;  
            cxt.beginPath();  
            cxt.moveTo(tank.x+15-4,tank.y+11+4);  
            if(tank.direct==1){         //只是炮筒的方向不同  
                cxt.lineTo(tank.x+30-4,tank.y+11+4);  
            }else{  
                cxt.lineTo(tank.x-4,tank.y+11+4);  
            }  
            cxt.closePath();  
            cxt.stroke();  
            break;    
    }  
      
}

Copy after login

Tank Battle.html

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8"/>  
</head>  
<body onkeydown="getCommand();">  
<h1>html5-坦克大战</h1>  
<!--坦克大战的战场-->  
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>  
<!--将tankGame04.js引入-->  
<script type="text/javascript" src="tankGame05.js"></script>  
<script type="text/javascript">  
    //得到画布  
    var canvas1=document.getElementById("tankMap");  
    //得到绘图上下文  
    var cxt=canvas1.getContext("2d");  
      
    //我的tank  
    //规定0向上、1向右、2向下、3向左  
    var hero=new Hero(40,40,0,heroColor);  
    //敌人的tank  
    var enemyTanks=new Array();  
    for(var i=0;i<3;i++){  
        var enemyTank = new EnemyTank((i+1)*50,0,2,enemyColor);  
        enemyTanks[i]=enemyTank;      
    }  
      
    //定时刷新我们的作战区(定时重绘)  
    //自己的坦克，敌人坦克，子弹，炸弹，障碍物  
    function flashTankMap(){  
        //把画布清理  
        cxt.clearRect(0,0,400,300);  
        //我的坦克  
        drawTank(hero);  
        //敌人的坦克  
        for(var i=0;i<3;i++){  
            drawTank(enemyTanks[i]);  
        }  
    }  
    flashTankMap();  
    //接收用户按键的函数  
    function getCommand(){  
        var code = event.keyCode;  //键盘上字幕的ASCII码  
        switch(code){  
            case 87:  
                hero.moveUp();  
                break;  
            case 68:  
                hero.moveRight();  
                break;  
            case 83:  
                hero.moveDown();  
                break;  
            case 65:  
                hero.moveLeft();  
                break;  
        }  
        flashTankMap();  
    }  
</script>  
</body>  
</html>

Copy after login

Running effect:

Xiaoqiangs HTML5 mobile development road (8) – Tank Battle Game 2

Now that we have our tanks and the enemy’s tanks, we want them to fight. In the next article, we will let the tanks fire bullets.

The above is the content of Xiaoqiang’s HTML5 mobile development road (8) - Tank Battle Game 2. For more related content, please pay attention to the PHP Chinese website (www.php. cn)!