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