WEB--3D立体魔方小游戏 （附源码）
魔方这个学生时代常玩的游戏之一 想必大家都不怎么陌生了吧 如果感到陌生的话 那难道这就表明了时代间的层层代沟 时代变化的太快了嘛 好了言归正卷了 那么前端怎么实现魔方小游戏呢 从以下几个方面细讲
目录
- 一、案列效果
- 二、案列思路
- 三、案列目录
- 四、案列代码
一、案列效果
结果是最好的印证品 这毋庸置疑的了
二、案列思路
1、先将平面上的6个DIV拼接在一起。形成一张类似于3d立方体图形展开的平面图。
2、我们需要将每一个面旋转到相应的位置上，每一个面的旋转轴都是不一样的。上下，左右，分别对应的旋转轴,以及旋转角度分别是：bottom(90deg),top(-90deg),right(90deg),left(-90deg)。同时要注意在旋转后面的时候，旋转轴为Z轴，并不是上下，左右边。浏览器上面的坐标系是这样的：Z轴是屏幕里外两个方向（向外为正，向里为负），X轴的水平方向（向右为正，向左为负）；
3、接下来还有一个关键的步骤，就是当变换导致元素在 3D 空间中旋转时，指定当元素背面朝向观察者时不可见；
4、接下来我们要做的就是设置一下所处环境，我们要设置成3D的环境，具体的语法形式如下：transform-style: preserve-3d;
5、然后我们为了让立方体旋转起来，以便更好的实现3D效果。首先找到旋转中心，在3D魔方中，旋转中心就是立方体的几何中心。
三、案列目录
鉴于文件目录太大 我也不太可能每个文件新建一个代码块书写 且时间是有限的哈 有需要的小伙伴 可以前往 测试使用
四、案列代码
关键性代码 可都是有展示的哦 赶紧动手操作吧
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport"content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /><meta name="description" content="Rubik’s Cube"><meta name="keywords" content="Erno Rubik’s Cube"><link rel="stylesheet" type="text/css" href="css/cube.css"><link rel="stylesheet" type="text/css" href="css/base.css"><link rel="icon" type="image/png" href="img/cuber-favicon-0064x0064.png"><link rel="apple-touch-icon" href="img/cuber-favicon-0144x0144.png"><title>Cuber</title><script charset="utf-8" src="js/tween.min.js"></script><!-- Three.js --><script charset="utf-8" src="js/Three.js"></script><script charset="utf-8" src="js/EventDispatcher.js"></script><script charset="utf-8" src="js/Math.js"></script><script charset="utf-8" src="js/Quaternion.js"></script><script charset="utf-8" src="js/Vector2.js"></script><script charset="utf-8" src="js/Vector3.js"></script><script charset="utf-8" src="js/Box3.js"></script><script charset="utf-8" src="js/Sphere.js"></script><script charset="utf-8" src="js/Euler.js"></script><script charset="utf-8" src="js/Matrix3.js"></script><script charset="utf-8" src="js/Matrix4.js"></script><script charset="utf-8" src="js/Object3D.js"></script><script charset="utf-8" src="js/Camera.js"></script><script charset="utf-8" src="js/PerspectiveCamera.js"></script><script charset="utf-8" src="js/Ray.js"></script><script charset="utf-8" src="js/Plane.js"></script><!-- Here are the Cube guts. Enjoy. --><script charset="utf-8" src="js/ERNO.js"></script><script charset="utf-8" src="js/CSS3DRenderer.js"></script><script charset="utf-8" src="js/utils.js"></script><script charset="utf-8" src="js/Number.js"></script><script charset="utf-8" src="js/String.js"></script><script charset="utf-8" src="js/Array.js"></script><script charset="utf-8" src="js/colors.js"></script><script charset="utf-8" src="js/directions.js"></script><script charset="utf-8" src="js/queues.js"></script><script charset="utf-8" src="js/twists.js"></script><script charset="utf-8" src="js/cubelets.js"></script><script charset="utf-8" src="js/groups.js"></script><script charset="utf-8" src="js/slices.js"></script><script charset="utf-8" src="js/folds.js"></script><script charset="utf-8" src="js/projector.js"></script><script charset="utf-8" src="js/interaction.js"></script><script charset="utf-8" src="js/controls.js"></script><script charset="utf-8" src="js/cubes.js"></script><script charset="utf-8" src="js/solvers.js"></script><script charset="utf-8" src="js/renderer.js"></script><script charset="utf-8" src="js/jquery.js"></script><script charset="utf-8" src="js/iecss3d.js"></script><script charset="utf-8" src="js/ierenderer.js"></script><script charset="utf-8" src="js/locked.js"></script><script charset="utf-8" src="js/deviceMotion.js"></script><script charset="utf-8" src="js/main.js"></script></head><body class="graydient"><div id="container"></div><div id="fail"><h1>Sorry,</h1><h2>Cubers broken</h2></div>
</body></html>
更多前端小游戏代码 我们后会有期 喜欢的可以帮博主点点赞收藏一波嘛
WEB--3D立体魔方小游戏 （附源码）相关推荐
- python小游戏-16行代码实现3D撞球小游戏！-源码下载
python小游戏-16行代码实现3D撞球小游戏!-源码下载 所属网站分类: 资源下载 > python小游戏 作者:搞笑 链接: http://www.pythonheidong.com/bl ...
- html实现扫雷小游戏(附源码)
文章目录 实现功能 1.扫雷设计 1.1 主界面 1.2 扫雷难度 1.3 附带功能 2.效果和源码 2.1 动态效果 2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blo ...
- 【Python游戏】Python基于pygame实现的人机大战的斗兽棋小游戏 | 附源码
前言 有粉丝说要我出一期Python版本的斗兽棋,今天宠粉狂魔的我不就来啦!! 虽然是一个简单的小游戏,但是对于新手小伙伴来说还是有一定的小难度的哟!要是不理解都可以找到小编的哈!! 相关文件 关注小 ...
- 整理了30款Python小游戏附源码，五一有的玩了
快到五一了,整理了 30 款 Python 小游戏源码分享给大家,具体内容可以点击下方视频号查看: 点击上方视频后,源码获取方式:①关注上方视频号.②点赞当前视频.③在当前视频评论区扣1 友情提示:获 ...
- 【Python游戏】基于化学方程式的基础上，用Python实现一个消灭泡泡小游戏 | 附源码
前言 halo,包子们下午好 今天实现的这个小游戏呀,说实话化学不太好的小伙伴可能看起来会有点懵逼 不过不用担心,咱们今天不是来学化学的,我们是来学习Python的 所以呀,不要太担心啦,大家先好好看 ...
- 【Python游戏】用Python 和 Pyglet 编写一个我的世界小游戏 | 附源码
相关文件 想学Python的小伙伴可以关注小编的公众号[Python日志] 有很多的资源可以白嫖的哈,不定时会更新一下Python的小知识的哈!! 需要源码的小伙伴可以在公众号回复我的世界 Pytho ...
- 【博主推荐】html好看的拼图小游戏(附源码)
拼图目录 html好看的拼图小游戏 1.拼图效果示意图 1.1 第一级 九宫格拼图 1.2 第二级 十六宫格拼图 1.3 第三级 三十二宫格拼图 14 第三级 八十一宫格拼图 2.图片切图说明 3.实 ...
- 一口气用Python写了13个小游戏 (附源码)
大家好,今天给大家分享13个游戏源码,可以自己复现玩玩,研究下里面的编程逻辑,对学习编程(特别是初学者)应该会有很大帮助. 由于文章较长,大家记得滑到文末点个赞哈- 1.吃金币 源码分享: impor ...
- 【Python游戏】基于pygame实现的一个Dino Rush 恐龙宝贝冲冲冲的小游戏 | 附源码
前言 halo,包子们晚上好 很久没有更新啦,主要是小编这边最近有点小忙 今天给大家整一个Dino Rush 恐龙宝贝冲冲冲的小游戏 还是一个比较记经典的小游戏,还记这可谷歌浏览器上没有网也能打发时间 ...
- 用C语言easyx库来写一个简单的翻翻乐小游戏(附源码素材)
简明目录 写在前面 easyx库 准备工作 新建项目文件 分析 素材分析 上代码吧 地图表示 开始界面 地图初始化(打乱) 游戏过程实现 主函数的实现 测试 优化 1.游戏分数 2.游戏时间 3.nu ...
最新文章
- 超参数搜索——网格搜索和随机搜索
- 服务器反馈为空,反馈服务器端error的处理
- python3 正则表达式 嵌套表格_在Python中将嵌套结构与正则表达式匹配
- AAAI 2020 | NAS+目标检测：AI设计的目标检测模型长啥样？
- 项羽java_Java中高级面试题
- 八数码问题II-bfs和map标记
- 从 Storm 到 Flink，汽车之家基于 Flink 的实时 SQL 平台设计思路与实践
- Cgroups控制cpu，内存，io示例
- Python网络爬虫
- SOLIDWORKS Composer生成BOM表属性不显示的解决办法
- 这篇文章说说特征工程(反欺诈与征信变量)
- c语言 switch案例,c语言switch case语句使用例子
- 八段数码管数字显示实验c语言,硬件实验十 八段数码管显示
- 已知经纬度自动在地图上标点
- 计算机网络验证性实验-棋歌教学网
- Maya: Time Editor Maya教程：时间编辑器 Lynda课程中文字幕
- linux下QT工程调用opencv、libtorch，并用cmake编译，及其遇到的一些问题的解决方法
- K8S集群搭建，并部署nginx实现跨网络访问
- 云集宣布品牌升级，推出全新slogan“购物享受批发价”
- 腾讯优图·AI 开放平台全面升级：AI 能力最全面的平台