Web前端项目-交互式3D魔方【附源码】

温轻舟2024-06-20 12:35

交互式3D魔方

​ 3D魔方游戏是一款基于网页技术的三维魔方游戏。它利用HTML、CSS和JavaScript前端技术来实现3D效果，并在网页上呈现出逼真的魔方操作体验。

运行效果：

一：index.html

html 复制代码 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles/cube.css">
    <link rel="stylesheet" type="text/css" href="styles/doodle2.css">
    <link rel="stylesheet" type="text/css" href="styles/certificate2.css">

    <script charset="utf-8" src="scripts/tween.r12.js"></script>
    <script charset="utf-8" src="scripts/three.js"></script>
    <script charset="utf-8" src="scripts/cuber.min.js"></script>
	
  </head>
  <body>
    <div id="bg"></div>
    <div id="container"></div>
    <div id="fail">
      <img src="media/static-cube.png"/>
      <div id="upgradeText" class="bubble fadeTransition">
        <div class="upgradetext">To play, please use a supported hardware configuration and the latest version of one of these browsers:</div>
        <br>
        <a class="upgradetext" href="https://www.google.com/chrome/browser/" target="_blank">Chrome</a><br>
        <a class="upgradetext" href="https://www.mozilla.org/firefox" target="_blank">Firefox</a><br>
        <a class="upgradetext" href="https://www.apple.com/safari" target="_blank">Safari</a><br>
        <span class="pointerleft SPRITE_carrot_down_2x"></span>
      </div>
    </div>
    <div id="uipanel" class="fadeTransition" style="display:none">
      <div id="movecounter">0</div>
      <div id="buttonpanel">
        <div id="sharebubble" class="fadeTransition" style="opacity:0">
          <input id="shareshortlink" type="text" value="google.com/doodles" readonly/>
          <div id="sharegplus" class="bubbleicon SPRITE_google_plus_64_2x"></div>
          <div id="sharefacebook" class="bubbleicon SPRITE_facebook_64_2x"></div>
          <div id="sharetwitter" class="bubbleicon SPRITE_twitter_64_2x"></div>
          <div id="shareemail" class="bubbleicon SPRITE_email_64_2x"></div>
        </div>
        <div id="uibuttons">
          <div id="sharebutton" class="bubbleicon SPRITE_share_64_2x"></div>
          <div id="helpbutton" class="bubbleicon SPRITE_help_64_2x"></div>
          <div id="searchbutton" class="bubbleicon SPRITE_search_64_2x"></div>
        </div>
      </div>
      <div id="helpbubble" class="bubble" style="display:none">
        <span class="pointerup SPRITE_carrot_grey_up_2x"></span>
        <div id="helpimage" class="one"></div>
        <div id="helptext" class="helptext"></div>
        <div id="helpnext" class="helptext"></div>
        <span class="pointerdown SPRITE_carrot_down_2x"></span><br>
      </div>
    </div>
    <script charset="utf-8" src="scripts/iecss3d.js"></script>
    <script charset="utf-8" src="scripts/ierenderer.js"></script>
    <script charset="utf-8" src="scripts/deviceMotion.js"></script>
    <script charset="utf-8" src="scripts/locked.js"></script>
   
    <script charset="utf-8" src="scripts/textBox.js"></script>
    <script charset="utf-8" src="scripts/ResizeableTextBox.3.js"></script>
    <script charset="utf-8" src="scripts/divBox.js"></script>
    <script charset="utf-8" src="scripts/frames.js"></script>
    <script charset="utf-8" src="scripts/certificate.js"></script>
    <script charset="utf-8" src="scripts/main3.js"></script>
  </body>
</html>

二：styles包

（1）cube.css
css 复制代码 
.cube {
 width:  100%;
 height: 100%;
}
.faceLabel {
 display: none;
 position: absolute;
 font-size: 60px;
 text-align: center;
 text-shadow: 0 0 24px rgba( 0, 0, 0, 0.3 );
 color: #FFF;
}
.cube .cubelet {
 width:  1em;
 height: 1em;
 position: absolute;
 box-sizing: border-box;
}
.cube .face {
 position: absolute;
 width:  1em;
 height: 1em;
 background-color: #000;
 text-align: center;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility:hidden;
 -o-backface-visibility:hidden;
 backface-visibility:hidden;
 padding: 0.05em;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}
.cube .face.faceIntroverted { background-color: #000; }
.cube .face.faceTransparent { background-color: transparent; }
.purty .face { opacity: 0.5; }
.purty .face.faceFront { background-color: #FFF; }
.purty .face.faceUp    { background-color: #E87000; }
.purty .face.faceRight { background-color: #3D81F6; }
.purty .face.faceDown  { background-color: #DC422F; }
.purty .face.faceLeft  { background-color: #009D54; }
.purty .face.faceBack  { background-color: #F5B400; }
.cube .face > .wireframe {
 display: none;
 position: absolute;
 width:  140px;
 height: 140px;
 background-color: rgba( 255, 255, 255, 0.05 );
}
.cube .sticker {
 width:  100%;
 height: 100%;
 background-color: #F0F;
 border-radius: 0.1em;
 text-align: center;
}
.cube .sticker.red   { background: #DC422F; }
.cube .sticker.white  { background: #F3F3F3; }
.cube .sticker.blue  { background: #3D81F6;  }
.cube .sticker.green  { background: #009D54; }
.cube .sticker.orange  { background: #E87000;  }
.cube .sticker.yellow  { background: #F5B400;  }
.cube .sticker.stickerLogo {
 background-size: 100% 100%;
 background-repeat: none;
}
.cube .face > .id {
 display: none;
 position: absolute;
 z-index: 1000;
 width:  90%;
 height: 90%;
 font-size:   1em;
 line-height: 0.9em;
 text-align: center;
 color: #000;
}
.cube .face > .id > .underline {
 border-bottom: 1px solid #000;
}
.cube .face.faceIntroverted > .id {
 color: #FEFEFE;
}
.cube .face.faceIntroverted > .id > .underline {
 border-bottom: 1px solid #FEFEFE;
}
.cube .face > .text {
 display: none;
 position: absolute;
 z-index: 2000;
 width:  100%;
 height: 100%;
 text-align: center;
 color: #FFF;
 font-size:   1em;
 line-height: 1em;
}
（2）certificate2.css
css 复制代码 
#certName, #certSolved{
 width: 1100px;
 color: #DC422F;
 padding: 20px;
 font-family: "Rubik One", Arial, sans-serif;
 font-size: 180px;
 text-align: center;
 line-height: .97em;
 text-transform: uppercase;
}
#certDate, #certMovesHeader, #certTimeHeader, #certName, #certSolved, #certTimeNumber, #certMovesNumber{
  -webkit-user-select: none;
   -khtml-user-select: none;
    -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
            cursor: default;
}
#certDate{
 width: 1000px;
 color: #000;
 padding: 20px;
 font-family: "Rubik One", Arial, sans-serif;
 text-transform: uppercase;
 font-size: 110px;
 text-align:center;
 line-height: .8em;
}
#certMovesHeader, #certTimeHeader {
 width: 1000px;
 color: #000;
 padding: 20px;
 font-family: "Rubik One", Arial, sans-serif;
 text-transform: uppercase;
 font-size: 90px;
 text-align: center;
 line-height: .8em;
}
#certTimeNumber, #certMovesNumber{
 width: 1000px;
 color: #3D81F6;
 padding: 20px;
 font-family: "Rubik One", Arial, sans-serif;
 font-size: 180px;
 text-align: center;
 line-height: 1.0em;
 text-transform: uppercase;
}
#certLarryName, #certErnoName{
 width: 1000px;
 color: #FF6C00;
 padding: 20px;
 font-family: "Rubik One", Arial, sans-serif;
 font-size: 80px;
 text-align: center;
 line-height: 1.0em;
}
#larrySignature{
 width: 1000px;
 height: 300px;
 background-size: 700px 210px;
 background-repeat:no-repeat;
 background-position:center;
}
#ernoSignature{
 width: 1000px;
 height: 300px;
 background-size: 700px 210px;
 background-repeat:no-repeat;
 background-position:center;
}
#lineLeft, #lineRight{
 width: 1000px;
 height: 10px;
 background-color: #000;
 display: inline-block;
 background-repeat: no-repeat;
 background-position: 100px 100px;
}
.logoFace {
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1000;
    background-size: 100% 100%;
    background-repeat: none;
    top: 0px;
    right: 1px;
    position: absolute;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.faceDown .logoFace.ie{
  -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.cube .sticker.red { background: #DC422F; }
.cube .sticker.white { background: #FFFFFF; }
.cube .sticker.blue { background: #3D81F6; }
.cube .sticker.green { background: #009D54; }
.cube .sticker.orange { background: #FF6C00; }
.cube .sticker.yellow { background: #FDCC09; }
.textBox_IE{
 z-index: 10;
 top:0;
}
（3）doodle2.css
css 复制代码 
html {
  height: 100%;
}
body {
  background-color: #fff;
  display: inline;
  font-family: arial, sans-serif;
  font-size: 13px;
  height: 100%;
  line-height: 40px;
  margin: 0;
  vertical-align: baseline;
  -moz-user-select:-moz-none;
  -ms-user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
}
#fail {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  margin-left: -288px;
  margin-top: -117px;
}
@media not screen and (-webkit-transform-3d){
  #container {
    visibility: hidden;
  }
  #fail {
    display: block;
  }
}
#bg {
  background-color: #fff;
  font-family: arial, sans-serif;
  font-size: 13px;
  height: 100%;
  line-height: 40px;
  margin: 0;
  position: absolute;
  width: 100%;
}
.graydient {
  background: #000;
  background: -moz-radial-gradient(center,ellipse cover,#444 0%,#000000 90%);
  background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#444),color-stop(90%,#000000));
  background: -webkit-radial-gradient(center,ellipse cover,#444 0%,#000000 90%);
  background: -o-radial-gradient(center,ellipse cover,#444 0%,#000000 90%);
  background: -ms-radial-gradient(center,ellipse cover,#444 0%,#000000 90%);
  background: radial-gradient(ellipse at center,#444 0%,#000000 90%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444',endColorstr='#000000',GradientType=1 );
}
.grey {
  background: #555;
}
.white {
  background: #FFF;
}
#container {
  cursor: pointer;
  height: 100%;
  overflow: hidden;
  width: 100%;
  position:relative;
}
.text {
  font-size: 200;
}
.text.textDown  { color: #DC422F; }
.text.textBack  { color: #F5B400; }
.text.textRight { color: #3D81F6; }
.shadow {
  pointer-events: none;
  position: absolute;
  width: 120px;
  height: 120px;
  background: black;
  box-shadow: 0 0 100px 80px black;
  opacity: 0.06;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}
.bubble {
  background: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 3px solid black;
  bottom: 4px;
  line-height: normal;
  padding: 16px;
  position: absolute;
  right: 0;
}
.mobile .bubble {
  background: #000;
  border: 2px solid #555;
  bottom: auto;
  position: absolute;
  right: 0;
  top: 44px;
}
.pointerdown {
  bottom: -15px;
  display: block;
  height: 15px;
  margin: 0 0 0 -5px;
  outline: none;
  position: absolute;
  right: 42px;
}
.mobile .pointerdown {
  display: none;
}
.pointerup {
  display: none;
}
.mobile .pointerup {
  top: -15px;
  display: block;
  outline: none;
  position: absolute;
  right: 68px;
}
.bubbleicon {
  cursor: pointer;
  display: inline-block;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.fadeTransition {
  -webkit-transition: opacity 250ms;
  -moz-transition: opacity 250ms;
  -ms-transition: opacity 250ms;
  -o-transition: opacity 250ms;
  transition: opacity 250ms;
}
#sharebubble {
  display: inline-block;
  vertical-align: bottom;
}
#uibuttons {
  display: inline-block;
}
#buttonpanel {
  line-height: normal;
  position: absolute;
  right: 0;
}
#shareshortlink {
  background: #ddd;
  border: none;
  color: #fff;
  font-weight: bold;
  margin: 0;
  outline: none;
  padding: 10px;
  vertical-align: top;
  width: 120px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#shareshortlink::-ms-clear {
  display: none;
}
#uipanel {
  bottom: 40px;
  height: 32px;
  margin: 0 auto;
  opacity: 0;
  position: relative;
  width: 572px;
}
.mobile #uipanel {
  bottom: auto;
  top: 4px;
  right: 4px;
  width: 100%;
  position: absolute;
}
#movecounter {
  bottom: -8px;
  color: #ddd;
  display: inline-block;
  font-family: "Rubik One";
  font-size: 14pt;
  left: 0;
  position: absolute;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
.mobile #movecounter {
  bottom: auto;
  top: 0;
  color: #555;
  padding: 4px 20px;
  font-size: 16pt;
  font-weight: bold;
}
.upgradetext, .helptext {
  font-family: arial;
  font-size: 12pt;
  font-weight: bold;
  width: 120px;
  color: #999;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
.helptext {
  font-family: arial;
  font-size: 12pt;
  font-weight: bold;
  width: 200px;
  color: #999;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
#helpnext {
  padding-top: 10px;
  cursor: pointer;
}
#helpimage{
  width:160px;
  height: 123px;
  background-size:160px 123px;
}
#helpimage.one{
  width:140px;
  height: 100px;
  background-size:140px 100px;
}
#helpimage.two{
  width:140px;
  height: 100px;
  background-size:140px 100px;
}

注意：

由于博客字数限制，本篇文章所展示的代码并不全面，仅可供参考之用。关于本项目的完整代码及其素材已上传至资源，大家自行去下载就好

相关推荐
轻口味21 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami24 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda1 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs：GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习（三）
前端
机器视觉李小白1 小时前
使用 HTML 和 CSS 实现绚丽的节日烟花效果
css·html·烟花·节日·节日祝福
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库