<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ç»å
¸Windowsæ«é·å°æ¸¸æ</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
@charset "UTF-8";
body {
min-height: 100vh;
padding: 1px;
box-sizing: border-box;
counter-reset: mines 10;
}
form {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
input {
visibility: hidden;
position: absolute;
top: -99px;
left: -99px;
}
input[id^="f"]:checked {
counter-increment: mines -1;
}
.infos {
order: 2;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 216px;
}
.timer {
font-family: "Roboto Sans", monospace;
font-size: 0;
background: #ccc;
border: 1px solid #808080;
height: 2.25rem;
line-height: 2.25rem;
padding: 0 .5rem;
}
.timer .separator {
display: inline-block;
vertical-align: middle;
font-size: 1rem;
}
.timer .separator:before {
content: ':';
}
@keyframes digit {
from {
top: 0;
}
to {
top: -1000%;
}
}
@keyframes digitTo6 {
from {
top: 0;
}
to {
top: -600%;
}
}
@keyframes extend {
from {
width: 0;
}
10%, to {
width: auto;
}
}
.timer .digit {
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: middle;
font-size: 1rem;
}
.timer .digit:before {
content: '0';
visibility: hidden;
}
.timer .digit:after {
content: '0 \A 1 \A 2 \A 3 \A 4 \A 5 \A 6 \A 7 \A 8 \A 9';
position: absolute;
top: 0;
left: 0;
animation: digit 1s steps(10) infinite paused;
}
.timer .digit:nth-last-child(1):after {
animation-duration: 10s;
}
.timer .digit:nth-last-child(2):after {
content: '0 \A 1 \A 2 \A 3 \A 4 \A 5';
animation-name: digitTo6;
animation-timing-function: steps(6);
animation-duration: 60s;
}
.timer .digit:nth-last-child(4):after {
animation-duration: 600s;
}
.timer .digit:nth-last-child(5):after {
animation-duration: 6000s;
}
.timer .digit:nth-last-child(6) {
width: 0;
animation: extend 60000s steps(1) infinite paused;
}
.timer .digit:nth-last-child(6):after {
animation-duration: 60000s;
}
.counter {
display: inline-block;
border: 1px solid #808080;
background: #ccc;
padding: 0 .5rem;
font-size: 1.25rem;
font-family: "Roboto Sans", monospace;
height: 2.25rem;
line-height: 2.25rem;
}
.counter:before {
content: 'ð¤';
font-size: 1rem;
margin-right: .5em;
}
.counter:after {
content: counter(mines);
}
input[id^="c"]:checked ~ .infos .timer .digit, input[id^="c"]:checked ~ .infos .timer .digit:after {
animation-play-state: running;
}
.actionSelector {
order: 1;
text-align: center;
margin: 10px;
}
.actionSelector label {
display: inline-block;
position: relative;
width: 1.8em;
height: 1.8em;
text-align: center;
line-height: 1.8em;
}
.actionSelector label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
border-radius: 50%;
background: rgba(210, 210, 210, 0.8);
box-sizing: border-box;
border: 1px solid #808080;
transition: transform .3s, border-radius .3s;
transition-timing-function: cubic-bezier(0.75, 1.75, 0.75, 0.75);
z-index: -1;
}
#modeMine:checked ~ .actionSelector label[for="modeMine"]:before, #modeFlag:checked ~ .actionSelector label[for="modeFlag"]:before {
transform: scale(1);
border-radius: 2px;
}
.grid {
order: 3;
user-select: none;
position: relative;
margin: 10px auto;
width: 9em;
height: 9em;
font-size: 24px;
display: flex;
flex-flow: row wrap;
border: solid #808080;
border-width: 1px 0 0 1px;
}
.grid label {
display: block;
position: relative;
width: 1em;
height: 1em;
background: #c0c0c0;
box-sizing: border-box;
border: solid #808080;
border-width: 0 1px 1px 0;
flex: 0 0 11.11111%;
overflow: hidden;
cursor: pointer;
pointer-events: none;
}
.grid label:before {
content: '';
font-size: .9rem;
font-family: 'Roboto Mono', monospace;
font-weight: bold;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.grid label:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
background: #c0c0c0;
border: 2px outset #ececec;
font-size: .75rem;
text-align: center;
pointer-events: auto;
}
.grid label:active:after {
background: #bdbdbd;
border: solid #999;
border-width: 2px 0 0 2px;
}
.grid .flags {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
opacity: 0;
visibility: hidden;
}
.grid .error, .grid .victory {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 0, 0, 0.75);
color: #fff;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
border: none;
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
}
.grid .victory {
background: rgba(0, 10, 0, 0.75);
}
#modeFlag:checked ~ .grid .flags {
visibility: visible;
}
#modeMine:checked ~ .grid:active ~ .infos .counter:before {
content: 'ð' !important;
}
input[id^=f]:checked ~ .infos .counter:before {
content: 'ð';
}
input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ .infos .counter:before {
content: 'ð';
}
input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ .infos .counter:before {
content: 'ð';
}
input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ .infos .counter:before {
content: 'ð';
}
input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ .infos .counter:before {
content: 'ð';
}
input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ .infos .counter:before {
content: 'ð¤';
}
input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ .infos .counter:before {
content: 'ð';
}
input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ .infos .counter:before {
content: 'ð';
}
input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked
200个WEB前端小游戏！ （6765个子文件） 
mouse.ani 66KB index.babel 19KB city.bin 3.03MB SubaraCity.bin 537KB block.bin 409KB login.bin 192KB fireworks.bin 100KB font.bin 34KB 个人排名.bin 11KB config.bin 10KB config.bin 10KB star.bin 9KB boom.bin 9KB boom.bin 9KB block.bin 6KB waiting.bin 2KB waiting.bin 2KB
bgrnd3.bmp 1.37MB gameover.bmp 1.37MB about.bmp 1.37MB bgrnd1.bmp 1.37MB help0.bmp 1.37MB bgrnd.bmp 1.37MB bgrnd2.bmp 1.37MB bgrnd.bmp 378KB bgrnd.bmp 92KB help.bmp 79KB exit.bmp 79KB logout.bmp 79KB option.bmp 79KB help-back.bmp 69KB exit.bmp 64KB confirm.bmp 64KB star.bmp 64KB star2.bmp 59KB gomenu.bmp 59KB continue.bmp 59KB CoffeeBean.bmp 18KB Chomper.bmp 18KB Threepeater.bmp 18KB PumpkinHead.bmp 18KB Garlic.bmp 18KB PuffShroom.bmp 18KB Starfruit.bmp 18KB Jalapeno.bmp 18KB Cactus.bmp 18KB Plantern.bmp 18KB CherryBomb.bmp 18KB Spikeweed.bmp 18KB Squash.bmp 18KB Repeater.bmp 18KB Blover.bmp 18KB GatlingPea.bmp 18KB IceShroom.bmp 18KB SplitPea.bmp 18KB ScaredyShroom.bmp 18KB HypnoShroom.bmp 18KB GloomShroom.bmp 18KB LilyPad.bmp 18KB FlowerPot.bmp 18KB Peashooter.bmp 18KB SnowPea.bmp 18KB Torchwood.bmp 18KB TallNut.bmp 18KB TwinSunflower.bmp 18KB SunFlower.bmp 18KB Spikerock.bmp 18KB DoomShroom.bmp 18KB WallNut.bmp 18KB PotatoMine.bmp 18KB SeaShroom.bmp 18KB SunShroom.bmp 18KB FumeShroom.bmp 18KB key.bmp 792B spilgames.css 180KB bootstrap.min.black.css 139KB bootstrap.css 138KB bootstrap.min.css 107KB style.css 100KB jquery.mobile-1.2.0.min.css 71KB style.css 42KB style.css 39KB font-awesome.min.css 28KB style.css 27KB default.css 26KB font-awesome.min.css 20KB allf.css 20KB main.css 19KB style.css 18KB style.css 18KB style.css 17KB style.css 17KB puppet.css 16KB style.css 11KB main.css 11KB main.css 11KB game.css 9KB components.css 7KB all.css 7KB family.css 7KB共 6765 条
- 1
- 2
- 3
- 4
- 5
- 6
- 68
资源评论
李多田2023-07-25尽管有些小游戏在视觉效果上不够出众，但是它们的玩法确实很有创意。
李诗旸2023-07-25里面的一些小游戏难度适中，适合不太熟悉前端的人来练习和学习。
BellWang2023-07-25这个文件很全面，涵盖了各种不同类型的WEB前端小游戏，能满足不同人群的需求。
武藏美-伊雯2023-07-25有不少小游戏在设计和玩法上还需要改进，但总体来说还是一个实用的资源。
萌新小白爱学习2023-07-25这个文件包含了200个WEB前端小游戏，有些游戏很有趣，是个不错的选择。
