因為是學習Web前端的，對前端知識技術也十分關注。要做一個3D遊戲時，我第一想到的就是HTML5+CSS3技術，可以這樣說：Web的未來屬於HTML5。再搭配javascript，基本可以能實現你所想到的任何效果。儘管javascript是一門解釋型語言，相對於編譯型語言這種強型別語言要簡單，但其功能是十分強大的。

作品：3Dbook

所需技術：javascript+HTML5+CSS3

需求分析：

1.需要一個宣告3D空間

2.通過滑鼠事件，改變book角度

3.各個角度需比例旋轉

開始的大體思路和考慮到的問題：

思路：使用javascript+HTML5+CSS3,實現一個3D的翻書效果。主要通過javascript改變CSS3的transform轉換（transform的屬性包括：rotate() 旋轉度 、skew() 傾斜度、 scale() 比例、 translate() 變動，還有X，Y之分），加上javascript動態改變多個物體（應該說“標籤“或者”塊“）的角度，達到一個友好的3D效果。

問題：用到了HTML5和CSS3，就不得不面對相容性問題。不知道老師用什麼瀏覽器，所以只好把所有常用的瀏覽器考慮進去（加上不同字首，顯得比較繁雜），並且此效果不支援IE8及以下版本。（注：因為它不支援HTML5和CSS3），所以請用Chrome/Firefox等常用瀏覽器（呼籲：珍愛生命，遠離IE！！！）

效能上的考慮和解決：

1.各瀏覽器的相容性（所以需要根據瀏覽器核心，使用固有字首）

2.字首不同，而後面樣式相同（所以後面採用陣列，靠for迴圈動態生成帶字首程式碼）

3老版本瀏覽器（IE8及以下不能支援最新CSS3技術）

自己動手過程：

各瀏覽器字首：-webkit- (Chrome Safari) ；-moz- （Firefox）；-ms- (IE)；-o- (Opera)；

這裡看看CSS3如何實現3D效果的吧（自己的一個小例子）：

宣告3D空間 : transform-style:preserve-3d;

轉換時間 : transition:3s all  (轉換時間3s);

佈置盒子6面 : (第一面：transform-origin:bottom;transform:translateZ(100px)  rotateX(90deg);)

（盒子的摺疊：如下）

盒子demo（不是作業）:3D盒子

下面正式開始：

1.先是找素材，這裡我找的是Mozilla公司的標誌恐龍

2.大概想實現的效果是，通過滑鼠點選，移動，改變各層角度。

3.先讓book本身出場時有點角度

4.考慮到有兩頁。先對第一頁，以Y軸為中心旋轉，讓兩頁的連線處為軸：

Z軸前移3畫素（後面後頁也後移3畫素，看上去有層次感）

5.後一頁：

Z軸後移3畫素，再旋轉180度（先書閉合，這樣才重合）

6.恐龍和他的影子都延Y軸旋轉：

1.最關鍵的是javascript的效果

重要步驟：

當滑鼠按下移動時，根據滑鼠X軸移動的距離，確定一個角度

1.最關鍵的是javascript的效果

javascrip最重要步驟：

當滑鼠按下移動時，根據滑鼠X軸移動的距離，確定一個角度

（注：這裡的clamp函式是自己定義的函式，返回三個中的最大值）

再根據這個角度，分別改變書本、兩頁、恐龍和陰影的角度：

（這些角度/比例的選擇，真的是太難測試出來~~~~(>_<)~~~~ ，後來通過根據數學公式中的角度計算，才算出來的。）

（注：這裡用prefixes陣列存放了所有字首，使之動態新增所有的瀏覽器的字首。）

效果圖：

總結：因為自己十分關注前端新技術，HTML5和CSS3的新特性將會更顯著的美化應用程式，結合javascript將讓使用者有意想不到的動感特效。通過本次學習實踐，加深了我對它們的熟悉和掌握，使我更有興趣去學習提高前端知識技能。Fighting！！！

最近看了HTML5遊戲引擎，覺得功能還是很強大的，學習了一下，準備做一個小遊戲熟悉一下^_^。因為作業也有這一方面的，就順便新增進來了。

作品2：flappy bird

作品連結：flappy-bird(最好用火狐瀏覽器開啟)

所需技術：javascript+HTML5+phaser.js

需求分析：

1.HTML5遊戲引擎（cocos-2d和phaser.js中選擇了phaser.js）

2.鳥加上重力（向下掉）

3.空格跳躍

4.水管動態新增和刪除，並向左移（看上去是鳥在右移）

5.碰撞檢測

6.結束標誌，並重置遊戲（超出範圍或碰撞水管）

效能上的思考：

下來看了一下效率問題，javascript開啟定時器，對瀏覽器資源的消耗還是有點大。網上查了查，終於發現了一個神器，緩動函式requestAnimationFrame.它就是瀏覽器廠商，為解決運動需要定時器，而專門做的一個動畫方法。它讓瀏覽器更好的執行動畫（準確說是“運動”）.你可以參考一下這裡喲：http://www.shangxueba.com/jingyan/1905002.html

作品畫面：

因為最近看很多HTMl5的js大牛在業餘時間都開始關注用html5遊戲引擎進行遊戲開發。我們瞭解了cocos-2d和phaser.js這兩個引擎，也看了下網上的介紹。給我的感覺就是cocos-2d比較複雜一點，對有cocos-2d平臺開發經驗的人來說學習比較容易，而phaser.js相對於剛開始接觸遊戲引擎的人來說比較容易一些（相當於html5遊戲開發框架！）你可以通過github主頁學習（https://github.com/photonstorm/phaser）

其大概思路與步驟：

1.引入phaser.js外掛

2.phaser.game引數介紹

Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)

width : 遊戲寬

height : 遊戲高

renderer : 渲染方式（這裡我選用的是自動phaser.AUTO）

parent : 存放canvas的父元素

state : 遊戲場景

transparent ： 背景透明度

antialias : 是否啟用抗鋸齒

physicsConfig : 遊戲物理系統配置引數

以上引數為可選擇的。

3.步驟1：例項化一個phaser例項，建立好遊戲主體。

步驟2:

載入資源（鳥、管道（我都用的圖片）），

新增屬性/方法：

鳥：重力（保證會下掉） 

this.bird.body.gravity.y = 1000;

管道：1.要動態建立，這裡我開一個定時器每隔1.5s建立一組

//1.5s開一個定時器，創造管道
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this); 
//2.並給管道一個速度，讓其左移（看上去是鳥在動，實際上是管道哦）
// 新增管道: 重置管道位置  給管道一個X軸的速度，讓管道左移 消除通過的管道 
    add_one_pipe: function(x, y) {
        var pipe = this.pipes.getFirstDead();
        pipe.reset(x, y);
        pipe.body.velocity.x = -200; 
        pipe.outOfBoundsKill = true;
    },
//3.新增6個管道，中間2個空格
 add_row_of_pipes: function() { 
        var hole = Math.floor(Math.random()*5)+1;
        for (var i = 0; i < 8; i++)
            if (i != hole && i != hole +1) 
                this.add_one_pipe(400, i*60+10);   
    
        this.score += 1;
        this.label_score.content = this.score;  
    },

     空格：按下跳躍

//空格跳躍 鳥跳，給鳥一個垂直速度
        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        space_key.onDown.add(this.jump, this); 
   <span style="white-space:pre">	</span>jump: function() {
       <span style="white-space:pre">		</span>this.bird.body.velocity.y = -350;
   <span style="white-space:pre">	</span>}

重新整理：檢測遊戲是否結束（我是1s檢查60次，可能效率不太高）

//此函式1秒呼叫60次
    update: function() {
        // 過高或過低 或者鳥碰到任意管道，重新開始遊戲
        if (this.bird.inWorld == false)
            this.restart_game(); 
        this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);      
    },

下來看了一下效率問題，javascript開啟定時器，對瀏覽器資源的消耗還是有點大。網上查了查，終於發現了一個神器，緩動函式requestAnimationFrame.它就是瀏覽器廠商，為解決運動需要定時器，而專門做的一個動畫方法。它讓瀏覽器更好的執行動畫（準確說是“運動”）.你可以參考一下這裡喲：http://www.shangxueba.com/jingyan/1905002.html

思考與總結：

通過本次實際操作，對html5的遊戲引擎有了，大概的瞭解，也進一步認識到了html5的未來前景與強大。又認識到javascript的重要作用，無論是html5還是canvas都離不開javascript這一重要部分。中間遇到很多問題，追其原因就是javascript的運用還不夠精通，靈活。下來還要努力了。

關於分工：

凌浩：主要負責了javascript的編寫實現，遊戲引擎的效果，flappy-bird的實現，輔助3Dbook的思路與改寫，blog文件的編寫

閻一豪：主要負責了CSS3的編寫、資源的查詢，3D效果的實現3Dbook的實現，輔助javascript的改寫

以上所有我們大概用了一週的時間，快累屎鳥！！！不過也收穫多多,感覺賺了O(∩_∩)O！