javascript+CSS3 3D游戏/效果
由于是学习Web前端的，对前端知识技术也十分关注。要作一个3D游戏时，我第一想到的就是HTML5+CSS3技术，能够这样说：Web的将来属于HTML5。再搭配javascript，基本能够能实现你所想到的任何效果。尽管javascript是一门解释型语言，相对于编译型语言这种强类型语言要简单，但其功能是十分强大的。javascript
做品：3Dbookphp
所需技术：javascript+HTML5+CSS3html
需求分析：前端
1.须要一个声明3D空间html5
2.经过鼠标事件，改变book角度java
3.各个角度需比例旋转git
开始的大致思路和考虑到的问题：github
思路：使用javascript+HTML5+CSS3,实现一个3D的翻书效果。主要经过javascript改变CSS3的transform转换（transform的属性包括：rotate() 旋转度 、skew() 倾斜度、 scale() 比例、 translate() 变更，还有X，Y之分），加上javascript动态改变多个物体（应该说“标签“或者”块“）的角度，达到一个友好的3D效果。web
问题：用到了HTML5和CSS3，就不得不面对兼容性问题。不知道老师用什么浏览器，因此只好把全部经常使用的浏览器考虑进去（加上不一样前缀，显得比较繁杂），而且此效果不支持IE8及如下版本。（注：由于它不支持HTML5和CSS3），因此请用Chrome/Firefox等经常使用浏览器（呼吁：珍爱生命，远离IE！！！）canvas
性能上的考虑和解决：
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！