魔方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>
<.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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