eqcss.js元素查询实现一个亮灯游戏代码
代码语言：html
所属分类：游戏
代码描述：eqcss.js元素查询实现一个亮灯游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
html, body {
display: flex;
flex: 1;
flex-direction: column;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 10px;
margin: 0;
padding: 0;
min-height: 100%;
min-height: 100vh;
}
body {
background-color: #263238;
background-image: linear-gradient(to bottom, #000 0% 65%, transparent);
}
button, input {
box-sizing: border-box;
color: inherit;
font: inherit;
padding: 0;
margin: 0;
}
table {
color: inherit;
font: inherit;
}
summary {
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
@element #menu {
eq_self {
--has_1:
eval('eqhas("#mni_about:checked", guid)')
eval('eqhas("#mni_level:checked", guid)')
eval('eqhas("#mni_mods:checked", guid)')
eval('eqhas("#mni_reset:checked", guid)')
eval('eqhas("#lni_create:checked", guid)')
eval('eqhas("#lni_preset:checked", guid)')
eval('eqhas("#lni_random:checked", guid)') ;
}
}
@element .nav_label {
eq_self {
--has_1: eval('eqhas(".nav_item:checked", guid)');
}
}
@element #board {
eq_self {
--has_1:
eval('eqhas("#btn_cheat:checked", guid)')
eval('eqhas(".toggle:checked", guid)')
eval('eqhas("#btn_reset:active", guid)')
eval('eqhas("#btn_reset:focus", guid)') ;
}
}
@element .toggle {
eq_self {
--has_1: eval('eqhas("+ .toggle:checked", guid)') eval('eqhas("+ .toggle + .toggle:checked", guid)') eval('eqhas("+ .toggle + .toggle + .toggle:checked", guid)') eval('eqhas("+ .toggle + .toggle + .toggle + .toggle:checked", guid)') eval('eqhas("+ .toggle + .toggle + .toggle + .toggle + .toggle:checked", guid)') eval('eqhas("+ .toggle + .toggle + .toggle + .toggle + .toggle + .toggle:checked", guid)') eval('eqhas("+ .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle:checked", guid)') eval('eqhas("+ .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle:checked", guid)') eval('eqhas("+ .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle:checked", guid)') eval('eqhas("+ .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle:checked", guid)');
}
}
#page {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.wrapper {
margin: 0 auto;
max-width: 640px;
}
.btn {
appearance: none;
-webkit-appearance: none;
background-color: #455A64;
background-image: linear-gradient(to bottom, #FFF3, transparent);
border-radius: 0.5em;
border: 0.1em solid #0009;
box-shadow: inset 0 0 0.1em #FFF;
cursor: pointer;
color: #ECEFF1;
display: inline-flex;
align-items: center;
padding: 0.25em 0.5em;
transition-property: background-color, color, filter;
transition-duration: 0.5s;
}
.btn[type=checkbox]:after {
content: attr(aria-label);
}
.btn:hover {
filter: brightness(120%);
}
.btn:checked {
background-color: #0D47A1;
color: #FFEB3B;
}
.btn[type=reset] {
background-color: #C2185B;
}
.btn[type=reset]:checked, .btn[type=reset]:active {
background-color: #880E4F;
}
.btn[type=submit] {
background-color: #388E3C;
}
.btn[type=submit]:active {
background-color: #1B5E20;
}
#menu {
color: #ECEFF1;
font-size: 1.4em;
position: fixed;
flex-direction: column;
top: 0;
left: 0;
z-index: 9999;
}
#menu:not([open]) .if-open, #menu[open] .if-closed {
display: none;
}
#menu > summary {
flex: 0;
font-weight: bold;
}
#menu > summary .summary-content {
padding: 0.5em;
}
#menu > summary i {
margin-right: 0.5em;
}
#menu > summary::before {
content: "";
position: absolute;
width: 100vw;
height: 100vh;
visibility: hidden;
z-index: -1;
transition-property: background, visibility;
transition-duration: 0.25s;
background: transparent;
}
#menu[open] {
width: 100%;
}
#menu[open] summary::before {
cursor: auto;
visibility: visible;
background: rgba(38, 50, 56, 0.5);
}
#menu .details-content {
box-sizing: border-box;
padding: 0.5em;
width: 100%;
}
#menu .nav {
border-bottom: 0.1em solid #FFF1;
box-shadow: 0 0.25em 0.5em #0005;
margin: 0 -0.5em;
margin-bottom: 1em;
position: relative;
}
#menu .nav:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom, transparent 0% 50%, #FFF1);
pointer-events: none;
}
#menu .nav .wrapper {
display: flex;
}
#menu .nav .nav_label {
border-radius: 0.5em;
cursor: pointer;
display: block;
flex: 1;
padding: 0.5em;
margin: 0.5em;
transition: background-color 0.25s;
}
#menu .nav .nav_label:hover {
background-color: rgba(26, 44, 53, 0.9);
}
#menu .nav .nav_label[_has*="{.nav_item:checked}"] {
background-color: #1d3744;
}
#menu .nav .nav_label:focus-within {
background-color: #123b50;
}
#menu .nav .nav_item {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-align: center;
}
#menu .nav .nav_item:after {
content: attr(aria-label);
}
#menu .views {
display: grid;
}
#menu .views#menu_views {
max-width: 960px;
margin: 0 auto;
}
#menu .views .view {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 0.25s;
grid-column: 1;
grid-row: 1;
}
#menu .views .mv {
box-sizing: border-box;
background-image: linear-gradient(to bottom, rgba(15, 33, 42, 0.9) 50%, transparent);
margin: -0.5em;
margin-top: -1em;
padding: 0.5em;
overflow: auto;
max-height: 80vh;
}
#menu .views .mv > .wrapper {
max-width: 640px;
}
#menu[_has*="{#mni_about:checked}"] #mv_about, #menu[_has*="{#mni_level:checked}"] #mv_level, #menu[_has*="{#mni_mods:checked}"] #mv_mods, #menu[_has*="{#mni_reset:checked}"] #mv_reset, #menu[_has*="{#lni_create:checked}"] #lv_create, #menu[_has*="{#lni_preset:checked}"] #lv_preset, #menu[_has*="{#lni_random:checked}"] #lv_random {
opacity: 1;
visibility: visible;
}
#menu .mm {
background-color: rgba(26, 41, 49, 0.9);
border-radius: 0.5em;
margin-bottom: 0.5em;
}
#menu .mm .mm-head, #menu .mm .mm-body {
box-sizing: border-box;
padding: 0.5em;
}
#menu .mm .mm-head {
background-image: linear-gradient(to bottom, transparent 0% 50%, #FFF1);
font-size: 120%;
font-weight: bold;
position: relative;
}
#menu .mm summary.mm-head:after {
content: "[ + ]";
content: "[ + ]"/"Expand Box";
font-family: monospace;
font-size: 80%;
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding: inherit;
}
#menu .mm[open] summary.mm-head:after {
content: "[ - ]";
content: "[ - ]"/"Collapse Box";
}
#menu .mm .mm-help {
background-color: rgba(99, 94, 68, 0.5);
border: 0.1em solid rgba(255, 255, 255, 0.1);
padding: 0.5em;
margin-bottom: 1em;
text-align: left;
text-align: start;
}
#menu .mm ul {
list-style-position: inside;
padding: 0;
margin: 0;
margin-bottom: 0.5em;
}
#menu .mm ul ul {
margin-left: 0.5em;
}
#menu .mm p {
padding: 0;
margin: 0;
}
#menu .mm p + p, #menu .mm p + ul, #menu .mm p + ol {
margin-top: 0.5em;
}
#menu .mm kbd {
background-color: #ECEFF1;
background-image: linear-gradient(135deg, transparent, #0006);
border-radius: 0.5em;
box-shadow: inset 0 0 0 0.075em rgba(0, 0, 0, 0.5), inset 0 0 0.1em 0.1em #FFF;
color: rgba(38, 50, 56, 0.75);
display: inline-block;
padding: 0.05em 0.75em;
margin-inline: 0.25em;
}
#menu .mm table {
margin: 1em auto;
border-radius: 0.5em;
border-spacing: 0.1em;
overflow: hidden;
text-align: left;
text-align: start;
width: 100%;
}
#menu .mm table tr {
background-color: rgba(255, 255, 255, 0.1);
}
#menu .mm table tr:nth-of-type(even) {
background-color: rgba(255, 255, 255, 0.2);
}
#menu .mm table td, #menu .mm table th {
padding: 0.5em;
}
#menu .mf {
text-align: center;
}
#menu .mf .mf-box {
padding: 0.5em 0;
}
#menu .mf .mf-box + .mf-box {
border-top: 0.1em solid rgba(255, 255, 255, 0.05);
}
#menu .sub-nav {
position: sticky;
top: 0;
}
#menu #lv_create .mf {
text-align: center;
}
#menu #lv_create textarea {
box-sizing: border-box;
border: none;
border-radius: 0.5em;
box-shadow: inset 0 0 0.1em #FFF3;
color: #FFF;
caret-color: #FFF;
font-size: 2vmin;
font-family: monospace;
line-height: 1.4;
overflow: overlay;
padding: 0 0.5em;
resize: none;
width: 16em;
height: 15em;
white-space: nowrap;
background-clip: content-box;
background-origin: content-box;
background-color: transparent;
background-image: repeating-linear-gradient(to right, #FFF1 0px 1px, transparent 1px 25%), repeating-linear-gradient(to bottom, #FFF1 0px 1px, transparent 1px 25%), repeating-conic-gradient(rgba(0, 0, 0, 0.05) 0% 25%, rgba(255, 255, 255, 0.05) 25% 50%);
background-position: left top;
background-size: 10ch 10ch, 10ch 10ch, 5ch 5ch;
background-attachment: local;
}
#menu #lv_create textarea::-webkit-scrollbar {
width: 0.5em;
}
#menu #lv_create textarea::-webkit-scrollbar-track {
background: transparent;
}
#menu #lv_create textarea::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.75);
border-radius: 0.5em;
}
@property --cheat-btn_int {
syntax: "<integer>";
initial-value: 0;
inherits: true;
}
@property --toggled-dividend {
syntax: "<integer>";
initial-value: 0;
inherits: true;
}
@property --toggled-divisor {
syntax: "<integer>";
initial-value: 0;
inherits: true;
}
@property --toggled-iq {
syntax: "<integer>";
initial-value: 0;
inherits: true;
}
@property --toggled-modulo {
syntax: "<number>";
initial-value: 0;
inherits: true;
}
@property --toggled-on {
syntax: "<integer>";
initial-value: 0;
inherits: true;
}
#board {
--annie-timer_game: var(--game-ended_bool) paused;
--annie-timer: var(--annie-timer_game, running);
--annie:
time-seconds 60s 3600 none steps(60, end) normal var(--annie-timer),
time-minutes 3600s 60 none steps(60, end) normal var(--annie-timer),
time-hours 216000s 1 forwards steps(60, end) normal var(--annie-timer) ;
background-color: #263238;
background-image: repeating-linear-gradient(to bottom, #0002 0% 0.1%, transparent 0.5% 0.75%);
border: 0.005em outset #1119;
border-radius: 0.025em;
box-shadow: inset 0 0 0.02em #000;
display: grid;
grid-template-columns: repeat(var(--cols, 5), 1fr);
grid-gap: var(--row-gap, 0px) var(--col-gap, 0px);
--col-gap: calc(.05em / (var(--cols)));
--row-gap: calc(.05em / (var(--rows)));
font-size: 80vmin;
width: 1em;
max-width: 100%;
margin: 0 auto;
padding: 0.02em;
--cheat-btn_bool: initial;
--cheat-btn_int: 0;
--game-ended_bool: initial;
--game-ended_int: 0;
}
#board[_has*="{#btn_cheat:checked}"] {
--cheat-btn_bool: ;
--cheat-btn_int: 1;
}
#board:not([_has*="{.toggle:checked}"]) {
--game-ended_bool: ;
--game-ended_int: 1;
}
#board[_has*="{#btn_reset:active}"], #board[_has*="{#btn_reset:focus}"] {
--annie: none;
}
#board #board-foot {
border-top: 0.0025em solid #FFF1;
box-shadow: inset 0 0.0025em #0003;
display: grid;
grid-template-columns: max-content 1fr;
grid-column: 1/-1;
margin-top: 0em;
padding: 0.01em 0;
padding-bottom: 0;
}
#board #board-foot-btns {
display: flex;
justify-content: flex-end;
text-align: right;
}
#board #timer {
background-color: #000;
box-shadow: inset 0 0 0.025em #000, 0 0 0.025em #FFF3;
border-radius: 0.25em;
color: #FFF;
display: flex;
font-family: monospace;
font-size: 0.05em;
padding: 0 0.5em;
position: relative;
align-items: center;
justify-content: center;
text-align: center;
}
#board #timer:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom, #FFF1 0%, #FFF2 50%, transparent 50%, #FFF1), linear-gradient(45deg, #FFF3, transparent, #FFF3, transparent);
border-radius: inherit;
margin: 0.02em;
}
#board #timer .time {
display: inline;
opacity: 0.75;
}
#board #timer .time:after {
content: counter(v, decimal-leading-zero);
}
#board #timer .time#time-seconds:before, #board #timer .time#time-minutes:before {
content: ":";
}
#board #timer .time#time-seconds {
counter-reset: v var(--time-seconds);
}
#board #timer .time#time-minutes {
counter-reset: v var(--time-minutes);
}
#board #timer .time#time-hours {
counter-reset: v var(--time-hours);
}
#board .btn {
font-size: 0.02em;
margin-left: 0.5em;
}
.toggle {
--toggled-dividend: calc(2 + (var(--toggled-on) + var(--toggled-from-left) + var(--toggled-from-above) + var(--toggled-from-right) + var(--toggled-from-below)));
--toggled-divisor: 2;
--toggled-iq: calc((var(--toggled-dividend) / var(--toggled-divisor)) - 0.5);
--toggled-modulo: calc((((var(--toggled-dividend) / var(--toggled-divisor)) - var(--toggled-iq)) * var(--toggled-divisor)));
appearance: none;
-webkit-appearance: none;
background-color: currentcolor;
background-image: linear-gradient(-45deg, transparent, #0003, transparent, #FFF3, transparent), radial-gradient(circle, #CCC, #000);
background-blend-mode: hard-light, color-dodge;
box-shadow: 0 0 0.025em 0.001em currentcolor, inset 0 0 0.025em 0.01em currentcolor, inset 0 0 0.005em #FFF, 0 0 0.001em 0.001em #000;
border: 0.001em solid #0006;
border-radius: 25%;
color: rgba(calc( ( (48 * (1 - var(--toggled-modulo))) + (12 * (1 - (var(--toggled-on) * var(--cheat-btn_int)))) ) * (1 - var(--game-ended_int)) ), calc( (96 * var(--toggled-modulo)) + (12 * (1 - var(--toggled-modulo))) ), calc( (96 * (var(--toggled-on) * var(--cheat-btn_int))) + (12 * (1 - (var(--toggled-on) * var(--cheat-btn_int)))) ));
cursor: pointer;
padding-top: 100%;
--pointer-events_bool: var(--game-ended_bool) none;
pointer-events: var(--pointer-events_bool, auto);
position: relative;
transition-property: background-color, color, transform;
transition-duration: 0.25s, 0.25s, 0.05s;
--toggled-from-above: 0;
--toggled-from-left: 0;
--toggled-from-right: 0;
--toggled-from-below: 0;
--toggled-on: 0;
}
.toggle[invisible] {
visibility: hidden;
}
.toggle:active {
transform: scale(0.95);
}
.toggle:checked {
--toggled-on: 1;
}
#board[style*="--cols: 1;"] .toggle:not(:nth-of-type(1n)):checked + .toggle, #board[style*="--cols: 2;"] .toggle:not(:nth-of-type(2n)):checked + .toggle, #board[style*="--cols: 3;"] .toggle:not(:nth-of-type(3n)):checked + .toggle, #board[style*="--cols: 4;"] .toggle:not(:nth-of-type(4n)):checked + .toggle, #board[style*="--cols: 5;"] .toggle:not(:nth-of-type(5n)):checked + .toggle, #board[style*="--cols: 6;"] .toggle:not(:nth-of-type(6n)):checked + .toggle, #board[style*="--cols: 7;"] .toggle:not(:nth-of-type(7n)):checked + .toggle, #board[style*="--cols: 8;"] .toggle:not(:nth-of-type(8n)):checked + .toggle, #board[style*="--cols: 9;"] .toggle:not(:nth-of-type(9n)):checked + .toggle, #board[style*="--cols: 10;"] .toggle:not(:nth-of-type(10n)):checked + .toggle {
--toggled-from-left: 1;
}
#board[style*="--cols: 1;"] .toggle:not(:nth-of-type(1n))[_has*="{+ .toggle:checked}"], #board[style*="--cols: 2;"] .toggle:not(:nth-of-type(2n))[_has*="{+ .toggle:checked}"], #board[style*="--cols: 3;"] .toggle:not(:nth-of-type(3n))[_has*="{+ .toggle:checked}"], #board[style*="--cols: 4;"] .toggle:not(:nth-of-type(4n))[_has*="{+ .toggle:checked}"], #board[style*="--cols: 5;"] .toggle:not(:nth-of-type(5n))[_has*="{+ .toggle:checked}"], #board[style*="--cols: 6;"] .toggle:not(:nth-of-type(6n))[_has*="{+ .toggle:checked}"], #board[style*="--cols: 7;"] .toggle:not(:nth-of-type(7n))[_has*="{+ .toggle:checked}"], #board[style*="--cols: 8;"] .toggle:not(:nth-of-type(8n))[_has*="{+ .toggle:checked}"], #board[style*="--cols: 9;"] .toggle:not(:nth-of-type(9n))[_has*="{+ .toggle:checked}"], #board[style*="--cols: 10;"] .toggle:not(:nth-of-type(10n))[_has*="{+ .toggle:checked}"] {
--toggled-from-right: 1;
}
#board[style*="--cols: 1;"] .toggle[_has*="{+ .toggle:checked}"], #board[style*="--cols: 2;"] .toggle[_has*="{+ .toggle + .toggle:checked}"], #board[style*="--cols: 3;"] .toggle[_has*="{+ .toggle + .toggle + .toggle:checked}"], #board[style*="--cols: 4;"] .toggle[_has*="{+ .toggle + .toggle + .toggle + .toggle:checked}"], #board[style*="--cols: 5;"] .toggle[_has*="{+ .toggle + .toggle + .toggle + .toggle + .toggle:checked}"], #board[style*="--cols: 6;"] .toggle[_has*="{+ .toggle + .toggle + .toggle + .toggle + .toggle + .toggle:checked}"], #board[style*="--cols: 7;"] .toggle[_has*="{+ .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle:checked}"], #board[style*="--cols: 8;"] .toggle[_has*="{+ .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle:checked}"], #board[style*="--cols: 9;"] .toggle[_has*="{+ .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle:checked}"], #board[style*="--cols: 10;"] .toggle[_has*="{+ .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle:checked}"] {
--toggled-from-below: 1;
}
#board[style*="--cols: 1;"] .toggle:checked + .toggle, #board[style*="--cols: 2;"] .toggle:checked + .toggle + .toggle, #board[style*="--cols: 3;"] .toggle:checked + .toggle + .toggle + .toggle, #board[style*="--cols: 4;"] .toggle:checked + .toggle + .toggle + .toggle + .toggle, #board[style*="--cols: 5;"] .toggle:checked + .toggle + .toggle + .toggle + .toggle + .toggle, #board[style*="--cols: 6;"] .toggle:checked + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle, #board[style*="--cols: 7;"] .toggle:checked + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle, #board[style*="--cols: 8;"] .toggle:checked + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle, #board[style*="--cols: 9;"] .toggle:checked + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle, #board[style*="--cols: 10;"] .toggle:checked + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle + .toggle {
--toggled-from-above: 1;
}
</style>
</head>
<body >
<div id="page">
<details id="menu">
<summary>
<div class="summary-content">
<div class="if-open"><i class="fa fa-bars" aria-label="Menu" aria-hidden="true"></i> Close Menu</div>
<div class="if-closed"><i class="fa fa-bars" aria-label="Menu" aria-hidden="true"></i> Menu</div>
</div>
</summary>
<div class="details-content">
<!-- Menu Navigation-->
<div class="nav" id="menu-nav">
<div class="wrapper">
<label class="nav_label mn_label" id="mn_about">
<input class="nav_item mn_item" id="mni_about" type="radio" name="menu-nav" aria-label="About" title="About Game/Demo" checked="checked"/>
</label>
<label class="nav_label mn_label" id="mn_level">
<input class="nav_item mn_item" id="mni_level" type="radio" name="menu-nav" aria-label="Editor" title="Level Editor"/>
</label>
<label class="nav_label mn_label" id="mn_mods">
<input class="nav_item mn_item" id="mni_mods" type="radio" name="menu-nav" aria-label="Mods" title="Cheats Menu"/>
</label>
<label class="nav_label mn_label" id="mn_reset">
<input class="nav_item mn_item" id="mni_reset" type="radio" name="menu-nav" aria-label="Reset" title="Reset Game"/>
</label>
</div>
</div>
<!-- Menu Views-->
<div class="views" id="menu-views">
<div class="view mv" id="mv_about">
<div class="wrapper">
<div class="mm">
<div class="mm-head">About Lights Out</div>
<div class="mm-body">
<ul>
<li>Welcome to Lights Out!</li>
<li>Pressing any of the lights will toggle it alongside any adjacent lights.</li>
<li>Th.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0