缩放窗体拿开钩子拯救机器人游戏
代码语言:html
所属分类:游戏
代码描述:缩放窗体拿开钩子拯救机器人游戏,将窗体缩放,勾住困住机器人盒子的外钩一拉就开了
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { width: 100%; height: 100%; background-color: #4b4b4b; } body { box-sizing: border-box; --color: #eee; width: 100%; height: 100%; margin: 0px; display: flex; justify-content: center; align-items: center; --box-size: 200px; --hook-size: 30px; --hook-offset: 3px; --border-offset: -10px; overflow: hidden; font-family: Arial; } #outer { pointer-events: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: grid; --layout: var(--hook-size) 1fr var(--hook-size); grid-template-columns: var(--layout); grid-template-rows: var(--layout); grid-template-areas: ". topHook ." "leftHook . rightHook" ". bottomHook ."; } #outer > .hook { background-image: url("http://repo.bfw.wiki/bfwrepo/icon/5e9f9d1259238.png"); background-position: center; background-size: contain; background-repeat: no-repeat; } #outer > .hook.left { grid-area: leftHook; transform: translateY(calc(var(--hook-offset) * -1)) rotate(-90deg); } #outer > .hook.top { grid-area: topHook; transform: translateX(calc(var(--hook-offset) * -1)) scaleX(-1); } #outer > .hook.right { grid-area: rightHook; transform: translateY(calc(var(--hook-offset) * -1)) rotate(90deg) scaleX(-1); } #outer > .hook.bottom { grid-area: bottomHook; transform: translateX(calc(var(--hook-offset) * -1)) rotate(180deg); } #boxWalls { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: grid; --layout: 1fr var(--hook-size) var(--box-size) var(--hook-size) 1fr; grid-template-columns: var(--layout); grid-template-rows: var(--layout); grid-template-areas: ". . . . ." ". . topLoop . ." ". leftLoop box rightLoop ." ". . bottomLoop . ."; transition: 0.05s ease; } #boxWrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } #boxWrapper > .box { padding: 10px; width: calc(var(--box-size) + var(--border-offset) * 2); height: calc(var(--box-size) + var(--border-offset) * 2); display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } #boxWrapper > .box > span { text-align: center; color: var(--color); transition: 0.3s ease; } #boxWrapper > .box > .bb8 { width: 100%; height: 100%; position: relative; } #boxWrapper > .box > .bb8 > video { position: absolute; width: 100%; height: 100%; transition: 0.3s ease; border-radius: 100%; } #boxWrapper > .box > .bb8 > .happy { opacity: 0; top: -25%; left: -25%; width: 150%; height: 150%; transform: scale(0); } #boxWalls > .wall { position: relative; will-change: transform; } #boxWalls > .wall:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("http://repo.bfw.wiki/bfwrepo/icon/5e9f9d1259238.png"); background-position: center; background-size: contain; background-repeat: no-repeat; transform: var(--hook-transform); } #boxWalls > .wall > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; will-change: transform; } #boxWalls > .wall.left { grid-area: leftLoop; --hook-transform: translateY(var(--hook-offset)) rotate(90deg); } #boxWalls > .wall.left > div { border-right: solid var(--color) calc(var(--border-offset) * -1); right: var(--border-offset); } #boxWalls > .wall.top { grid-area: topLoop; --hook-transform: translateX(var(--hook-offset)) rotate(180deg) scaleX(-1); } #boxWalls > .wall.top > div { border-bottom: solid var(--color) calc(var(--border-offset) * -1); bottom: var(--border-offset); } #boxWalls > .wall.right { grid-area: rightLoop; --hook-transform: translateY(var(--hook-offset)) rotate(-90deg) scaleX(-1); } #boxWalls > .wall.right > div { border-left: solid var(--color) calc(var(--border-offset) * -1); left: var(--border-offset); } #boxWalls > .wall.bottom { grid-area: bottomLoop; --hook-transform: translateX(var(--hook-offset)); } #boxWalls > .wall.bottom > div { border-top: solid var(--color) calc(var(--border-offset) * -1); top: var(--border-offset); } </style> </head> <body translate="no"> <div id="boxWalls"> <div class="wall left"> <div></div> </div> <div class="wall top"> <div></div> </div> <div class="wall right"> <div></div> </div> <div class="wall bottom"> <div></div> </div> </div> <div id="boxWrapper"> <div class="box"> <span>缩放窗口勾住</span> <div class="bb8"> <video muted autoplay loop class="idle"> <source src="http://repo.bfw.wiki/bfwrepo/video/5e9f9ddf742a6.mp4" type="video/mp4"> </video> <video muted autoplay loop class="happy"> <source src="http://repo.bfw.wiki/bfwrepo/video/5e9f9decccf05.mp4" type="video/mp4"> </video> </div> </div> </div> <div id="outer"> <div class="hook left"></div> <div class="hook top"></div> <div class="hook right"></div> <div class="hook bottom"></div> </div> <script > class Box { constructor() { this.boxWrapper = document.getElementById("boxWrapper"); this.box = this.boxWrapper.querySelector(".box"); this.videoIdle = this.boxWrapper.querySelector(".idle"); this.videoHappy = this.boxWrapper.querySelector(".happy"); this.status = this.box.querySelector("span"); this.boxWalls = document.querySelector("#boxWalls"); this.walls = { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0