.com 希望 2.4 案例 1.2 如果 20px js面向對象 應該

　　PS：這個坦克大戰是在網上下的一段源碼之後，自己進行的重寫。 寫這個的目的是為了鞏固自己這段時間對js的學習。整理到博客上，算是對自己近端時間學習js的一個整理。 同時也希望可以幫助到學習js的園友。由於自己也是剛學js不久，所以難免出現錯誤。如果發現希望給予指正。 這個教程適合熟悉js基本語法和面向對象語法的園友學習。 本身沒有太難的東西，這個案例將js面向對象用的比較好，可以作為js面向對象的入門教程。

1. 創建基本對象，實現坦克簡單的移動。

1.1 如何在地圖中繪制畫布？

考慮到瀏覽器兼容的問題，我們用操作dom的方式來實現遊戲對象的繪制和刷新。我們如何存儲我們的地圖呢？ 我們應該把地圖用一個二維數組來保存， js中沒有二維數組，但是可以通過在一維數組從存儲數組來實現。

1.2 代碼實現

我們將畫布設計為 13 * 13 的一個二維數組，每個元素在地圖中對應的長和寬均為40px，可以把整個地圖看成由 40px*40p x大小的單元格組成的一個表格，那麽我們整個畫布的大小為 520px * 520px ； 　　 上代碼前先給大家來一張對象關系圖：

1.2.1 創建頂級對象

html代碼: View Code

TankObject.js文件： View Code

這裏?我們用X，Y坐標表示對象在地圖上的位置。後面我們會將地圖中的每個對象都放入二維數組中，這時可以通過X,Y坐標來取得對應的對象。 然後用css中的left和top來控制我們對象在窗體中的位置。（可以移動的對象：坦克，子彈）

1.2.2 創建公用對象

我們還需要創建一個公共的對象，來寫入我們常用的一些方法。 Common.js： View Code

1.2.3 創建移動對象

Mover.js View Code

這裏的移動對象繼承自我們的頂級對象 ，這裏this就代表調用Move方法的對象。 Move對象的功能根據對象的方向和速度進行移動，每次移動5px總共移動40px一個單元格。後面這個對象還會進行擴展，會加入碰撞檢測等功能。

1.2.4 創建坦克對象

Tank.js 文件： View Code

現在只創建了玩家坦克，後面我們還會往裏添加敵人坦克。

1.2.5 創建遊戲裝載對象(核心)

View Code

遊戲裝載對象代碼看起來很多，其實就做了兩件事情： 1、創建玩家坦克對象。 2、添加按鍵監聽事件，當玩家按下移動鍵調用坦克Move方法移動坦克。 　　總結：到這裏我們的坦克可以通過按鍵自由的移動了。下一步我們需要完善地圖和碰撞檢測。

javascript 面向對象制作坦克大戰 （一）