Web前端--HTML+Canvas+Js实现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魔方中，旋转中心就是立方体的几何中心。
三、案列目录
四、代码实现
<html lang="en" style="font-size: 2.21333px;"> <head>
<meta charset="UTF-8">
<title>HTML5 3D魔方小游戏</title>
<meta name="viewport"
content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="ui"> <div class="ui__background" style="background: rgb(209, 213, 219);"></div> <div class="ui__game">
<!-- <canvas width="2880" height="664" style="width: 1440px; height: 332px;"></canvas> -->
</div> <div class="ui__texts">
<h1 class="text text--title" style="opacity: 1;">
<span><i style="opacity: 1; transform: rotate3d(0, 1, 0, 0deg);">T</i><i
style="opacity: 1; transform: rotate3d(0, 1, 0, 0deg);">H</i><i
style="opacity: 1; transform: rotate3d(0, 1, 0, 0deg);">E</i></span>
<span><i style="opacity: 1; transform: rotate3d(0, 1, 0, 0deg);">C</i><i
style="opacity: 1; transform: rotate3d(0, 1, 0, 0deg);">U</i><i
style="opacity: 1; transform: rotate3d(0, 1, 0, 0deg);">B</i><i
style="opacity: 1; transform: rotate3d(0, 1, 0, 0deg);">E</i></span>
</h1>
<div class="text text--note" style="opacity: 0.999789;">
双击魔方即可开始
</div>
<div class="text text--timer">
0:00
</div>
<div class="text text--complete">
<span>Complete!</span>
</div>
<div class="text text--best-time">
<svg class="icon" viewBox="0 0 576 512" style="width: 1.125em; height: 1em;">
<path fill="currentColor"
d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 66.5 77.9 131.7 171.9 142.4C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6C498.4 275.6 576 210.3 576 144V88c0-13.3-10.7-24-24-24zM64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-47.5-16.4-77-49.9-77-70.2zm448 0c0 20.2-29.4 53.8-77 70.2 7-25 11.8-53.6 12.8-86.2H512v16zm-127.3 4.7l-39.6 38.6 9.4 54.6c1.7 9.8-8.7 17.2-17.4 12.6l-49-25.8-49 25.8c-8.8 4.6-19.1-2.9-17.4-12.6l9.4-54.6-39.6-38.6c-7.1-6.9-3.2-19 6.7-20.5l54.8-8 24.5-49.6c4.4-8.9 17.1-8.9 21.5 0l24.5 49.6 54.8 8c9.6 1.5 13.5 13.6 6.4 20.5z"
class=""></path>
</svg>
<span>Best Time!</span>
</div>
</div> <div class="ui__prefs">
<div class="range" name="flip">
<div class="range__label">Flip Type</div>
<div class="range__track">
<div class="range__track-line"></div>
<div class="range__handle" style="left: 0%;">
<div style="background: rgb(65, 170, 200);"></div>
</div>
</div>
<div class="range__list">
<div>Swift </div>
<div>Smooth</div>
<div>Bounce</div>
</div>
</div>
<div class="range" name="scramble">
<div class="range__label">Scramble Length</div>
<div class="range__track">
<div class="range__track-line"></div>
<div class="range__handle" style="left: 0%;">
<div style="background: rgb(65, 170, 200);"></div>
</div>
</div>
<div class="range__list">
<div>20</div>
<div>25</div>
<div>30</div>
</div>
</div>
<div class="range" name="fov">
<div class="range__label">Camera Angle</div>
<div class="range__track">
<div class="range__track-line"></div>
<div class="range__handle" style="left: 18.6047%;">
<div style="background: rgb(65, 170, 200);"></div>
</div>
</div>
<div class="range__list">
<div>Ortographic</div>
<div>Perspective</div>
</div>
</div>
<div class="range" name="theme">
<div class="range__label">Color Scheme</div>
<div class="range__track">
<div class="range__track-line"></div>
<div class="range__handle" style="left: 0%;">
<div style="background: rgb(65, 170, 200);"></div>
</div>
</div>
<div class="range__list">
<div>Cube</div>
<div>Erno</div>
<div>Dust</div>
<div>Camo</div>
<div>Rain</div>
</div>
</div>
</div> <div class="ui__stats">
<div class="stats" name="total-solves">
<i>Total solves:</i><b>-</b>
</div>
<div class="stats" name="best-time">
<i>Best time:</i><b>-</b>
</div>
<div class="stats" name="worst-time">
<i>Worst time:</i><b>-</b>
</div>
<div class="stats" name="average-5">
<i>Average of 5:</i><b>-</b>
</div>
<div class="stats" name="average-12">
<i>Average of 12:</i><b>-</b>
</div>
<div class="stats" name="average-25">
<i>Average of 25:</i><b>-</b>
</div>
</div> <div class="ui__buttons">
<button class="btn btn--bl btn--stats">
<svg class="icon" viewBox="0 0 576 512" style="width: 1.125em; height: 1em;">
<path fill="currentColor"
d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 66.5 77.9 131.7 171.9 142.4C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6C498.4 275.6 576 210.3 576 144V88c0-13.3-10.7-24-24-24zM64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-47.5-16.4-77-49.9-77-70.2zm448 0c0 20.2-29.4 53.8-77 70.2 7-25 11.8-53.6 12.8-86.2H512v16zm-127.3 4.7l-39.6 38.6 9.4 54.6c1.7 9.8-8.7 17.2-17.4 12.6l-49-25.8-49 25.8c-8.8 4.6-19.1-2.9-17.4-12.6l9.4-54.6-39.6-38.6c-7.1-6.9-3.2-19 6.7-20.5l54.8-8 24.5-49.6c4.4-8.9 17.1-8.9 21.5 0l24.5 49.6 54.8 8c9.6 1.5 13.5 13.6 6.4 20.5z"
class=""></path>
</svg>
</button>
<button class="btn btn--bl btn--prefs"
style="transform: translate3d(0px, 0em, 0px); opacity: 0.998656; pointer-events: all;">
<svg class="icon" viewBox="0 0 512 512" style="width: 1em; height: 1em;">
<path fill="currentColor"
d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"
class=""></path>
</svg>
</button>
<button class="btn btn--bl btn--back">
<svg class="icon" viewBox="0 0 512 512" style="width: 1em; height: 1em;">
<path transform="translate(512, 0) scale(-1,1)" fill="currentColor"
d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z"
class=""></path>
</svg>
</button>
<button class="btn btn--br btn--pwa"
style="color: rgb(65, 170, 200); transform: translate3d(0px, 0em, 0px); opacity: 0.998656; pointer-events: all;">
</button>
</div> </div> <script src="js/three.min.js"></script>
<script src="js/index.js"></script> </body> </html>
Web前端--HTML+Canvas+Js实现3D魔方小游戏的更多相关文章
- 原生JS实现的h5小游戏-植物大战僵尸
代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...
- js实现表格配对小游戏
js实现表格配对小游戏 一.总结 一句话总结: 二.js实现表格配对 1.配对游戏案例说明 实例描述: 当用户点击两个相同的图案或字符后配对成功,全部配对成功后游戏获胜 案例008采用了大家常见的小游 ...
- JS实现植物大战僵尸小游戏，代码记录及效果展示
前几天看到了一个很有趣的demo,用js制作植物大战僵尸小游戏,本着学习的心态,对照着做了一下,发现这里面的一些代码设计的确很精妙,这里分享下源码和效果,如果有需要,可以看下. 效果如下: 下载地址
- html5+Canvas实现酷炫的小游戏
最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪, ...
- css3+jquery+js做的翻翻乐小游戏
主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: <div class="container& ...
- canvas写个简单的小游戏
之前在HTML5 Canvas属性和方法汇总一文中,介绍过Canvas的各种属性以及方法的说明,并列举了自己写的一些Canvas demo,接下来开始写一个简单的小游戏吧,有多简单,这么说吧,代码不到 ...
- 原生js写的flybird小游戏
游戏地址:http://zangzhihong.jusukeji.com/flybird/index.html html部分 <!DOCTYPE html> <!-- This ...
- [web前端] css3 transition属性实现3d动画效果
cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...
- web前端利用turf.js生成等值线、等值面
样例如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- web前端面试系列 - js中的prototype
js中一切皆为对象,其中函数也是一种对象, 而每个函数都有一个prototype属性,其值也是一个对象. 一.prototype的作用 1. 在多个实例对象之间共享数据和方法. 2. 通过原型链实现继 ...
随机推荐
- 版本控制工具Git介绍-01
使用版本控制工具是为了方便团队开发,比如多人共同维护一个项目的时候,用版本控制工具可以很方便的维护项目代码,如果哪天你改了一个版本,出问题了,我们也可以很快的找到你改了什么,这里介绍使用比较多的版本控 ...
- 【ELK解决方案】ELK集群+RabbitMQ部署方案以及快速开发RabbitMQ生产者与消费者基础服务
前言: 大概一年多前写过一个部署ELK系列的博客文章,前不久刚好在部署一个ELK的解决方案,我顺便就把一些基础的部分拎出来,再整合成一期文章.大概内容包括:搭建ELK集群,以及写一个简单的MQ服务. ...
- Go语言核心36讲32
你好,我是郝林,今天我们继续分享原子操作的内容. 我们接着上一篇文章的内容继续聊,上一篇我们提到了,sync/atomic包中的函数可以做的原子操作有:加法(add).比较并交换(compare an ...
- wiki搭建详细过程及步骤
wiki搭建详细过程及步骤 1.查看yum库中jdk的版本 2.选择java-1.8.0安装 3.配置环境变量 4.环境变量生效 5.查看jdk是否安装成功 6.启动mysql服务 7.下载confl ...
- i春秋Hello World
打开只有一句hello world,直接查看源码,发现一个flag.xmas.js文件 试试直接访问http://106.75.72.168:9999/flag.xmas.js http://106 ...
- redisson分布式锁原理剖析
redisson分布式锁原理剖析 相信使用过redis的,或者正在做分布式开发的童鞋都知道redisson组件,它的功能很多,但我们使用最频繁的应该还是它的分布式锁功能,少量的代码,却实现了加锁. ...
- python实现AES加密解密
1. 前言 AES是一种对称加密,所谓对称加密就是加密与解密使用的秘钥是一个. 之前写过一片关于python AES加密解密的文章,但是这里面细节实在很多,这次我从 参数类型.加密模式.编码模式.补全 ...
- 使用Python实现多线程、多进程、异步IO的socket通信
多线程实现socket通信服务器端代码 import socket import threading class MyServer(object): def __init__(self): # 初始化 ...
- ChatGPT 加图数据库 NebulaGraph 预测 2022 世界杯冠军球队
一次利用 ChatGPT 给出数据抓取代码,借助 NebulaGraph 图数据库与图算法预测体坛赛事的尝试. 作者:古思为 蹭 ChatGPT 热度 最近因为世界杯正在进行,我受到这篇 Cambri ...
- 像go 一样 打造.NET 单文件应用程序的编译器项目bflat 发布 7.0版本
现代.NET和C#在低级/系统程序以及与C/C++/Rust等互操作方面的能力完全令各位刮目相看了,有人用C#开发的64位操作系统: GitHub - nifanfa/MOOS: C# x64 ope ...