js+css实现三维密室逃脱房间小游戏代码
代码语言:html
所属分类:游戏
代码描述:js+css实现三维密室逃脱房间小游戏代码
代码标签: js css 三维 密室 逃脱 房间 小 游戏 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@300..700&family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&display=swap'); :root { --rotateX: 0deg; --rotateY: 0deg; } *, *::before, *::after { box-sizing: border-box; image-rendering: crisp-edges; image-rendering: pixelated; } body { margin: 0; padding: 0; font-family: 'Red Hat', monospace; position: relative; width: 100%; height: 100vh; } #room { height: 100vh; width: 100%; overflow: hidden; position: fixed; align-content: center; top: 0; left: 0; background-color: black; } .room-wrap { margin: 0; padding: 0; perspective: 100vmin; height: 100vh; max-width: 150vh; max-height: 150vw; position: relative; display: flex; align-items: center; justify-content: center; container-type: inline-size; margin: 0 auto; --depth: 50cqw; --cubescale: 20vmin; transition: all 0.4s ease; } .zoomed .room-wrap { transform: scale(1.5); perspective: 125vmin; } .room { width: 100vw; height: 100vh; max-height: 150vw; position: relative; transform-style: preserve-3d; transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)); transition: transform 0.1s; z-index: 1; pointer-events: none; font-size: 5vmin; user-select: none; } .room > div { position: absolute; pointer-events: auto; display: grid; align-content: center; text-align: center; color: white; transform-style: preserve-3d; } .room .wall { background-size: cover; background-position: center; transition: opacity 0.5s ease; z-index: 2; backface-visibility: hidden; background-color: #333; box-shadow: inset 0 0 5vmin rgba(0, 0, 0, 0.5), inset 0 0 15vmin rgba(0, 0, 0, 0.5); border: 3px solid #222; background-image: url('//repo.bfw.wiki/bfwrepo/images/3dgame/tex-cement-brick-wall.jpg'); background-position: bottom center; background-size: auto 115%; transform-style: preserve-3d; } .room > div > b { display: block; margin: 0 auto; padding: 1em; border: 0.15em solid; background: rgba(255, 255, 255, 0.25); text-shadow: 0.1em 0.1em black; position: relative; text-transform: uppercase; align-content: center; } .wall-back, .wall-front, .wall-top, .wall-bottom { width: 100%; height: 100%; } .wall-left, .wall-right { width: 100%; height: 100%; top: 0; } .wall-back { transform: translateZ(calc(-1 * var(--depth))); background-color: orange; } .wall-front { transform: translateZ(calc(1 * var(--depth))) rotateY(180deg); background-color: red; } .wall-right { left: 0; transform: rotateY(90deg) translateX(calc(-1 * var(--depth))); transform-origin: left; background-color: green; } .wall-left { right: 0; transform: rotateY(-90deg) translateX(calc(1 * var(--depth))); transform-origin: right; background-color: magenta; } .room .wall-top { top: 0; height: calc(2 * var(--depth)); transform: rotateX(90deg) translateY(calc(-1 * var(--depth))) rotateY(180deg); transform-origin: top; background-image: url("//repo.bfw.wiki/bfwrepo/images/3dgame/tex-ceiing.jpg"); background-size: 75%; background-repeat: repeat; background-position: top right; } .room .wall-bottom { bottom: 0; height: calc(2 * var(--depth)); transform: rotateX(-90deg) translateY(calc(1 * var(--depth))) rotateY(180deg); transform-origin: bottom; background-image: url("//repo.bfw.wiki/bfwrepo/images/3dgame/tex-metal-floor.jpg"); background-size: 75%; background-repeat: repeat; background-position: top right; } .wall-window { mask-image: radial-gradient( circle at center, transparent 15vmin, black 15.1vmin ); } .room-wrap.rotating *, .room-wrap.rotating { pointer-events: none; } .room-wrap.rotating .room { transition: transform 0.5s ease; } .room-wrap.back-view { --rotateY: 0deg; } .room-wrap.left-view { --rotateY: 90deg; } .room-wrap.front-view { --rotateY: 180deg; } .room-wrap.right-view { --rotateY: 270deg; } .back-view .wall-front, .front-view .wall-back, .left-view .wall-right, .right-view .wall-left { pointer-events: none; } .room { transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)); } /*-- NAV UI --*/ .room-nav { position: fixed; z-index: 999; bottom: 10px; left: 10px; height: 0; width: calc(100% - 20px); } .room-nav button { position: absolute; bottom: 0; appearance: none; width: 1.5em; height: 1.5em; line-height: 1.4em; cursor: pointer; font-size: clamp(20px,8vmin,36px); transition: all 0.3s ease; background-color: #454954; background-image: linear-gradient(180deg, #0000, #0002), radial-gradient(90% 0.125em at 50% 0.125em, #fff7 25%, #fff0 50%); box-shadow: 0.125em 0.125em 0.25em #0007, 0 -0.05em 0 0.05em #0004, 0 0.05em 0 0.05em #fff1, -0.125em 0 0.125em #454954 inset, 0 0.125em 0.125em #fff4 inset, 0.125em 0 0.125em #fff4 inset, 0 -0.125em 0.125em #454954 inset; color: #e3e4e8; text-shadow: 0 0 0.125em #fff7, 0.05em 0.05em 0 black, 0.075em 0.075em 0 black; border: 0px outset #454954; border-radius: 0.25em; } .room-nav button:hover { filter: brightness(1.2) contrast(1.2); } .room-nav button:not(:active) { border-bottom-width: 0.1em; height: 1.6em; } .room-nav button:active { box-shadow: 0 0 0 #0007, 0 -0.05em 0 0.05em #0004, 0 0.05em 0 0.05em #fff1, -0.125em 0 0.125em #5c6270 inset, 0 0.125em 0.125em #0004 inset, 0.125em 0 0.125em #0004 inset, 0 -0.125em 0.125em #5c6270 inset; } .room-nav #zoom { left: 2em; cursor: zoom-in; } .zoomed .room-nav #zoom { cursor: zoom-out; } .room-nav #inv { left: 4em; } .room-nav #hint { left: 6em; } .room-nav #turnLeft { left: 0; } .room-nav #turnRight { right: 0; } .room-nav .hidden { position: absolute; opacity: 0; width: 0; height: 0; font-size: 0; overflow: hidden; } .room-nav button i { font-family: "Noto Emoji", sans-serif; font-style: normal; font-weight: bold; position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 1.65em; transform: scale(0.9); } /*-- CUBE REUSABLE OBJECT --*/ .cube { width: var(--cubescale); height: var(--c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0