魔方js小游戏
代码语言：html
所属分类：游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Cube</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">
<style>
*,*:before,*:after{-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;cursor:inherit;margin:0;padding:0;outline:0;font-size:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;text-transform:uppercase}*:focus{outline:0}html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;overflow:hidden;height:100%}body{font-family:bungeefont,sans-serif;font-weight:400;font-style:normal;line-height:1;cursor:default;overflow:hidden;height:100%;font-size:5rem}.icon{display:inline-block;font-size:inherit;overflow:visible;vertical-align:-.125em;preserveaspectratio:none}.range{position:relative;width:14em;z-index:1;opacity:0}.range:not(:last-child){margin-bottom:2em}.range__label{position:relative;font-size:.9em;line-height:.75em;padding-bottom:.5em;z-index:2}.range__track{position:relative;height:1em;margin-left:.5em;margin-right:.5em;z-index:3}.range__track-line{position:absolute;background:rgba(0,0,0,.2);height:2px;top:50%;margin-top:-1px;left:-.5em;right:-.5em;transform-origin:left center}.range__handle{position:absolute;width:0;height:0;top:50%;left:0;cursor:pointer;z-index:1}.range__handle div{transition:background 500ms ease;position:absolute;left:0;top:0;width:.9em;height:.9em;border-radius:.2em;margin-left:-.45em;margin-top:-.45em;background:#41aac8;border-bottom:2px solid rgba(0,0,0,.2)}.range.is-active .range__handle div{transform:scale(1.25)}.range__handle:after{content:"";position:absolute;left:0;top:0;width:3em;height:3em;margin-left:-1.5em;margin-top:-1.5em}.range__list{display:flex;flex-flow:row nowrap;justify-content:space-between;position:relative;padding-top:.5em;font-size:.55em;color:rgba(0,0,0,.5);z-index:1}.stats{position:relative;width:14em;z-index:1;display:flex;justify-content:space-between;opacity:0}.stats:not(:last-child){margin-bottom:1.5em}.stats i{display:inline-block;color:rgba(0,0,0,.5);font-size:.9em}.stats b{display:inline-block;font-size:.9em}.text{position:absolute;left:0;right:0;text-align:center;line-height:.75;perspective:100rem;opacity:0}.text i{display:inline-block;opacity:0;white-space:pre-wrap}.text--title{bottom:75%;font-size:4.4em;height:1.2em}.text--title span{display:block}.text--title span:first-child{font-size:.5em;margin-bottom:.2em}.text--note{top:87%;font-size:1em}.text--timer{bottom:78%;font-size:3.5em;line-height:1}.text--complete,.text--best-time{font-size:1.5em;top:83%;line-height:1em}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-radius:0;border-width:0;position:absolute;pointer-events:none;font-size:1.2em;color:rgba(0,0,0,.25);opacity:0}.btn:after{position:absolute;content:"";width:3em;height:3em;left:50%;top:50%;margin-left:-1.5em;margin-top:-1.5em;border-radius:100%}.btn--bl{bottom:.8em;left:.8em}.btn--br{bottom:.8em;right:.8em}.btn--bc{bottom:.8em;left:calc(50% - 0.5em)}.btn--pwa{transition:color 500ms ease;color:inherit;height:1em}.btn--pwa svg{font-size:.6em;margin:.35em 0}.btn svg{display:block}.ui{pointer-events:none;color:#070d15}.ui,.ui__background,.ui__game,.ui__texts,.ui__prefs,.ui__stats,.ui__buttons{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.ui__background{z-index:1;transition:background 500ms ease;background:#d1d5db}.ui__background:after{position:absolute;top:0;left:0;width:100%;height:100%;content:"";background-image:linear-gradient(to bottom,white 50%,rgba(255,255,255,0) 100%)}.ui__game{pointer-events:all;z-index:2}.ui__game canvas{display:block;width:100%;height:100%}.ui__texts{z-index:3}.ui__prefs,.ui__stats{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;overflow:hidden;z-index:4}.ui__buttons{z-index:5}.ui__notification{transition:transform 500ms ease,opacity 500ms ease;font-family:sans-serif;position:absolute;left:50%;bottom:.6em;padding:.6em;margin-left:-9.4em;width:18.8em;z-index:6;background:rgba(17,17,17,.9);border-radius:.8em;display:flex;align-items:center;flex-flow:row nowrap;color:#fff;user-select:none;opacity:0;pointer-events:none;transform:translateY(100%)}.ui__notification.is-active{opacity:1;pointer-events:all;transform:none}.ui__notification *{text-transform:none}.ui__notification-icon{background-size:100% 100%;left:.6em;top:.6em;width:2.8em;height:2.8em;border-radius:.5em;background:#fff;margin-right:.6em;display:block}.ui__notification-text{font-size:.75em;line-height:1.4em}.ui__notification-text .icon{color:#4f82fd;font-size:1.1em}.ui__notification-text b{font-weight:700}.btn--stats{visibility:hidden}
</style>
</head>
<body>
<div class="ui">
<div class="ui__background"></div>
<div class="ui__game"></div>
<div class="ui__texts">
<h1 class="text text--title">
<span>THE</span>
<span>CUBE</span>
</h1>
<div class="text text--note">
双击即可开始
</div>
<div class="text text--timer">
0:00
</div>
<div class="text text--complete">
<span>Complete!</span>
</div>
<div class="text text--best-time">
<icon trophy></icon>
<span>Best Time!</span>
</div>
</div>
<div class="ui__prefs">
<range name="flip" title="Flip Type" list="Swift ,Smooth,Bounce"></range>
<range name="scramble" title="Scramble Length" list="20,25,30"></range>
<range name="fov" title="Camera Angle" list="Ortographic,Perspective"></range>
<range name="theme" title="Color Scheme" list="Cube,Erno,Dust,Camo,Rain"></range>
</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">
<icon trophy></icon>
</button>
<button class="btn btn--bl btn--prefs">
<icon settings></icon>
</button>
<button class="btn btn--bl btn--back">
<icon back></icon>
</button>
<a href="#" class="btn btn--br btn--pwa">
</button>
</div>
</div>
<script src='http://repo.bfw.wiki/bfwrepo/js/three.js'></script>
<script >
const animationEngine=(()=>{let uniqueID=0;class AnimationEngine{constructor(){this.ids=[];this.animations={};this.update=this.update.bind(this);this.raf=0;this.time=0;}
update(){const now=performance.now();const delta=now-this.time;this.time=now;let i=this.ids.length;this.raf=i?requestAnimationFrame(this.update):0;while(i--)
this.animations[this.ids[i]]&&this.animations[this.ids[i]].update(delta);}
add(animation){animation.id=uniqueID++;this.ids.push(animation.id);this.animations[animation.id]=animation;if(this.raf!==0)return;this.time=performance.now();this.raf=requestAnimationFrame(this.update);}
remove(animation){const index=this.ids.indexOf(animation.id);if(index<0)return;this.ids.splice(index,1);delete this.animations[animation.id];animation=null;}}
return new AnimationEngine();})();class Animation{constructor(start){if(start===true)this.start();}
start(){animationEngine.add(this);}
stop(){animationEngine.remove(this);}
update(delta){}}
class World extends Animation{constructor(game){super(true);this.game=game;this.container=this.game.dom.game;this.scene=new THREE.Scene();this.renderer=new THREE.WebGLRenderer({antialias:true,alpha:true});this.renderer.setPixelRatio(window.devicePixelRatio);this.container.appendChild(this.renderer.domElement);this.camera=new THREE.PerspectiveCamera(2,1,0.1,10000);this.stage={width:2,height:3};this.fov=10;this.createLights();this.onResize=[];this.resize();window.addEventListener('resize',()=>this.resize(),false);}
update(){this.renderer.render(this.scene,this.camera);}
resize(){this.width=this.container.offsetWidth;this.height=this.container.offsetHeight;this.renderer.setSize(this.width,this.height);this.camera.fov=this.fov;this.camera.aspect=this.width/this.height;const aspect=this.stage.width/this.stage.height;const fovRad=this.fov*THREE.Math.DEG2RAD;let distance=(aspect<this.camera.aspect)?(this.stage.height/2)/Math.tan(fovRad/2):(this.stage.width/this.camera.aspect)/(2*Math.tan(fovRad/2));distance*=0.5;this.camera.position.set(distance,distance,distance);this.camera.lookAt(this.scene.position);this.camera.updateProjectionMatrix();const docFontSize=(aspect<this.camera.aspect)?(this.height/100)*aspect:this.width/100;document.documentElement.style.fontSize=docFontSize+'px';if(this.onResize)this.onResize.forEach(cb=>cb());}
createLights(){this.lights={holder:new THREE.Object3D,ambient:new THREE.AmbientLight(0xffffff,0.69),front:new THREE.DirectionalLight(0xffffff,0.36),back:new THREE.DirectionalLight(0xffffff,0.19),};this.lights.front.position.set(1.5,5,3);this.lights.back.position.set(-1.5,-5,-3);this.lights.holder.add(this.lights.ambient);this.lights.holder.add(this.lights.front);this.lights.holder.add(this.lights.back);this.scene.add(this.lights.holder);}
enableShadows(){this.renderer.shadowMap.enabled=true;this.renderer.shadowMap.type=THREE.PCFSoftShadowMap;this.lights.front.castShadow=true;this.lights.front.shadow.mapSize.width=512;this.l.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0