1. 程式人生 > >javascript+CSS3 3D遊戲/效果

javascript+CSS3 3D遊戲/效果

因為是學習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陣列存放了所有字首,使之動態新增所有的瀏覽器的字首。)

效果圖

總結因為自己十分關注前端新技術,HTML5CSS3的新特性將會更顯著的美化應用程式,結合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!


相關推薦

javascript+CSS3 3D遊戲/效果

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

CSS3 3D環境實現立體 魔方效果代碼

3d 魔方 css 環境實現 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>魔方</title>

css3實現圖片3d翻轉效果

@charset: "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } img { border: none; } body {

HTML5+CSS3立方體3D翻轉效果

1、呼叫CSS樣式: <link rel="stylesheet" type="text/css" href="css/style.css" /> 2、呼叫JS外掛程式碼: <script src="js/prefixfree.min.js"></script> 3、新增

css3 js實現3D旋轉效果

用css3和js實現3D旋轉的效果,主要使用到css3 transform中的一些屬性:perspective,rotate,translate。 下面主要介紹一些transform中的屬性的效果和作

簡單幾步用純CSS3實現3D翻轉效果

思路 amp sass 而不是 技術分享 word pac light ble 作為前端開發人員的必修課,CSS3翻轉能帶我們完成許多基本動效,本期我們將用CSS3實現hover翻轉效果~ 第一步非常簡單,我們簡單畫1個演示方塊,為其 添加transition和trans

JavaScript基礎 顯示/隱藏效果 點擊圖片,DIV顯示,圖片更換,點擊更換後的圖片,DIV隱藏

努力學習 不出 圖片 視頻教程 .cn clas == display 推薦 鎮場詩:    清心感悟智慧語,不著世間名與利。學水處下納百川,舍盡貢高我慢意。    學有小成返哺根,願鑄一良心博客。誠心於此寫經驗,願見文者得啟發。—————————————————————

JavaScript-html標題滾動效果

charset 設置 script split dsm ctype java title document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

超慢速移動動畫使用CSS3實現流暢效果

clas net 獲得 linear term 表示 ext eas == 三角碎片以很緩慢的速度旋轉移動。假設使用JS實現會出現一像素一像素移動的卡頓 使用CSS3會獲得很理想的效果 transform: translate3d(80px, 150px, 0px)

CSS3(3D骰子)

html utf-8 pos rspec oct sla tle tran -- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t

手把手教你玩轉 CSS3 3D 技術(轉載)

是不是 col 默認 占滿 概念 ebe 說明 adb relative css3的3d起步 要玩轉css3的3d,就必須了解幾個詞匯,便是透視(perspective)、旋轉(rotate)和移動(translate)。透視即是以現實的視角來看屏幕上的2D事物,從而展現3

CSS3實現投影效果

css 更新 文字 target blank ans lan 圖片 ear Webkit引擎定義了-webkit-box-reflect屬性,該屬性能夠實現投影效果,具體語法如下: -webkit-box-reflect: <direction> <of

火雲開發課堂 - 《使用Cocos2d-x 開發3D遊戲》系列 第四節:3D公告板

bold tar tracking forum dsm span 公告板 eight 第四節 《使用Cocos2d-x 開發3D遊戲》系列在線課程 第四節:3D公告板 視頻地址:http://edu.csdn.net/course/attend/1

CSS3動畫--過渡效果

auto del :hover har pro lan css fun margin CSS3動畫--過渡效果 transition 設置四個過渡屬性 transition-property  

CSS3實現動畫效果常用方法

指定 afa 運動 css過渡 none reserve 更改 事件 keyframes 早期在web中要實現動畫效果,都是依賴於JavaScript或flash來完成,但在CSS3中新增加了一個新的模塊transition,它可以通過一些簡單的css事件來觸發元素的外觀變

css實現3D盒子效果

origin fin courier ora 設置 blog select 5% solid -------------------------------------- 用css3的新屬性來設置3D盒 子效果(chrome瀏覽器), 代碼如下: ---------

css3濾鏡效果

gid tran microsoft for 效果 image pix lte css filter:blur(3px); -webkit-filter:blur(3px); -moz-filter:blur(3px); -o-filter:blur(3px); filte

3D遊戲圖形引擎

unit gre bsp www. ech log v.net net games 轉自:http://www.cnblogs.com/live41/archive/2013/05/11/3072282.html CryEngine 3 http://www.crydev

CSS3 文本效果

.org title 簡單 sla 宋體 oat hover 現象 5%   本文將詳細介紹CSS文本效果 凸版印刷效果   這種效果尤其適用於中等亮度背景配上深色文字的場景;但它也可用於深色底、淺色字的場景,只要文字不是黑色並且背景不是純黑或純白就行 【淺色背景深色文