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

交互式`3D`魔方

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

运行效果：

一：`index.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`

.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`

#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`

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