分享幾個原生javascript面向對象設計小遊戲

1、序言

　　不知你們是否是和我同樣，當初都有個夢想。學編程，就是想開發遊戲。結果進入大學學習以後，才知道搞的是數據庫應用程序開發！在此，本人就分享下業餘時間作的幾個小遊戲吧！本打算想用winform或wpf作，可又考慮到運行須要.net環境，因此選擇了js，爲此特地去學了html5中canvas繪圖！先上預覽吧：(瀏覽器需支持html5,英文狀態下輸入法)

　　貪吃蛇          坦克        打字遊戲

2、原理簡單說明-需理解js基於面向對象編程（context:繪圖上下文，定時器刷新重繪）

一、貪吃蛇：

　　繪製地圖（GameController控制器類）:(如今明白了，當時學hello world的時候，老師讓咱們控制檯輸出三角形，長方形等的用意了。沒想到這裏就用上了）

drawMap: function() {
        for (var i = 0; i < 41; i++) {
            for (var j = 0; j < 41; j++) {
                this.context.lineWidth = 1;
                this.context.strokeStyle = "#222";
                this.context.strokeRect(i * 20, j * 20, 20, 20);
            }
        }
},

　　Parent類：Snake,Food的基類，包含他們的共同屬性；繼承主要使用call()/apply()這兩個方法，其實就是改變Parent函數當中this的做用域，動態添加屬性。

　　Snake類：把貪吃蛇的每一節當作一個Snake實例，保存在GameController實例的snakes數組中，便於管理。

　　貪吃蛇移動實現（GameController類refresh方法裏面）：從最後一個開始遍歷數組snakes，第m節的座標等於第m-1節的座標，第一節移動；

for (var m = this.snakes.length - 1; m >= 0; m--) {
            if (m === 0) {
                this.checkSnakeHitFood(this.snakes[m].run());
            } else {
                this.snakes[m].x = this.snakes[m - 1].x;
                this.snakes[m].y = this.snakes[m - 1].y;
                this.snakes[m].direction = this.snakes[m - 1].direction;
                this.checkSnakeHitFood(this.snakes[m].draw());
            }
        }

　　貪吃蛇吃到食物：碰撞檢測，遍歷判斷每一節與食物的x,y座標。

二、坦克：（和貪吃蛇差很少，都是繪圖，刷新重繪）

　　GameController:遊戲控制類，主要類，遊戲碰撞，定時重繪等等。　　

　　Bullet：子彈類。

　　Bomb：炸彈類。

　　Tank:Hero,Enemy的基類，包含他們的共同屬性；繼承主要使用call()/apply()這兩個方法。

　　Hero:英雄類，（繪圖，移動根據四個方向分別改變x,y座標）

　　Enemy:敵人類

三、打字遊戲：（原理也差很少，只是邏輯稍複雜一點，這裏只能作一個簡單介紹了）

　　字母產生(Math.random() * (上限 - 下限+ 1) + 下限,產生{上限，下限}之間的一個隨機數)：恰好英文a-z對應的ascii碼在{64，91}之間，

使用Math.random() * (64 - 91 + 1) + 91獲得一個隨機ascii碼值，再利用String.fromCharCode(ascii碼)(js愛好者，這個方法不知道的有沒有？)獲取對應的字母; 

　　子彈跟蹤（以下圖）：經過A，B在水平，垂直方向的距離計算出夾角，再根據速度和夾角分別計算A在x,y軸移動的座標。（三角函數計算)

三：結束語

　　更具體的說明，表達不出來了，這大概就是隻可意會不可言傳吧！感興趣的能夠私下交流，共同進步！源碼下載：html5games。