分享幾個原生javascript物件導向設計小遊戲

一、序言　　不知大家是不是和我一樣，當初都有個夢想。學編程，就是想開發遊戲。結果進入大學學習之後，才知道搞的是資料庫應用程式開發！在此，本人就分享下業餘時間做的幾個小遊戲吧！本打算想用winform或wpf做，可又考慮到運行需要.net環境，所以選擇了js，為此特意去學了html5中canvas繪圖！先上預覽吧：(瀏覽器需支援html5,英文狀態下IME) 　　貪吃蛇          坦克        打字遊戲 二、原理簡單說明-需理解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軸移動的座標。（三角Function Compute)