Xiaoqiang の HTML5 モバイル開発ロード (9) – 戦車戦ゲーム 3

前回の記事では、敵の戦車と自分の戦車を作成しました。次に、戦車に弾を発射させる方法を見てみましょう。

先ほど、オブジェクト指向の考え方を使用してタンクをカプセル化し、オブジェクトの偽装を使用してタンクと敵のタンクを実装しました。この方法に従って、Bullet もカプセル化する必要がありますか? 答えは「はい」です。さて、それでは、この Bullet の「クラス」が何をカプセル化すべきかを考えてみましょう。そこに位置があり、弾丸が飛ぶ方向があり、飛行速度があり、自ら飛び出す動作がそこにあるはずです。さて、カプセル化された Bulle "t クラス" は次のとおりです:

//子弹类  
function Bullet(x,y,direct,speed){  
    this.x=x;  
    this.y=y;  
    this.speed=speed;  
    this.direct=direct;  
    this.timer=null;  
    this.run=function(){  
        switch(this.direct){  
            case 0:  
                this.y-=this.speed;  
                break;  
            case 1:  
                this.x+=this.speed;  
                break;  
            case 2:  
                this.y+=this.speed;  
                break;  
            case 3:  
                this.x-=this.speed;  
                break;    
        }  
          
    }  
}

弾丸モデルを作成しました。今度はタンクを使用して弾丸を作成して送信し、Hero クラスに ShotEnemy メソッドを追加します。 。

//定义一个Hero类  
function Hero(x,y,direct,color){  
    //下面两句话的作用是通过对象冒充达到继承的效果  
    this.tank=Tank;  
    this.tank(x,y,direct,color);  
    //射击敌人函数  
    this.shotEnemy=function(){  
        switch(this.direct){  
            case 0:  
                heroBullet=new Bullet(this.x+10,this.y,this.direct,1);  
                break;  
            case 1:  
                heroBullet=new Bullet(this.x+30-4,this.y+10+4,this.direct,1);  
                break;  
            case 2:  
                heroBullet=new Bullet(this.x+10,this.y+30,this.direct,1);  
                break;  
            case 3:  
                heroBullet=new Bullet(this.x-4,this.y+10+4,this.direct,1);  
                break;  
        }  
        //把这个子弹放入数组中——》push函数  
        //调用我们子弹的run  
        //var timer=window.setInterval("heroBullet.run()",50);  
        //heroBullet.timer=timer;  
        heroBullets.push(heroBullet);  
        var timer=window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);  
        heroBullets[heroBullets.length-1].timer=timer;  
          
    }  
}

キーリスニング機能で弾の発射を監視するキー「J」を追加してください

case 74: //J  :发子弹  
    hero.shotEnemy();  
    break;

さて、弾を発射してみましょう！なぜ弾丸は 1 発しか発射できないのに、どんどん速くなっているのでしょうか。何が起こっているのでしょうか?上で書いたコードを見ると、弾丸が発射されると、それらは「戦場」から飛び出しても、最初の弾丸が発射されるとまだ一方向に走り続けることがわかります。箇条書きはインターフェイスが更新されたときに箇条書きが再描画されないため、消えます。さて、理由がわかったので、弾丸が範囲外かどうかを判断してから、弾丸に isLive の状態を与えましょう (この状態は弾丸が存在するかどうかを示します。弾丸が存在しない場合、弾丸は再描画されません)

//子弹类  
unction Bullet(x,y,direct,speed){  
this.x=x;  
this.y=y;  
this.speed=speed;  
this.direct=direct;  
this.timer=null;  
this.isLive=true;  
this.run=function(){  
    //判断子弹是否已经到边界了  
    if(this.x<=0||this.x>=400||this.y<=0||this.y>=300){  
        //子弹要停止  
        window.clearInterval(this.timer);  
        //子弹死亡  
        this.isLive=false;  
    }else{  
        //可以去修改坐标  
        switch(this.direct){  
            case 0:  
                this.y-=this.speed;  
                break;  
            case 1:  
                this.x+=this.speed;  
                break;  
            case 2:  
                    break;    
        }  
    }  
}

箇条書きがキャンバスの範囲を超える場合は、 isLive 属性を false に設定します

次に、前の更新インターフェイス関数に更新箇条書き関数を追加します

//定时刷新我们的作战区(定时重绘)  
//自己的坦克，敌人坦克，子弹，炸弹，障碍物  
function flashTankMap(){  
    //把画布清理  
    cxt.clearRect(0,0,400,300);  
    //我的坦克  
    drawTank(hero);  
    //我的子弹  
    drawHeroBullet();  
    //敌人的坦克  
    for(var i=0;i<3;i++){  
        drawTank(enemyTanks[i]);  
    }  
}

//画出自己的子弹  
function drawHeroBullet(){  
    for(var i=0;i<heroBullets.length;i++){  
        var heroBullet=heroBullets[i];  
        if(heroBullet!=null&&heroBullet.isLive){  
            cxt.fillStyle="#FEF26E";  
            cxt.fillRect(heroBullet.x,heroBullet.y,2,2);  
        }  
    }  
}

上記のdrawHeroBulletのisLiveプロパティで弾丸が判定されているのが分かります。

実行結果を見てみましょう

完全なソースコードは次のとおりです:

tankGame06.js

//为了编程方便，我们定义两个颜色数组  
var heroColor=new Array("#BA9658","#FEF26E");  
var enemyColor=new Array("#00A2B5","#00FEFE");  
  
    //子弹类  
function Bullet(x,y,direct,speed){  
    this.x=x;  
    this.y=y;  
    this.speed=speed;  
    this.direct=direct;  
    this.timer=null;  
    this.isLive=true;  
    this.run=function(){  
        //判断子弹是否已经到边界了  
        if(this.x<=0||this.x>=400||this.y<=0||this.y>=300){  
            //子弹要停止  
            window.clearInterval(this.timer);  
            //子弹死亡  
            this.isLive=false;  
        }else{  
            //可以去修改坐标  
            switch(this.direct){  
                case 0:  
                    this.y-=this.speed;  
                    break;  
                case 1:  
                    this.x+=this.speed;  
                    break;  
                case 2:  
                    this.y+=this.speed;  
                    break;  
                case 3:  
                    this.x-=this.speed;  
                    break;    
            }  
        }  
    }  
}  
  
//定义一个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);  
    //设计敌人函数  
    this.shotEnemy=function(){  
        switch(this.direct){  
            case 0:  
                heroBullet=new Bullet(this.x+10,this.y,this.direct,1);  
                break;  
            case 1:  
                heroBullet=new Bullet(this.x+30-4,this.y+10+4,this.direct,1);  
                break;  
            case 2:  
                heroBullet=new Bullet(this.x+10,this.y+30,this.direct,1);  
                break;  
            case 3:  
                heroBullet=new Bullet(this.x-4,this.y+10+4,this.direct,1);  
                break;  
        }  
        //把这个子弹放入数组中——》push函数  
        //调用我们子弹的run  
        //var timer=window.setInterval("heroBullet.run()",50);  
        //heroBullet.timer=timer;  
        heroBullets.push(heroBullet);  
        var timer=window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);  
        heroBullets[heroBullets.length-1].timer=timer;  
          
    }  
}  
  
//定义一个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;    
    }  
      
}

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="tankGame06.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);  
    //定义子弹数组  
    var heroBullets=new Array();  
    //敌人的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 drawHeroBullet(){  
        for(var i=0;i<heroBullets.length;i++){  
            var heroBullet=heroBullets[i];  
            if(heroBullet!=null&&heroBullet.isLive){  
                cxt.fillStyle="#FEF26E";  
                cxt.fillRect(heroBullet.x,heroBullet.y,2,2);  
            }  
        }  
    }  
      
    //定时刷新我们的作战区(定时重绘)  
    //自己的坦克，敌人坦克，子弹，炸弹，障碍物  
    function flashTankMap(){  
        //把画布清理  
        cxt.clearRect(0,0,400,300);  
        //我的坦克  
        drawTank(hero);  
        //我的子弹  
        drawHeroBullet();  
        //敌人的坦克  
        for(var i=0;i<3;i++){  
            drawTank(enemyTanks[i]);  
        }  
    }  
    flashTankMap();  
    //接收用户按键的函数  
    function getCommand(){  
        var code = event.keyCode;  //键盘上字幕的ASCII码  
        switch(code){  
            case 87:  //W   :上  
                hero.moveUp();  
                break;  
            case 68: //D    :右  
                hero.moveRight();  
                break;  
            case 83:  //S   :下  
                hero.moveDown();  
                break;  
            case 65: //A    :左  
                hero.moveLeft();  
                break;  
            case 74: //J  :发子弹  
                hero.shotEnemy();  
                break;  
        }  
        flashTankMap();  
    }  
    //每隔100毫秒去刷新一次作战区  
    window.setInterval("flashTankMap()",100);  
</script>  
</body>  
</html>

上記はXiaoqiangのHTML5モバイル開発ロードです( 9) - タンク ウォー ゲーム 3 のコンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。