javascript+CSS3 3D游戏/效果
来源:互联网 发布:qq飞车mac版 编辑:程序博客网 时间:2024/05/17 22:15
因为是学习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数组存放了所有前缀,使之动态添加所有的浏览器的前缀。)
效果图:
作品链接:3Dbook总结:因为自己十分关注前端新技术,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游戏/效果
- css3 3D效果
- CSS3 3D效果
- CSS3 3D效果
- css3+javascript实现3D游戏:二阶魔方
- CSS3 3d旋转效果
- CSS3 3D动画效果
- css3 3D动画效果
- css3 3D旋转效果
- CSS3实现3D效果
- javascript 3D效果
- 9款非常实用的CSS3和Javascript 3D效果演示
- css3制作的3d效果
- css3 3d效果算法分享
- 3D阴影效果css3按钮代码
- CSS3之3D变形效果
- CSS3实现3D立方体旋转效果
- css3绘制3d翻页效果
- 最长上升子序列(LIS)问题
- Radar Installation(poj1328)(贪心)
- 题目【2002】
- BZOJ 1968 AHOI2005 COMMON 约数研究 线性筛
- 555555555555555
- javascript+CSS3 3D游戏/效果
- Ubiquitous Religions UVA, 10583(并查集)
- VS修改背景保护色保护双眼有绝招
- hdu 5090 Game with Pearls 2014上海全国邀请赛——题目重现
- 安装完Oracle 11g之后启动SQL Developer 时报cannot find a j2se sdk错误的解决办法
- TabActivity
- C++学习(4-1)
- 语法:MySQL中INSERT INTO SELECT的使用
- C和指针(1)基本概念和数据