1. 程式人生 > >用javascript 面向對象制作坦克大戰(二)

用javascript 面向對象制作坦克大戰(二)

初始化 common data- 插入 div 理解 span 們的 ava



2. 完善地圖

我們的地圖中有空地,墻,鋼,草叢,水,總部等障礙物。 我們可以把這些全部設計為對象。

2.1 創建障礙物對象群

對象群保存各種地圖上的對象,我們通過對象的屬性來判斷對象是否可以被穿過或被攻擊。 Barrier.js: 技術分享 View Code

2.2 寫入地圖的數據。

在Common.js 中添加以下代碼: 技術分享 View Code

2.3 繪制地圖

準備工作做完了,下面開始上大菜,繪制地圖。前面有提到我們的地圖為 13 * 13 的表格。所以我們在遊戲裝載對象添加行和列兩個屬性,並且添加初始化地圖方法。 Frame.js: 技術分享
View Code

ok,到這裏我們的地圖就大功告成了。 這裏的註釋已經很詳細了,如果大家還有不理解的地方自己下載源碼調試一下就很好理解了。
這裏主要加載地圖數據,將每一個地圖作為span元素插入html文檔中。並且將地圖的對象存儲在二維數組中。以後我們做碰撞檢測的時候就可以直接通過對象的坐標取到對應的數組對象,十分方便。

?

用javascript 面向對象制作坦克大戰(二)