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;
}

注意：

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

相关推荐
WeiXiao_Hyy31 分钟前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
吃杠碰小鸡1 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone1 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09011 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农1 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king2 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳2 小时前
JavaScript 的宏任务和微任务
javascript
夏幻灵3 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星3 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_3 小时前
Vue 3 中 watch 的使用详解：监听响应式数据变化的利器
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03使用 1panel面板 部署 php网站04OpenClaw Chrome扩展使用教程 - 浏览器中继控制05Vue-skills的中文文档06Linux下V2Ray安装配置指南07让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南08从零搭建一个 PHP 登录注册系统（含完整源码）09UV安装并设置国内源10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示