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

一、序言

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

　　貪吃蛇          坦克        打字游戲

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

1、貪吃蛇：

　　繪制地圖（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坐標。

2、坦克：（和貪吃蛇差不多，都是繪圖，刷新重繪）

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

　　Bullet：子彈類。

　　Bomb：炸彈類。

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

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

　　Enemy:敵人類

3、打字游戲：（原理也差不多，只是邏輯稍復雜一點，這里只能做一個簡單介紹了）

　　字母產生(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。