div+scss实现三维走出迷宫游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：div+scss实现三维走出迷宫游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style type = 'text/scss'>
$blk: #1a0606;
$none: rgba(#fff,0);
$key: #BDBBAF;
$white: lighten($key,20);
$floor: #D73A4D;
$red: $floor;
$body: #4B4640;
$kk: rgba($key,.5);
$blk2: lighten($blk,5);

:root {
    --white: #e6e0e0;
    --floor: #D73A4D;
}

:root:has(#gfx1:checked) {
    --white: #574444;
    --floor: #69262e;

    div:before, darkness {
        display: none;
    }
}

html {
    font-size: clamp(6px, 1vh, 22px);
    background: $blk;
}

@media (orientation: portrait) {
    html {
        font-size: .8vh;
    }
}

body {
    margin: 0;
    text-align: center;
    color: $none;
    font-size: 2rem;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;

    & > div {
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;

        &:before {
            content: '';
            top: 0;
            left: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        @media (min-width: 480px) {
            &:before {
                background: radial-gradient($none, rgba($blk,.7));
                box-shadow: inset 0 1rem 3rem $blk,inset 0 -1rem 3rem $blk,inset 0 0 5rem $blk;
                transform: translate3d(0,0,0);
            }
        }
    }

    content *, content *:before, content *:after {
        box-sizing: border-box;
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        transform-style: preserve-3d;
    }
}

content, room {
    width: 100rem;
    height: 100rem;
}

content {
    margin: auto;
    position: absolute;
    perspective: 100rem;
    display: block;
    inset: 0;
    left: -100rem;
    right: -100rem;

    @media (max-width: 480px) {
        transform: scale(.8);
    }
}

input {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    display: none;
}

#top-view:checked {
    ~ content > w {
        transform: translate3d(50rem,200rem,-600rem) rotateX(-90deg) !important;
    }
}

#bottom-floor:checked {
    ~ content > w > x > y > z:nth-of-type(1) room {
        display: none;
    }
}

w, x, y, z {
    width: 100%;
    height: 100%;
}

w {
    transform-origin: 50rem -50rem 0;
    transition: all 1s ease-in-out;
    animation: enter 1s ease-in-out backwards;
    transform: translate3d(0,100rem,0);

    @keyframes enter {
        0% {
            transform: translate3d(50rem,300rem,-800rem) rotateX(-90deg);
        }
    }
}

y {
    transform-origin: -50rem 0;
}

x {
    transform-origin: 50rem 0 50rem;
}

z {
    transform-origin: 0 0;
}

$starscolour: #fff,lighten($red,20 );

@function stars ($a, $b) {
    $value: '#{random(100)}vw #{random(90)}vh '+ $b + ' ' + '#{nth($starscolour, random(length($starscolour)))}';

    @for $i from 2 through $a {
        $value: '#{$value} , #{random(100)}vw #{random(90)}vh '+ $b + ' ' + '#{nth($starscolour, random(length($starscolour)))}';
    }

    @return unquote($value);
}

$stars: stars(50, .1rem);

w {
    &:before, &:after {
        transform: translate3d(-500vw,-600vh, -1000rem) scale(10);
        content: '';
        width: .3rem;
        height: .3rem;
        background: #fff;
        box-shadow: $stars;
        right: 0;
        margin: auto;
    }
}

graphics, numbers {
    bottom: 1rem;
    left: 1rem;
    position: absolute;
    z-index: 2;

    label {
        padding: .5rem 1rem;
        background: $blk;
        color: $white;
        border-radius: 1rem;
        cursor: pointer;
        font-size: 1.5rem;
    }
}

#gfx2:checked ~ graphics > [for="gfx2"],
#gfx1:checked ~ graphics > [for="gfx1"],
#numon:checked ~ numbers > [for="numon"],
#numoff:checked ~ numbers > [for="numoff"] {
    display: none;
}

numbers {
    bottom: 1rem;
    left: 14rem;
    position: absolute;
    z-index: 2;
}

:root:has(#numoff:checked) {
    body, room {
        color: #fff;
    }

    input {
        display: inline;
    }
}

.d-none {
    display: none !important;
}
//@import "css-sig";
sig {
    &, * {
        height: 9.25em;
        overflow: hidden;
        border-radius: .5em;
    }

    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: .5rem;
    color: $white;
    width: 10em;
    transform: skewX(10deg) scaleY(.45) rotate(2deg);
    mix-blend-mode: difference;

    &:before, *:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5em;
        height: 5em;
        background: currentColor;
        transform: translate3d(-2.5em,0,0) rotate(-45deg);
        box-shadow: -3em 3em 0 0 currentColor;
        border-radius: .5em 2em .5em 2em;
    }

    * {
        width: 5em;
        transform: translate3d(3.75em,0,0) scaleY(.95);
        display: block !important;

        &:before {
            transform: translate3d(-3em,-2em,0) rotate(-45deg);
            box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
            border-radius: .5em;
        }
    }
}
//@import "maze";
room {
    transform: translate3d(0,0,0) rotateX(90deg);
    transform-origin: 0 0 0;
    color: $none;
    font-size: 30rem;
    background: var(--floor);

    &:before, &:after {
        width: 100%;
        height: 100%;
        background: var(--white);
        transform-origin: 0 0 0;
    }

    &:before {
        transform: translate3d(0,0,100rem) rotateY(90deg);
    }

    &:after {
        transform: translate3d(100rem,0,0) rotateY(-90deg);
    }
}

z:nth-of-type(1) room {
    &:nth-of-type(36), //
    &:nth-of-type(37), //
    &:nth-of-type(39), //
    &:nth-of-type(40), //
    &:nth-of-type(41), //
    &:nth-of-type(42), //
    &:nth-of-type(35), //
    &:nth-of-type(28) {
        &:after {
            filter: brightness(.5);
        }
    }

    &:nth-of-type(14), //
    &:nth-of-type(6), //
    &:nth-of-type(38), //
    &:nth-of-type(5), //
    &:nth-of-type(12), //
    &:nth-of-type(26), //
    &:nth-of-type(33) {
        &:before {
            filter: brightness(.5);
        }
    }

    &:nth-of-type(22), //
    &:nth-of-type(8), //
    &:nth-of-type(38), //
    &:nth-of-type(7), //
    &:nth-of-type(21), //
    &:nth-of-type(18), //
    &:nth-of-type(17) {
        &:after {
            filter: brightness(.75);
        }
    }

    &:nth-of-type(31), //
    &:nth-of-type(14), //
    &:nth-of-type(36), //
    &:nth-of-type(22), //
    &:nth-of-type(8), //
    &:nth-of-type(16), //
    &:nth-of-type(21), //
    &:nth-of-type(35), //
    &:nth-of-type(42), //
    &:nth-of-type(28), //
    &:nth-of-type(4) {
        &:before {
            filter: brightness(.75);
        }
    }

    &:nth-of-type(1) {
        transform: translate3d(-300rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(2) {
        transform: translate3d(-200rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(3) {
        transform: translate3d(-100rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(4) {
        transform: translate3d(-100rem, 0, -400rem) rotateX(90deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(5) {
        transform: translate3d(0,0,-400rem) rotateX(90deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(6) {
        transform: translate3d(100rem,0,-300rem) rotateX(90deg) rotateZ(-90deg);
    }

    &:nth-of-type(7) {
        transform: translate3d(200rem,0,-400rem) rotateX(90deg);

        &:before {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(8) {
        transform: translate3d(-300rem, 0, -200rem) rotateX(90deg) rotateZ(180deg);

        &:before {
            transform: translate3d(100rem, -100rem, 100rem) rotateY(90deg) rotateX(0deg);
        }
    }

    &:nth-of-type(9) {
        transform: translate3d(-300rem, 0, -300rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(10) {
        transform: translate3d(-200rem, 0, -300rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(11) {
        transform: translate3d(-100rem, 0, -300rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(12) {
        transform: translate3d(0,0,-300rem) rotateX(90deg);
    }

    &:nth-of-type(13) {
        transform: translate3d(100rem, 0, -300rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(14) {
        transform: translate3d(300rem, 0, -300rem) rotateX(90deg) rotateZ(90deg);

        &:before {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(15) {
        transform: translate3d(-400rem, 0, -200rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(16) {
        transform: translate3d(-200rem, 0, -100rem) rotateX(90deg) rotateZ(-180deg);

        &:before {
            transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
        }
    }

    &:nth-of-type(17) {
        transform: translate3d(-200rem,0,-100rem) rotateX(90deg) rotateZ(-90deg);
    }

    &:nth-of-type(18) {
        transform: translate3d(0,0,-100rem) rotateX(90deg) rotateZ(-180deg);

        &:after {
            transform: translate3d(0,100rem,0) rotateY(-90deg) rotateX(-90deg);
        }

        &:before {
            transform: translate3d(100rem,0,100rem) rotateY(90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(19) {
        transform: translate3d(0,0,-200rem) rotateX(90deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(20) {
        transform: translate3d(100rem,0,-200rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(21) {
        transform: translate3d(200rem, 0, -200rem) rotateX(90deg);

        &:after {
            transform: translate3d(-100rem,100rem,0) rotateY(-90deg) rotateX(-90deg);
        }

        &:before {
            transform: translate3d(100rem,0,100rem) rotateY(90deg);
        }
    }

    &:nth-of-type(22) {
        transform: translate3d(-300rem, 0, 0) rotateX(90deg) rotateZ(180deg);

        &:before {
            transform: translate3d(100rem, -100rem, 100rem) rotateY(90deg) rotateX(0deg);
        }
    }

    &:nth-of-type(23) {
        transform: translate3d(-200rem, 0, 0) rotateX(90deg) rotateZ(-180deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(24) {
        transform: translate3d(-200rem, 0, -100rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(25) {
        transform: translate3d(-100rem, 0, -100rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(26) {
        transform: translate3d(0,0,-100rem) rotateX(90deg);
    }

    &:nth-of-type(27) {
        transform: translate3d(100rem,0,-100rem) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(28) {
        transform: translate3d(300rem, 0, 0rem) rotateX(90deg) rotateZ(180deg);
    }

    &:nth-of-type(29) {
        transform: translate3d(-400rem,0,0) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(30) {
        transform: translate3d(-200rem, 0, 100rem) rotateX(90deg) rotateZ(-180deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(31) {
        transform: translate3d(-200rem, 0, 0rem) rotateX(90deg) rotateZ(0deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(32) {
        transform: translate3d(0,0,0) rotateX(90deg) rotateZ(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(34) {
        transform: translate3d(100rem,0,0) rotateX(90deg);

        &:before, &:after {
            display: none;
        }
    }

    &:nth-of-type(35) {
        transform: translate3d(300rem, 0, 100rem) rotateX(90deg) rotateZ(180deg);
    }

    &:nth-of-type(36) {
        transform: translate3d(-300rem, 0, 100rem) rotateX(90deg) rotateZ(90deg);

        &:before {
            transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
        }
    }

    &:nth-of-type(37) {
        transform: translate3d(-200rem, 0, 100rem) rotateX(90deg) rotateZ(90deg);

        &:before {
            display: none;
        }
    }

    &:nth-of-type(38) {
        transform: translate3d(-200rem, 0, 200rem) rotateX(90deg) rotateZ(-90deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(39) {
        transform: translate3d(0,0,100rem) rotateX(90deg) rotateZ(90deg);
    }

    &:nth-of-type(40) {
        transform: translate3d(100rem,0,200rem) rotateX(90deg) rotateZ(180deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }

    &:nth-of-type(41) {
        transform: translate3d(200rem, 0, 200rem) rotateX(90deg) rotateZ(180deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }

        &:before {
            display: none;
        }
    }

    &:nth-of-type(42) {
        transform: translate3d(300rem, 0, 200rem) rotateX(90deg) rotateZ(180deg);

        &:after {
            transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
        }
    }
}

z:nth-of-type(2) room {
    transform: translate3d(0,100rem,0) rotateX(90deg);

    &:nth-of-type(36), //
    &:nt.........完整代码请登录后点击上方下载按钮下载查看