집 > 기사 > 웹 프론트엔드 > Xiaoqiang의 HTML5 모바일 개발 과정(8) – 탱크 배틀 게임 2

Xiaoqiang의 HTML5 모바일 개발 과정(8) – 탱크 배틀 게임 2

黄舟원래의: 2017-01-22 10:59:041394검색

이전 기사에서는 우리 자신의 탱크를 그리고 그 움직임을 제어할 수 있었습니다. 이전 기사를 계속해서 탱크 전투 게임을 구현해 보겠습니다.

1. JS 파일을 분리합니다

OO의 아이디어를 이용하여 탱크와 페인팅된 탱크를 캡슐화했습니다. 다음으로 이 두 개체를 외부로 추출합니다. js 파일의 파일 내용은 다음과 같습니다.

//定义一个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;    
    }  
      
}

이전 글에 작은 문제가 있었습니다. 알려주신 Mark_Lee님께 감사드립니다.

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

여기에 그려진 탱크 뚜껑은 둥근 모양이 아닙니다. 참고: http://www.w3school.com.cn/html5/canvas_arc.asp

Xiaoqiang의 HTML5 모바일 개발 과정(8) – 탱크 배틀 게임 2

자, 이제 HTML의 내용이 훨씬 더 명확해졌습니다.

rree

2. 🎜>

이제는 많은 친구들이 아이디어를 갖고 있을 것입니다. 적 전차를 그릴 때에는 새로운 함수를 만들어서 자신의 전차 클래스를 흉내낸 후 다시 작성하는 것이 좋지 않을까요? 어떤 친구들은 이 방법에 동의하지 않고 '모두 탱크이기 때문에 직접 탱크 인스턴스를 만들면 끝나지 않을까?'라고 말합니다. 첫 번째 친구와 두 번째 친구의 방법은 객체 지향적인 것처럼 보이지만 그렇지 않습니다. 이런 종류의 게임을 만들 때 객체 지향적 사고를 사용하여 구현하지 않으면 구현할 수 있지만 매우 어려울 것입니다. 복잡한.

이렇게 생각해보자. 우리 탱크와 적 탱크는 확실히 차이가 있고, 예를 들어 발사하는 총알도 다르고, 색깔도 다르다. 하지만 둘은 공통점이 있습니다(둘 다 탱크입니다). 이 부분을 추상화해야 할까요? 예, 먼저 Tank 클래스를 추상화한 다음 이 Tank 클래스를 각각 상속합니다. 농담입니까? 이것은 Java 언어가 아닙니다. 이것은 JavaScript 스크립팅 언어입니다. 상속은 어디서 오는 것입니까? ㅎㅎ, JavaScript에서 객체 가장을 사용할 수 있습니다. 객체 가장은 상속을 구현하기 위한 JavaScript 및 ECMAScript의 방법입니다. 상속을 구현하기 위한 객체 가장을 배우기 전에 먼저 this

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

키워드의 사용법을 이해해야 합니다. : function classA 이를 통해 함수 classB의 this를 사용하여 classA의 것으로 가장하여 실행하면 classB는 classA

자, 이제 우리 자신의 탱크와 적의 탱크 개체를 사용하여 탱크인 척합니다. 하하.

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，那么就实现了简单的继承了 
*/

이렇게 해서 우리의 탱크와 적의 탱크를 정의했는데, 탱크를 그리려면 drawTank(tank)를 변경해야 합니까? Tank가 그려져 있기 때문에 바꿀 필요가 없습니다. ㅎㅎ 객체지향 다형성입니다.

탱크 개체를 만들어보세요!

//定义一个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);  
}

전체 코드는 다음과 같습니다.

tankGame05.js

//我的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;      
}

Tank Battle.html

//为了编程方便，我们定义两个颜色数组  
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;    
    }  
      
}

작동 효과:

Xiaoqiang의 HTML5 모바일 개발 과정(8) – 탱크 배틀 게임 2 이제 우리 탱크와 적의 탱크가 있으므로 다음 기사에서는 탱크가 총알을 발사하도록 하겠습니다.

위는 Xiaoqiang의 HTML5 모바일 개발 로드(8) - 탱크 배틀 게임 2의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.kr)를 참고해주세요. .php.cn)!

성명：

이전 기사：Xiaoqiang의 HTML5 모바일 개발 과정(7) – 탱크 배틀 게임 1다음 기사：Xiaoqiang의 HTML5 모바일 개발 과정(7) – 탱크 배틀 게임 1

Xiaoqiang의 HTML5 모바일 개발 과정(8) – 탱크 배틀 게임 2

관련 기사