js+css实现扫雷游戏代码
代码语言:html
所属分类:游戏
代码描述:js+css实现扫雷游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <style> * { box-sizing: border-box; } :root { --digit: var(--red); --state: paused; --stan-win: 0; --stan-star-scale: 0; --stan-star-rotate: 0; --red: #ff4d00; --yellow: #ebb624; --green: #38b24d; --blue: #0f73ff; --screen-hide: 0; --screen-delay: 0; --show-results: 0; --deck: hsl(210 34% 10%); } h1 { color: var(--gray-0); } body { display: grid; place-items: center; overflow: hidden; min-height: 100vh; font-family: 'Google Sans', sans-serif; background: var(--gradient-9); } form { margin: 0; position: relative; } .game-state-controls { justify-self: end; } .game__controls { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; justify-items: center; position: absolute; top: 50%; left: 50%; width: calc(var(--columns) * 5.25vmin); transform: translate(-50%, calc(-50% - ((var(--columns) * 0.65) * 5vmin))); } svg { fill: currentColor; } .board { background: var(--gray-6); border: 0.4vmin solid var(--gray-6); display: grid; grid-template-columns: repeat(var(--columns), 5vmin); grid-template-rows: repeat(var(--rows), 5vmin); grid-gap: 0.2vmin; } .board__cell { display: grid; place-items: center; color: hsl(var(--hue, 210) 100% 40% / 1); font-weight: bold; position: relative; font-family: sans-serif; font-size: 3vmin; background: var(--gray-2); } .board__cell--exploder { background: var(--red-8); } .board__group-controls { position: absolute; } .board__flag-toggle { position: absolute; top: 110%; right: 0; min-height: 5vmin; min-width: 5vmin; } .board__cell label { background: var(--gray-2); border: var(--size-2) solid var(--gray-0); border-right-color: var(--gray-5); border-bottom-color: var(--gray-5); } .board__cell :where(label, span) { position: absolute; inset: 0; display: inline-block; display: grid; place-items: center; } :root:has(#flag-toggle:checked) { --flagging: 1; } :root:has(#flag-toggle:checked) .board__cell:has([id*="flag--"]:checked) [for*="flag--"], :root:has(#flag-toggle:not(:checked)) .board__cell:has([id*="flag--"]:checked) [for*="flag--"] { display: block; z-index: 2; } body { counter-reset: flag var(--mine-count); } [id*=flag--]:checked { counter-increment: flag -1; } .mine-count:after { color: var(--text-1); content: counter(flag); } .board__cell:has(:checked:not([id*="flag"])) label { opacity: 0; z-index: -1; } .board__cell:has(:checked[id*="flag"]) label[for*="flag"]:after { content: "⛳️"; position: absolute; inset: 0; font-size: 3vmin; } .board__cell:has(:checked[id*="flag"]) span { cursor: not-allowed; } label { opacity: calc(1 - var(--show-fail, 0)); z-index: 1; } label[for*="flag"], label[for*="defuse"] { z-index: calc(1 + var(--flagging, 0)); } .timer { color: var(--digit); display: inline-flex; font-size: 6vmin; padding: 1.75vmin; background: #000; } @property --ms-tens { initial-value: 0; inherits: false; syntax: '<integer>'; } @property --ms-singles { initial-value: 0; inherits: false; syntax: '<integer>'; } @property --s-tens { initial-value: 0; inherit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0