原生js实现机械圆盘转动拼图游戏代码
代码语言:html
所属分类:游戏
代码描述: 原生js实现机械圆盘转动拼图游戏代码,这个游戏是一个基于 JavaScript 的图形化逻辑拼图游戏 ,其灵感来源于机械谜题(如 Oskar van Deventer 设计的“Diskussion”类谜题),目标是通过旋转四个圆盘来使每个圆盘上的颜色块与中心匹配。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;} html, body { height: 100%; overflow: hidden;} body { margin: 0; padding: 0; background: #1e1e1e; font-family: monospace; } :root { --size: min(200px, min(30vh, 30vw)); --subsz: calc(0.2 * var(--size)); --clr1: #479ce7; --clr2: #ef476f; --clr3: #ffd166; --clr4: #06d6a0; } .container { display: flex; justify-content: center; align-items: center; position: relative; margin-top: 50vh; } .circle { position: absolute; width: var(--size); height: var(--size); background: #fff; border-radius: 100%; left: 0; right: 0; top: 0; bottom: 0; box-shadow: inset 0 0 0 calc(0.3 * var(--size)) #0002; margin: auto; transition: rotate 1s ease-in-out; &#A { background: var(--clr1); left: calc(var(--size)*1.74); } &#B { background: var(--clr2); bottom: calc(var(--size)*-1); } &#C { background: var(--clr3); right: calc(var(--size)*1.74); } &#D { background: var(--clr4); top: calc(var(--size)*-1); } > div { position: absolute; left: calc(50% - var(--subsz)/2); top: 0; width: var(--subsz); height: calc(50%); transform-origin: 50% 100%; &::before { content: ''; display: block; position: relative; top: -1px; width: var(--subsz); height: calc( var(--subsz)); background: #1e1e1e; border-bottom-left-radius: var(--subsz); border-bottom-right-radius: var(--subsz); } &:nth-child(1){ rotate: 60deg;} &:nth-child(2){ rotate: 120deg;} &:nth-child(3){ rotate: 180deg;} &:nth-child(4){ rotate: 240deg;} &:nth-child(5){ rotate: 300deg;} &::after { position: absolute; display: block; transition: top 0.4s ease-in-out, background 1.2s ease-in; content: ''; color: #fff; width: calc(0.8 * var(--subsz)); height: calc(0.8 * var(--subsz)); left: calc(0.1 * var(--subsz)); border-radius: 100%; top: calc(-0.9 * var(--subsz)); } &[data-cur="a"]::after { top: calc(0.06 * var(--subsz)); background: var(--clr1); transition: top 0.4s ease-in-out, background 0s linear;} &[data-cur="b"]::after { top: calc(0.06 * var(--subsz)); background: var(--clr2); transition: top 0.4s ease-in-out, background 0s linear;} &[data-cur="c"]::after { top: calc(0.06 * var(--subsz)); background: var(--clr3); transition: top 0.4s ease-in-out, background 0s linear;} &[data-cur="d"]::after { top: calc(0.06 * var(--subsz)); background: var(--clr4); transition: top 0.4s ease-in-out, background 0s linear;} } } .arrow { position: absolute; &.a{ top: calc(-0.2 * var(--size)); rotate: 90deg; translate: calc(1.4 * var(--size)); .left, .right { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23479ce7' version='1.1' id='Layer_1' viewBox='0 0 302.817 302.817' xml:space='preserve'%3E%3Cpath id='XMLID_5_' d='M298.423,128.606L235.94,66.124c-0.004-0.003-0.007-0.006-0.011-0.009c-0.355-0.354-0.725-0.689-1.111-1.005 c-0.214-0.175-0.439-0.327-0.66-0.488c-0.169-0.123-0.332-0.256-0.507-0.372c-0.29-0.19.........完整代码请登录后点击上方下载按钮下载查看
网友评论0