纯CSS3网页版的CS游戏简化模型

Wolfenstein 3d game，包含了第一人称视角射击游戏(FPS) 射击游戏的最基础的元素：3d场景、移动操控和射击。纯CSS也可以做出很棒的交互操控。

html5, game, fps

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 8843
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
    background: #000;
    font-size: 16px;
}
label {
    color: #fff;
}
[type="button"],
[type="radio"] {
    display: none;
}
.controls {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    height: 8em;
    width: 8em;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.button {
    position: absolute;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    background: grey;
}
.button.forwards,
.button.backwards {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.button.forwards {
    top: 0;
    left: 3em;
}
.button.backwards {
    bottom: 0;
    left: 3em;
}
.button.left {
    top: 3em;
    ;
    left: 0;
}
.button.right {
    top: 3em;
    right: 0;
}
.button.turnleft {
    top: 0em;
    left: 0;
}
.button.turnright {
    top: 0em;
    right: 0;
}
.controlsLeft,
.controlsRight {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.controlsLeft {
    -webkit-animation-name: controlsLeft;
    animation-name: controlsLeft;
}
#turnleft:active ~* .controlsLeft {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
@-webkit-keyframes controlsLeft {
    100% {
        -webkit-transform: rotate(3600deg);
        transform: rotate(3600deg);
    }
}
@keyframes controlsLeft {
    100% {
        -webkit-transform: rotate(3600deg);
        transform: rotate(3600deg);
    }
}
.controlsRight {
    -webkit-animation-name: controlsRight;
    animation-name: controlsRight;
}
#turnright:active ~* .controlsRight {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
@-webkit-keyframes controlsRight {
    100% {
        -webkit-transform: rotate(-3600deg);
        transform: rotate(-3600deg);
    }
}
@keyframes controlsRight {
    100% {
        -webkit-transform: rotate(-3600deg);
        transform: rotate(-3600deg);
    }
}
.move {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}
.scene {
    -webkit-transform: translateY(18em);
    transform: translateY(18em);
}
.move {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.walkF {
    -webkit-animation-name: forward;
    animation-name: forward;
}
#forwards:active ~* .walkF {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
@-webkit-keyframes forward {
    100% {
        -webkit-transform: translateZ(280em);
        transform: translateZ(280em);
    }
}
@keyframes forward {
    100% {
        -webkit-transform: translateZ(280em);
        transform: translateZ(280em);
    }
}
.walkB {
    -webkit-animation-name: backwards;
    animation-name: backwards;
}
#backwards:active ~* .walkB {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
@-webkit-keyframes backwards {
    100% {
        -webkit-transform: translateZ(-280em);
        transform: translateZ(-280em);
    }
}
@keyframes backwards {
    100% {
        -webkit-transform: translateZ(-280em);
        transform: translateZ(-280em);
    }
}
.walkL {
    -webkit-animation-name: walkLeft;
    animation-name: walkLeft;
}
#left:active ~* .walkL {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
@-webkit-keyframes walkLeft {
    100% {
        -webkit-transform: translateX(280em);
        transform: translateX(280em);
    }
}
@keyframes walkLeft {
    100% {
        -webkit-transform: translateX(280em);
        transform: translateX(280em);
    }
}
.walkR {
    -webkit-animation-name: walkRight;
    animation-name: walkRight;
}
#right:active ~* .walkR {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
@-webkit-keyframes walkRight {
    100% {
        -webkit-transform: translateX(-280em);
        transform: translateX(-280em);
    }
}
@keyframes walkRight {
    100% {
        -webkit-transform: translateX(-280em);
        transform: translateX(-280em);
    }
}
.rotateR {
    -webkit-animation-name: right;
    animation-name: right;
}
#turnright:active ~* .rotateR {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
@-webkit-keyframes right {
    100% {
        -webkit-transform: rotateY(3600deg);
        transform: rotateY(3600deg);
    }
}
@keyframes right {
    100% {
        -webkit-transform: rotateY(3600deg);
        transform: rotateY(3600deg);
    }
}
.rotateL {
    -webkit-animation-name: left;
    animation-name: left;
}
#turnleft:active ~* .rotateL {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
@-webkit-keyframes left {
    100% {
        -webkit-transform: rotateY(-3600deg);
        transform: rotateY(-3600deg);
    }
}
@keyframes left {
    100% {
        -webkit-transform: rotateY(-3600deg);
        transform: rotateY(-3600deg);
    }
}
.rotateL,
.rotateR {
    /* This isn't working on safari */
    
    -webkit-transform-origin: 25em 0em 50em;
    transform-origin: 25em 0em 50em;
}
.rt {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/Grey10.bmp) left/auto 100%;
}
.lt,
.ft,
.bk {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/Grey9.bmp) left/auto 100%;
}
.bm {
    background: #707070 !important;
}
.tp {
    background: #383838 !important;
}
.transparent {
    background: transparent !important;
}
.gun {
    position: absolute;
    height: 15em;
    width: 13em;
    left: 18em;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
}
.gun::after {
    content: '';
    position: absolute;
    width: 500%;
    height: 100%;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/wolf-gun.gif)0% 0%/cover repeat-x;
    -webkit-transition: -webkit-transform .5s steps(4, end);
    transition: -webkit-transform .5s steps(4, end);
    transition: transform .5s steps(4, end);
    transition: transform .5s steps(4, end), -webkit-transform .5s steps(4, end);
    -webkit-transform: translateX(-80%);
    transform: translateX(-80%);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
#tridiv:active .gun::after {
    -webkit-transform: translateX(-0%);
    transform: translateX(-0%);
    -webkit-transition: none;
    transition: none;
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}
/* Can shoot through divs */

.shape {
    pointer-events: none;
}
/* But can't shoot through walls */

.face {
    pointer-events: auto;
}
.guard {
    display: block;
    position: relative;
    height: 20em;
    width: 20em;
    overflow: hidden;
    -webkit-transform: translate3d(65em, 30em, 10em) rotateY(-90deg);
    transform: translate3d(65em, 30em, 10em) rotateY(-90deg);
    clear: both;
    float: left;
}
#guard:checked ~ * .guard {
    pointer-events: none;
}
.guard::after {
    content: '';
    position: absolute;
    width: 500%;
    height: 100%;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/guard.gif);
    background-size: cover;
    background-position: 0em -20em;
    -webkit-animation: guard 1s steps(1, start) infinite;
    animation: guard 1s steps(1, start) infinite;
}
#guard:checked ~ * .guard::after {
    background-position: 0em 40em;
    -webkit-animation: guard-dead 1s steps(4, start) 1 forwards;
    animation: guard-dead 1s steps(4, start) 1 forwards;
}
@-webkit-keyframes guard {
    0%, 50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    75% {
        -webkit-transform: translateX(-20em);
        transform: translateX(-20em);
    }
    100% {
        -webkit-transform: translateX(-40em);
        transform: translateX(-40em);
    }
}
@keyframes guard {
    0%, 50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    75% {
        -webkit-transform: translateX(-20em);
        transform: translateX(-20em);
    }
    100% {
        -webkit-transform: translateX(-40em);
        transform: translateX(-40em);
    }
}
@-webkit-keyframes guard-dead {
    100% {
        -webkit-transform: translateX(-80em);
        transform: translateX(-80em);
    }
}
@keyframes guard-dead {
    100% {
        -webkit-transform: translateX(-80em);
        transform: translateX(-80em);
    }
}
.boss {
    display: block;
    position: relative;
    height: 20em;
    width: 20em;
    overflow: hidden;
    -webkit-transform: translate3d(80em, 10em, -30em);
    transform: translate3d(80em, 10em, -30em);
    clear: both;
    float: left;
    -webkit-animation: boss-walk 8s infinite linear;
    animation: boss-walk 8s infinite linear;
}
@-webkit-keyframes boss-walk {
    0% {
        -webkit-transform: translate3d(80em, 10em, -30em);
        transform: translate3d(80em, 10em, -30em);
    }
    20% {
        -webkit-transform: translate3d(80em, 10em, -20em);
        transform: translate3d(80em, 10em, -20em);
    }
    50% {
        -webkit-transform: translate3d(80em, 10em, -20em);
        transform: translate3d(80em, 10em, -20em);
    }
    75% {
        -webkit-transform: translate3d(80em, 10em, -30em);
        transform: translate3d(80em, 10em, -30em);
    }
}
@keyframes boss-walk {
    0% {
        -webkit-transform: translate3d(80em, 10em, -30em);
        transform: translate3d(80em, 10em, -30em);
    }
    20% {
        -webkit-transform: translate3d(80em, 10em, -20em);
        transform: translate3d(80em, 10em, -20em);
    }
    50% {
        -webkit-transform: translate3d(80em, 10em, -20em);
        transform: translate3d(80em, 10em, -20em);
    }
    75% {
        -webkit-transform: translate3d(80em, 10em, -30em);
        transform: translate3d(80em, 10em, -30em);
    }
}
#boss:checked ~ * .boss {
    pointer-events: none;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.boss::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 400%;
    height: 300%;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/boss.png);
    background-size: cover;
    -webkit-animation: boss 4s steps(1, start) infinite;
    animation: boss 4s steps(1, start) infinite;
}
#boss:checked ~ * .boss::after {
    -webkit-animation: boss-dead 1s steps(3, start) 1 forwards;
    animation: boss-dead 1s steps(3, start) 1 forwards;
}
@-webkit-keyframes boss {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    6.25% {
        -webkit-transform: translateX(-25%);
        transform: translateX(-25%);
    }
    12.5% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    18.25% {
        -webkit-transform: translateX(-75%);
        transform: translateX(-75%);
    }
    25% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    31.25% {
        -webkit-transform: translateX(-25%);
        transform: translateX(-25%);
    }
    37.5% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    43.75% {
        -webkit-transform: translateX(-75%);
        transform: translateX(-75%);
    }
    50% {
        -webkit-transform: translate(0%, 20em);
        transform: translate(0%, 20em);
    }
    56.25% {
        -webkit-transform: translate(-25%, 20em);
        transform: translate(-25%, 20em);
    }
    62.5% {
        -webkit-transform: translate(-50%, 20em);
        transform: translate(-50%, 20em);
    }
    68.75% {
        -webkit-transform: translate(-75%, 20em);
        transform: translate(-75%, 20em);
    }
    75% {
        -webkit-transform: translate(0%, 20em);
        transform: translate(0%, 20em);
    }
    81.25% {
        -webkit-transform: translate(-25%, 20em);
        transform: translate(-25%, 20em);
    }
    87.5% {
        -webkit-transform: translate(-50%, 20em);
        transform: translate(-50%, 20em);
    }
    93.75% {
        -webkit-transform: translate(-75%, 20em);
        transform: translate(-75%, 20em);
    }
}
@keyframes boss {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    6.25% {
        -webkit-transform: translateX(-25%);
        transform: translateX(-25%);
    }
    12.5% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    18.25% {
        -webkit-transform: translateX(-75%);
        transform: translateX(-75%);
    }
    25% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    31.25% {
        -webkit-transform: translateX(-25%);
        transform: translateX(-25%);
    }
    37.5% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    43.75% {
        -webkit-transform: translateX(-75%);
        transform: translateX(-75%);
    }
    50% {
        -webkit-transform: translate(0%, 20em);
        transform: translate(0%, 20em);
    }
    56.25% {
        -webkit-transform: translate(-25%, 20em);
        transform: translate(-25%, 20em);
    }
    62.5% {
        -webkit-transform: translate(-50%, 20em);
        transform: translate(-50%, 20em);
    }
    68.75% {
        -webkit-transform: translate(-75%, 20em);
        transform: translate(-75%, 20em);
    }
    75% {
        -webkit-transform: translate(0%, 20em);
        transform: translate(0%, 20em);
    }
    81.25% {
        -webkit-transform: translate(-25%, 20em);
        transform: translate(-25%, 20em);
    }
    87.5% {
        -webkit-transform: translate(-50%, 20em);
        transform: translate(-50%, 20em);
    }
    93.75% {
        -webkit-transform: translate(-75%, 20em);
        transform: translate(-75%, 20em);
    }
}
@-webkit-keyframes boss-dead {
    0% {
        -webkit-transform: translate(0%, 40em);
        transform: translate(0%, 40em)
    }
    100% {
        -webkit-transform: translate(-75%, 40em);
        transform: translate(-75%, 40em)
    }
}
@keyframes boss-dead {
    0% {
        -webkit-transform: translate(0%, 40em);
        transform: translate(0%, 40em)
    }
    100% {
        -webkit-transform: translate(-75%, 40em);
        transform: translate(-75%, 40em)
    }
}
/* Add .Singleton to target Applemail 10 */

.Singleton .rotateL {
    -webkit-transform-origin: 25em 0em 0em;
    transform-origin: 25em 0em 0em;
}
.Singleton .rotateR {
    -webkit-transform-origin: 25em 0em 50em;
    transform-origin: 25em 0em 50em;
}
.Singleton .safariFix {
    -webkit-transform: translateZ(50em);
    transform: translateZ(50em);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.Singleton .Appleguard,
.Singleton .Appleboss {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.Singleton .Appleguard {
    -webkit-transform: translateZ(18em);
    transform: translateZ(18em);
}
.Singleton .Appleboss {
    -webkit-transform: translateZ(19em);
    transform: translateZ(19em);
}
.Singleton #guard:checked ~ * .Appleguard,
.Singleton #boss:checked ~ * .Appleboss {
    display: none;
}
.Singleton .gun {
    -webkit-transform: translateX(.5em)translateY(-9em)translateZ(40em)scale(.2);
    transform: translateX(.5em)translateY(-9em)translateZ(40em)scale(.2);
}
#tridiv {
    -webkit-perspective: 50em;
    perspective: 50em;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 50em;
    height: 37.5em;
    background: transparent;
    font-size: 100%;
    outline: .25em darkred solid;
}
.scene,
.shape,
.face,
.face-wrapper {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.scene {
    width: 80em;
    height: 80em;
    top: 50%;
    left: 50%;
    margin: -40em 0 0 -40em;
}
.shape {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
}
.face,
.face-wrapper {
    overflow: hidden;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face-wrapper .face {
    left: 100%;
    width: 100%;
    height: 100%
}
.photon-shader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}
.side {
    left: 50%;
}
[class*="cuboid"] .ft,
[class*="cuboid"] .bk {
    width: 100%;
    height: 100%;
}
[class*="cuboid"] .bk {
    left: 100%;
}
[class*="cuboid"] .rt {
    -webkit-transform: rotateY(-90deg) translateX(-50%);
    transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
    -webkit-transform: rotateY(90deg) translateX(-50%);
    transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
    -webkit-transform: rotateX(90deg) translateY(-50%);
    transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
    -webkit-transform: rotateX(-90deg) translateY(-50%);
    transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
    left: 100%;
}
[class*="cuboid"] .bm {
    top: 100%;
}
/* .cub-4 styles */

.cub-4 {
    -webkit-transform: translate3D(0em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: translate3D(0em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 20em;
    height: 20em;
    margin: -10em 0 0 -10em;
}
.cub-4 .ft {
    -webkit-transform: translateZ(10em);
    transform: translateZ(10em);
}
.cub-4 .bk {
    -webkit-transform: translateZ(-10em) rotateY(180deg);
    transform: translateZ(-10em) rotateY(180deg);
}
.cub-4 .rt,
.cub-4 .lt {
    width: 20em;
    height: 20em;
}
.cub-4 .tp,
.cub-4 .bm {
    width: 20em;
    height: 20em;
}
/* .cub-5 styles */

.cub-5 {
    -webkit-transform: translate3D(0em, 0em, 30em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: translate3D(0em, 0em, 30em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 20em;
    height: 20em;
    margin: -10em 0 0 -10em;
}
.cub-5 .ft {
    -webkit-transform: translateZ(10em);
    transform: translateZ(10em);
}
.cub-5 .bk {
    -webkit-transform: translateZ(-10em) rotateY(180deg);
    transform: translateZ(-10em) rotateY(180deg);
}
.cub-5 .rt,
.cub-5 .lt {
    width: 20em;
    height: 20em;
}
.cub-5 .tp,
.cub-5 .bm {
    width: 20em;
    height: 20em;
}
.cub-5 .ft {
    width: 20em;
    margin-left: 0em;
}
.cub-5 .bk {
    width: 20em;
    margin-left: 0em;
}
.cub-5 .rt,
.cub-5 .lt {
    width: 20em;
}
.cub-5 .tp,
.cub-5 .bm,
.cub-5 .tp .photon-shader,
.cub-5 .bm .photon-shader {
    border-radius: 0em;
}
.cub-5 .side {
    width: 0.025em;
}
/* .cub-6 styles */

.cub-6 {
    -webkit-transform: translate3D(25em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: translate3D(25em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 30em;
    height: 20em;
    margin: -10em 0 0 -15em;
}
.cub-6 .ft {
    -webkit-transform: translateZ(10em);
    transform: translateZ(10em);
}
.cub-6 .bk {
    -webkit-transform: translateZ(-10em) rotateY(180deg);
    transform: translateZ(-10em) rotateY(180deg);
}
.cub-6 .rt,
.cub-6 .lt {
    width: 20em;
    height: 20em;
}
.cub-6 .tp,
.cub-6 .bm {
    width: 30em;
    height: 20em;
}
/* .cub-7 styles */

.cub-7 {
    -webkit-transform: translate3D(50em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: translate3D(50em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 20em;
    height: 20em;
    margin: -10em 0 0 -10em;
}
.cub-7 .ft {
    -webkit-transform: translateZ(10em);
    transform: translateZ(10em);
}
.cub-7 .bk {
    -webkit-transform: translateZ(-10em) rotateY(180deg);
    transform: translateZ(-10em) rotateY(180deg);
}
.cub-7 .rt,
.cub-7 .lt {
    width: 20em;
    height: 20em;
}
.cub-7 .tp,
.cub-7 .bm {
    width: 20em;
    height: 20em;
}
.cub-7 .ft {
    width: 20em;
    margin-left: 0em;
}
.cub-7 .bk {
    width: 20em;
    margin-left: 0em;
}
.cub-7 .rt,
.cub-7 .lt {
    width: 20em;
}
.cub-7 .tp,
.cub-7 .bm,
.cub-7 .tp .photon-shader,
.cub-7 .bm .photon-shader {
    border-radius: 0em;
}
.cub-7 .side {
    width: 0.025em;
}
/* .cub-8 styles */

.cub-8 {
    -webkit-transform: translate3D(50em, 0em, -20em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: translate3D(50em, 0em, -20em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 20em;
    height: 20em;
    margin: -10em 0 0 -10em;
}
.cub-8 .ft {
    -webkit-transform: translateZ(20em);
    transform: translateZ(20em);
}
.cub-8 .bk {
    -webkit-transform: translateZ(-20em) rotateY(180deg);
    transform: translateZ(-20em) rotateY(180deg);
}
.cub-8 .rt,
.cub-8 .lt {
    width: 40em;
    height: 20em;
}
.cub-8 .tp,
.cub-8 .bm {
    width: 20em;
    height: 40em;
}
.cub-8 .ft {
    width: 20em;
    margin-left: 0em;
}
.cub-8 .bk {
    width: 20em;
    margin-left: 0em;
}
.cub-8 .rt,
.cub-8 .lt {
    width: 40em;
}
.cub-8 .tp,
.cub-8 .bm,
.cub-8 .tp .photon-shader,
.cub-8 .bm .photon-shader {
    border-radius: 0em;
}
.cub-8 .side {
    width: 0.025em;
}
@media screen and (max-width: 500px) {
    body {
        font-size: 2vw;
    }
    #tridiv {
        width: 100%;
    }
    .controls {
        font-size: 14px;
    }
}

HTML

Wolfenstein 3d game，包含了第一人称视角射击游戏(FPS) 射击游戏的最基础的元素：3d场景、移动操控和射击。纯CSS也可以做出很棒的交互操控。

html5, game, fps

编辑器支持Emmet

快捷键

Wolfenstein 3d game，包含了第一人称视角射击游戏(FPS) 射击游戏的最基础的元素：3d场景、移动操控和射击。纯CSS也可以做出很棒的交互操控。

html5, game, fps

使用ReactJS实现的一个简化版无尽地牢RPG游戏

JS 最简化版本的俄罗斯方块游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：