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陣列存放了所有字首,使之動態新增所有的瀏覽器的字首。)
效果圖:
總結:因為自己十分關注前端新技術,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!
相關推薦
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文本效果 凸版印刷效果 這種效果尤其適用於中等亮度背景配上深色文字的場景;但它也可用於深色底、淺色字的場景,只要文字不是黑色並且背景不是純黑或純白就行 【淺色背景深色文