H5坦克大戰之【建造敵人的坦克】

来源:http://www.cnblogs.com/zhouhuan/archive/2017/01/04/H5_tankgame4.html
-Advertisement-
Play Games

公司這幾天在準備新版本的上線，今天才忙裡偷閑來寫這篇博客。接著上一篇的“H5坦克大戰之【玩家控制坦克移動2】”（http://www.cnblogs.com/zhouhuan/p/H5_tankgame3.html），這一篇來寫怎麼建造敵人的坦克。 我的想法是，基於可擴展性和性能等方面的考慮，用構造 ...


  　　公司這幾天在準備新版本的上線，今天才忙裡偷閑來寫這篇博客。接著上一篇的“H5坦克大戰之【玩家控制坦克移動2】”（http://www.cnblogs.com/zhouhuan/p/H5_tankgame3.html），這一篇來寫怎麼建造敵人的坦克。 　　我的想法是，基於可擴展性和性能等方面的考慮，用構造函數改造之前的部分代碼，再在這個基礎上，實例化出來不同的坦克。   　　1.一開始的兩個步驟不變 
//封裝一個獲取繪圖環境的函數
function getCxt(){
    var myCanvas = document.getElementById('floor'),
       myContext = myCanvas.getContext('2d');
    return myContext;
}
//為了防止重覆地獲取節點影響性能，我們將獲取到的繪圖環境（也就是畫筆對象）存起來
var oCxt = getCxt();
　　2.接下來對畫坦克的函數進行適當改寫，因為函數里重覆代碼過多，同時，增加兩個顏色的參數，方便後面畫出不同的坦克： 
//封裝一個畫坦克的函數，傳兩個參數x,y,分別代表左上角的橫縱坐標
//再增加一個參數dir來表示方向 上下左右分別傳"u" "d" "l" "r"
//再增加兩個參數color1與color2，用來表示坦克身上的兩種顏色，方便造出不同的坦克
function drawTank(x,y,dir,color1,color2){
    switch(dir){
        case "u":                             
        case "d": 
            oCxt.fillStyle = color1;
            oCxt.fillRect(x,y,20,65);                
            oCxt.fillRect(x+70,y,20,65);                
            oCxt.fillRect(x+23,y+10,44,50);                
            oCxt.fillStyle = color2;
            oCxt.beginPath();
            oCxt.arc(x+45,y+35,16,0,2*Math.PI,false);        
            oCxt.closePath();
            oCxt.fill();
            oCxt.strokeStyle = color2;
            oCxt.lineWidth = "8.0";
            oCxt.moveTo(x+45,y+35);
            if(dir == "u"){
                oCxt.lineTo(x+45,y-25);    
            }else if(dir == "d"){
                oCxt.lineTo(x+45,y+95);
            }                                        
            oCxt.stroke();
            break;
        case "l": 
        case "r":                            
            oCxt.fillStyle = color1;
            oCxt.fillRect(x,y,65,20);        
            oCxt.fillRect(x,y+70,65,20);        
            oCxt.fillRect(x+10,y+23,50,44);
            oCxt.fillStyle = color2;
            oCxt.beginPath();
            oCxt.arc(x+35,y+45,16,0,2*Math.PI,false);
            oCxt.closePath();
            oCxt.fill();
            oCxt.strokeStyle = color2;
            oCxt.lineWidth = "8.0";
            oCxt.moveTo(x+35,y+45);
            if(dir == "l"){
                oCxt.lineTo(x-25,y+45);
            }else if(dir == "r"){
                oCxt.lineTo(x+95,y+45);
            }
            oCxt.stroke();
    }
}
　　3.又考慮到函數傳參過多，使用函數的話比較麻煩，所以對函數進行進一步的封裝，乾脆傳一個對象進去，就成了下麵這樣： 
function drawTank(tankName){
    switch(tankName.dir){
        case "u":                             
        case "d": 
            oCxt.fillStyle = tankName.color1;
            oCxt.fillRect(tankName.x,tankName.y,20,65);                
            oCxt.fillRect(tankName.x+70,tankName.y,20,65);                
            oCxt.fillRect(tankName.x+23,tankName.y+10,44,50);                
            oCxt.fillStyle = tankName.color2;
            oCxt.beginPath();
            oCxt.arc(tankName.x+45,tankName.y+35,16,0,2*Math.PI,false);        
            oCxt.closePath();
            oCxt.fill();
            oCxt.strokeStyle = tankName.color2;
            oCxt.lineWidth = "8.0";
            oCxt.moveTo(tankName.x+45,tankName.y+35);
            if(tankName.dir == "u"){
                oCxt.lineTo(tankName.x+45,tankName.y-25);    
            }else if(tankName.dir == "d"){
                oCxt.lineTo(tankName.x+45,tankName.y+95);
            }                                        
            oCxt.stroke();
            break;
        case "l": 
        case "r":                            
            oCxt.fillStyle = tankName.color1;
            oCxt.fillRect(tankName.x,tankName.y,65,20);        
            oCxt.fillRect(tankName.x,tankName.y+70,65,20);        
            oCxt.fillRect(tankName.x+10,tankName.y+23,50,44);
            oCxt.fillStyle = tankName.color2;
            oCxt.beginPath();
            oCxt.arc(tankName.x+35,tankName.y+45,16,0,2*Math.PI,false);
            oCxt.closePath();
            oCxt.fill();
            oCxt.strokeStyle = tankName.color2;
            oCxt.lineWidth = "8.0";
            oCxt.moveTo(tankName.x+35,tankName.y+45);
            if(tankName.dir == "l"){
                oCxt.lineTo(tankName.x-25,tankName.y+45);
            }else if(tankName.dir == "r"){
                oCxt.lineTo(tankName.x+95,tankName.y+45);
            }
            oCxt.stroke();
    }
}
　　4.接下來不再專門創建一個myTank對象來存儲相關的屬性和方法，而是採用構造函數的方法，寫好構造函數之後，創建對象的時候new出來並傳參即可，如下： 
//使用構造函數來創建對象
function Tank(x,y,dir,color1,color2){                        
    this.x = x;
    this.y = y;
    this.dir = dir;        
    this.step = 3,                            
    this.color1 = color1;                                            
    this.color2 = color2;                                            
    this.turnUp = function(){                                        
        if((this.y-25) >= 0){                
            this.y -= this.step;    
            this.dir = "u";    
        }
    };
    this.turnDown = function(){
        if((this.y+90) <= 500){
            this.y += this.step;    
            this.dir = "d";
        }    
    };
    this.turnLeft = function(){
        if((this.x-25) >= 0){
            this.x -= this.step;    
            this.dir = "l";    
        }        
    };
    this.turnRight = function(){
        if((this.x+90) <= 800){
            this.x += this.step;    
            this.dir = "r";
        }    
    };
}
//創建我的坦克時new出來並傳參
var myTank = new Tank(350,400,"u","#542174","#FCB827");
　　5.接下來創建敵人的坦克，我的想法是，敵人的坦克是多個，如果一個一個地new出來會比較麻煩，而且可擴展性比較差，因為如果要增加幾個或者減少幾個的話就要大面積地改動代碼，所以可以做成一個數組，這裡先做三個： 
//創建敵人的坦克,有多個所以做成數組，再將數組每一項new出來並傳參即可
//這裡以騎士隊的主色建造坦克
var enemyTank = new Array();
for(var i=0; i<3; i++){
    enemyTank[i] = new Tank(240*(i+0.45),60,"d","#EBB227","#780910");
}
　　前兩個參數x和y也是一點點試出來的，將坦克調整到合適的位置即可。 　　其實接下來也可以不用先畫一個坦克出來，因為間歇調用的間隔時間是100ms，很短，幾乎看不出來，所以可以只在更新戰場的函數里畫坦克，外面就不用了： 
//封裝一個更新戰場的函數
function updateFloor(){
    oCxt.clearRect(0,0,800,500);            //更新之前先清除畫布
    drawTank(myTank);
    for(var i=0; i<enemyTank.length; i++){
        drawTank(enemyTank[i]);        //迴圈一下把每一個敵人造出來
    }
}
//設置一個間歇調用的函數，每隔100ms更新一下戰場
setInterval(function(){
    updateFloor();
},100);
　　6.響應玩家的操作指令一步也沒有變化： 
//響應玩家的操作指令
window.onkeydown = function(eve){                                                
    switch(eve.keyCode){
        case 38:
        case 87:
            myTank.turnUp();
            break;
        case 40:
        case 83:
            myTank.turnDown();
            break;
        case 37:
        case 65:
            myTank.turnLeft();
            break;
        case 39:
        case 68:
            myTank.turnRight();
    }
};
　　到這一步就已經可以建造出敵人的坦克（並自由控制自己的坦克）了，運行之後結果如下： 　　7.最終代碼： 
//封裝一個獲取繪圖環境的函數
function getCxt(){
    var myCanvas = document.getElementById('floor'),
       myContext = myCanvas.getContext('2d');
    return myContext;
}
//為了防止重覆地獲取節點影響性能，我們將獲取到的繪圖環境（也就是畫筆對象）存起來
var oCxt = getCxt();

//封裝一個畫坦克的函數，傳兩個參數x,y,分別代表左上角的橫縱坐標
//再增加一個參數dir來表示方向 上下左右分別傳"u" "d" "l" "r"
//再增加兩個參數color1與color2，用來表示坦克身上的兩種顏色，方便造出不同的坦克
//對函數進一步封裝，儘量讓使用變得簡單
function drawTank(tankName){
    switch(tankName.dir){
        case "u":                             
        case "d": 
            oCxt.fillStyle = tankName.color1;
            oCxt.fillRect(tankName.x,tankName.y,20,65);                
            oCxt.fillRect(tankName.x+70,tankName.y,20,65);                
            oCxt.fillRect(tankName.x+23,tankName.y+10,44,50);                
            oCxt.fillStyle = tankName.color2;
            oCxt.beginPath();
            oCxt.arc(tankName.x+45,tankName.y+35,16,0,2*Math.PI,false);        
            oCxt.closePath();
            oCxt.fill();
            oCxt.strokeStyle = tankName.color2;
            oCxt.lineWidth = "8.0";
            oCxt.moveTo(tankName.x+45,tankName.y+35);
            if(tankName.dir == "u"){
                oCxt.lineTo(tankName.x+45,tankName.y-25);    
            }else if(tankName.dir == "d"){
                oCxt.lineTo(tankName.x+45,tankName.y+95);
            }                                        
            oCxt.stroke();
            break;
        case "l": 
        case "r":                            
            oCxt.fillStyle = tankName.color1;
            oCxt.fillRect(tankName.x,tankName.y,65,20);        
            oCxt.fillRect(tankName.x,tankName.y+70,65,20);        
            oCxt.fillRect(tankName.x+10,tankName.y+23,50,44);
            oCxt.fillStyle = tankName.color2;
            oCxt.beginPath();
            oCxt.arc(tankName.x+35,tankName.y+45,16,0,2*Math.PI,false);
            oCxt.closePath();
            oCxt.fill();
            oCxt.strokeStyle = tankName.color2;
            oCxt.lineWidth = "8.0";
            oCxt.moveTo(tankName.x+35,tankName.y+45);
            if(tankName.dir == "l"){
                oCxt.lineTo(tankName.x-25,tankName.y+45);
            }else if(tankName.dir == "r"){
                oCxt.lineTo(tankName.x+95,tankName.y+45);
            }
            oCxt.stroke();
    }
}
//使用構造函數來創建對象
function Tank(x,y,dir,color1,color2){                        
    this.x = x;
    this.y = y;
    this.dir = dir;        
    this.step = 3,                            
    this.color1 = color1;                                            
    this.color2 = color2;                                            
    this.turnUp = function(){                                        
        if((this.y-25) >= 0){                
            this.y -= this.step;    
            this.dir = "u";    
        }
    };
    this.turnDown = function(){
        if((this.y+90) <= 500){
            this.y += this.step;    
            this.dir = "d";
        }    
    };
    this.turnLeft = function(){
        if((this.x-25) >= 0){
            this.x -= this.step;    
            this.dir = "l";    
        }        
    };
    this.turnRight = function(){
        if((this.x+90) <= 800){
            this.x += this.step;    
            this.dir = "r";
        }    
    };
}
//實例化我的坦克時new出來並傳參
var myTank = new Tank(350,400,"u","#542174","#FCB827");
//實例化敵人的坦克,有多個所以做成數組，再將數組每一項new出來並傳參即可
//這裡以騎士隊的主色畫坦克
var enemyTank = new Array();
for(var i=0; i<3; i++){
    enemyTank[i] = new Tank(240*(i+0.45),60,"d","#EBB227","#780910");
}

//封裝一個更新戰場的函數
function updateFloor(){
    oCxt.clearRect(0,0,800,500);            //更新之前先清除畫布
    drawTank(myTank);
    for(var i=0; i<enemyTank.length; i++){
        drawTank(enemyTank[i]);                //迴圈一下把每一個敵人造出來
    }
}

//設置一個間歇調用的函數，每隔100ms更新一下戰場
setInterval(function(){
    updateFloor();
},100);

//響應玩家的操作指令
window.onkeydown = function(eve){                                                
    switch(eve.keyCode){
        case 38:
        case 87:
            myTank.turnUp();
            break;
        case 40:
        case 83:
            myTank.turnDown();
            break;
        case 37:
        case 65:
            myTank.turnLeft();
            break;
        case 39:
        case 68:
            myTank.turnRight();
    }
};

 （PS：一個人的力量畢竟有限，如果在閱讀的過程中發現有錯誤或者不合理的地方，歡迎隨時指正，筆者不勝感激！）

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 《Django By Example》第四章 中文 翻譯 （個人學習，渣翻）
    （譯者註：祝大家新年快樂，這次帶來《Django By Example》第四章的翻譯，這章非常的實用，就這樣） 第四章 創建一個社交網站 在上一章中，你學習瞭如何創建站點地圖（sitemaps）和feeds，你還為你的blog應用創建了一個搜索引擎。在本章中，你將開發一個社交應用。你會為用戶創建一些 ...
  • 製作類似ThinkPHP框架中的PATHINFO模式功能
    一、PATHINFO功能簡述 搞PHP的都知道ThinkPHP是一個免費開源的輕量級PHP框架，雖說輕量但它的功能卻很強大。這也是我接觸學習的第一個框架。TP框架中的URL預設模式即是PathInfo模式。這個模式很強大，每當你訪問一個網站必然帶有一長串參數，但是太長又顯得不太友好。對於訪問一個以M ...
  • Maven 整合FreeMarker使用
    pom.xml testFreeMarker.flt 1 您好${name}，現在在測試FreeMarker功能 FreeMarkerUtil.java TestController.java 運行結果 ...
  • JAVA FreeMarker工具類
    FreeMarkerUtil.java 使用方式 FreeMarkerUtilTester.java sms.flt 1 您的驗證碼是：${code}。請不要把驗證碼泄露給其他人。 運行結果 ...
  • 如何一步一步用DDD設計一個電商網站（十）—— 一個完整的購物車
    閱讀目錄 前言 回顧 梳理 實現 結語 一、前言 之前的文章中已經涉及到了購買商品加入購物車，購物車內購物項的金額計算等功能。本篇準備把剩下的購物車的基本概念一次處理完。 二、回顧 在動手之前我對之前的購買上下文內對象做了一次回顧。先梳理一下已經在上下文內出現的領域對象，如圖1所示： 【圖1】 在梳 ...
  • Fabio 安裝和簡單使用
    Fabio（Go 語言）： "https://github.com/eBay/fabio" Fabio 是一個快速、現代、zero conf 負載均衡 HTTP(S) 路由器，用於部署 Consul 管理的微服務。 Fabio 由 eBay Classifieds Group 開發，用於處理 mar ...
  • 封裝集合（Encapsulate Collection）
    封裝就是將相關的方法或者屬性抽象成為一個對象。 封裝的意義： 當一個類的屬性類型為集合，或者方法返回類型為集合時，如果符合以下條件，我們就可以考慮將集合進行封裝： 返回的數據僅用於展示 當集合的Add，Remove方法包含其它業務邏輯 向類的調用者隱藏類中的完整集合有如下幾個好處： 保證返回的集合數 ...
  • 策略模式與簡單工廠結合（4）
    在上一篇博文結尾中，提到了存在的問題，那麼我們通過策略模式與簡單工廠結合的方式來解決上篇結尾中提到的問題。 方法很簡單，我們將CashContext簡單的改造一下即可 哈哈，是不是很像一個工廠？ 那麼，客戶端調用起來就非常非常簡單了。 嗯，是不是很簡潔明瞭？ 很多剛開始接觸設計模式的小伙伴有這樣一個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類