社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 主體

小強的HTML5行動開發之路（9）－坦克大戰遊戲3

黄舟
發布： 2017-01-22 11:18:13
原創
1314 人瀏覽過

上一篇我們創建了敵人的坦克和自己的坦克，接下來就應該讓坦克發子彈了，我們下面來看一下如何讓我們的坦克發出子彈。

前面我們用面向對象的思想對Tank進行了封裝，又利用對象冒充實現了我們的坦克和敵人的坦克，仿照這種方式我們是不是也應該封裝一個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;
登入後複製

好了我們來試著發射一下子彈吧！子彈怎麼只能發一顆，而且越發越快，這是怎麼回事？再看看我們上面寫的程式碼，原來我們的子彈一旦發出去就不能停止了，雖然跑出了我們的」戰場「但是還是在朝一個方向跑，一旦發第二顆子彈第一顆子彈就會由於重新刷新介面沒有重繪子彈而消失。好了既然知道原因了下面我們判斷一下子彈是否出界，然後給子彈一個狀態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;    
        }  
    }  
}
登入後複製

如果子彈超出了canvas的範圍則將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中了子彈的drawHeroBullet isLive屬性。


看看運行結果吧

小強的HTML5行動開發之路（9）－坦克大戰遊戲3

全部原始碼如下：

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;    
    }  
      
}
登入後複製

大戰.html

tankGame06.js

<!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>
登入後複製
大戰.html

大戰遊戲3的內容，更多相關內容請關注PHP中文網（www.php.cn）！


🎜🎜
相關標籤：
HTML5，移动开发，坦克大战游戏
來源：php.cn
上一篇：小強的HTML5行動開發之路（8）－坦克大戰遊戲2 下一篇：小強的HTML5行動開發之路（10）－線上畫板
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
2
2026
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2188
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1845
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1737
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1758
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板