模仿微信跳一跳小游戏,使用threejs开发的h5跳一跳小游戏
模仿微信跳一跳小游戏,使用threejs+php开发的h5跳一跳小游戏
演示地址:http://www.us178.cn/tiaoyitiao
游戏效果图
使用技术
- jquery.js
- three.js
- tween.js
- php
游戏前端关键点
-
创建场景
- 模型生成(人物,方块,圆柱等)
- 灯光:环境光,平行光(制造光影效果)
- camera摄像机(远机位,小视角,防止模型形变)
- scene舞台(舞台建议旋转45度角,模型立体感更强;)
- render渲染器
-
跳跃动作创建
- 根据长按屏幕时间计算跳跃距离
- 根据距离计算人物的降落点位置
- 根据降落点位置判断人物的降落状态(未接触模型,落在目标模型边缘,成功落在目标模型)
- 根据降落状态,渲染人物跳跃动画
- 生成新的目标方块,并计算场景偏移量,使场景游戏元素在可视区的合适位置
-
注意事项
- 渲染器宽度设置大于600px(画质清晰)小于1200(提高流畅度),缩放适应屏幕;
- 灯光,平行光属性设置合理,兼顾光影效果和性能
游戏后端
- 微信授权用户自动注册
- 游戏结束保存用户分数
- 更新游戏分数排行
开发者:马英豪(18703630830)
可加微信(同号)交流技术开发