js实现一个Wildfire小游戏代码
代码语言：html
所属分类：游戏
代码描述：js实现一个Wildfire小游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&family=Source+Serif+Pro:ital@0;1&display=swap'>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
#root, #__next {
isolation: isolate;
}
:root {
--color-primary: #ACB49C;
--color-neutral-light: #EAE4D4;
--color-neutral: #E4D9BC;
--color-neutral-dark: #D3C6A4;
--color-black: #332E20;
--color-white: #fff;
--sans-serif: "Source Sans Pro", sans-serif;
--serif: "Source Serif Pro", serif;
}
html.dark:root {
--color-primary: #67896F;
--color-neutral-light: #222F25;
--color-neutral: #0E130F;
--color-neutral-dark: #0A0E0B;
--color-orange: #DC8A3E;
--color-red: #C13333;
}
html.dark body {
background-color: var(--color-neutral);
}
html.dark h1 {
color: var(--color-primary);
}
html.dark .numbering__value {
color: var(--color-primary);
}
html.dark .grid {
background-color: var(--color-neutral-light);
border-color: var(--color-neutral-light);
}
html.dark .grid__square {
background-color: var(--color-neutral-dark);
}
html.dark .grid__square:hover {
background-color: var(--color-neutral);
}
html.dark .grid__square--home svg {
stroke: var(--color-white);
}
html.dark .grid__square--slash svg {
filter: drop-shadow(0 0 8px var(--color-orange));
stroke: var(--color-orange);
}
html.dark .grid__square--dig svg, html.dark .grid__square--douse svg {
stroke: var(--color-primary);
}
html.dark .grid__square--fire > svg {
stroke: var(--color-orange);
}
html.dark .grid__square--fire div svg {
filter: drop-shadow(0 0 8px var(--color-red));
stroke: var(--color-red);
}
html.dark .grid__square--fire.grid__square--home > svg {
filter: drop-shadow(0 0 8px var(--color-red));
stroke: var(--color-red);
}
html.dark .grid__square--coordinates {
outline-color: var(--color-primary);
}
html.dark .actions {
background-color: var(--color-neutral-dark);
border-color: var(--color-neutral-light);
color: var(--color-primary);
}
html.dark .actions__item svg {
stroke: var(--color-primary);
}
html.dark .message {
background-color: var(--color-neutral-dark);
border-color: var(--color-neutral-light);
color: var(--color-primary);
}
@media (hover: hover) {
html.dark .menu .menu__item:hover {
background-color: var(--color-neutral-light);
}
html.dark .menu .menu__item:hover svg {
stroke: var(--color-white);
}
}
html.dark .menu .menu__item--active {
background-color: var(--color-neutral-light);
}
html.dark .menu .menu__item--active svg {
stroke: var(--color-white);
}
html.dark .menu svg {
stroke: var(--color-primary);
}
html {
height: -webkit-fill-available;
}
body {
background-color: var(--color-neutral);
font-family: var(--sans-serif);
display: grid;
place-items: center;
margin: 0;
min-height: 100vh;
min-height: -webkit-fill-available;
position: relative;
}
h1 {
font-family: var(--serif);
font-weight: normal;
}
#game {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
padding: 24px 0;
position: relative;
}
#board {
position: relative;
}
.dice {
display: flex;
gap: 8px;
margin-bottom: 40px;
margin-top: auto;
padding: 8px 0;
position: relative;
}
.dice__cube {
background-color: var(--color-white);
border: 2px solid var(--color-black);
border-radius: 4px;
height: 48px;
width: 48px;
}
.dice__cube[data-value="1"] {
background-image: radial-gradient(circle 6px at center, black 50%, transparent 50%);
}
.dice__cube[data-value="2"] {
background-image: radial-gradient(circle 6px at 14px 14px, black 50%, transparent 50%), radial-gradient(circle 6px at calc(100% - 14px) calc(100% - 14px), black 50%, transparent 50%);
}
.dice__cube[data-value="3"] {
background-image: radial-gradient(circle 6px at calc(100% - 12px) 12px, black 50%, transparent 50%), radial-gradient(circle 6px at center, black 50%, transparent 50%), radial-gradient(circle 6px at 12px calc(100% - 12px), black 50%, transparent 50%);
}
.dice__cube[data-value="4"] {
background-image: radial-gradient(circle 6px at 14px 14px, black 50%, transparent 50%), radial-gradient(circle 6px at calc(100% - 14px) 14px, black 50%, transparent 50%), radial-gradient(circle 6px at 14px calc(100% - 14px), black 50%, transparent 50%), radial-gradient(circle 6px at calc(100% - 14px) calc(100% - 14px), black 50%, transparent 50%);
}
.dice__cube[data-value="5"] {
background-image: radial-gradient(circle 6px at 14px 14px, black 50%, transparent 50%), radial-gradient(circle 6px at calc(100% - 14px) 14px, black 50%, transparent 50%), radial-gradient(circle 6px at center, black 50%, transparent 50%), radial-gradient(circle 6px at 14px calc(100% - 14px), black 50%, transparent 50%), radial-gradient(circle 6px at calc(100% - 14px) calc(100% - 14px), black 50%, transparent 50%);
}
.dice__cube[data-value="6"] {
background-image: radial-gradient(circle 6px at 14px 12px, black 50%, transparent 50%), radial-gradient(circle 6px at calc(100% - 14px) 12px, black 50%, transparent 50%), radial-gradient(circle 6px at 14px 50%, black 50%, transparent 50%), radial-gradient(circle 6px at calc(100% - 14px) 50%, black 50%, transparent 50%), radial-gradient(circle 6px at 14px calc(100% - 12px), black 50%, transparent 50%), radial-gradient(circle 6px at calc(100% - 14px) calc(100% - 12px), black 50%, transparent 50%);
}
.numbering {
list-style: none;
position: absolute;
}
.numbering--columns {
bottom: 100%;
display: grid;
grid-template-columns: repeat(6, 1fr);
padding: 8px 0;
text-align: center;
width: 100%;
}
.numbering--rows {
align-items: center;
display: grid;
grid-template-rows: repeat(6, 1fr);
height: 100%;
padding: 0 16px;
right: 100%;
text-align: center;
}
.numbering__value {
font-family: var(--serif);
font-style: italic;
}
.grid {
background-color: var(--color-primary);
border: 2px solid var(--color-black);
border-radius: 4px;
display: grid;
gap: 2px;
grid-template-columns: repeat(6, 40px);
grid-template-rows: repeat(6, 40px);
}
.grid__square {
background-color: var(--color-neutral-light);
cursor: pointer;
display: grid;
}
.grid__square:nth-child(1) {
border-top-left-radius: 4px;
}
.grid__square:nth-child(6) {
border-top-right-radius: 4px;
}
.grid__square:nth-child(31) {
border-bottom-left-radius: 4px;
}
.grid__square:nth-child(36) {
border-bottom-right-radius: 4px;
}
@media (hover: hover) {
.grid__square:hover {
background-color: var(--color-neutral);
}
}
.grid__square--coordinates {
outline: 2px solid var(--color-black);
}
.grid__square svg {
animation: showSVG 0.5s ease forwards;
clip-path: polygon(-2px -2px, -2px -2px, -2px calc(100% + 2px), -2px calc(100% + 2px));
grid-area: 1/1/1/1;
pointer-events: none;
stroke: var(--color-black);
user-select: none;
}
.grid__square div {
grid-area: 1/1/1/1;
}
@keyframes showSVG {
to {
clip-path: polygon(-2px -2px, calc(100% + 2px) -2px, calc(100% + 2px) calc(100% + 2px), -2px calc(100% + 2px));
}
}
.actions {
align-items: center;
background-color: var(--color-neutral-light);
border: 2px solid var(--color-black);
border-radius: 4px;
display: flex;
gap: 0;
margin-bottom: auto;
margin-top: 16px;
padding: 0 2px 0 16px;
width: 100%;
}
.actions--hidden {
display: none;
}
.actions__text {
font-weight: bold;
margin-right: auto;
}
.actions__item--disabled {
opacity: 0.25;
}
.actions__item--douse svg {
padding: 2px;
}
.actions__item svg {
height: 40px;
stroke: var(--color-black);
width: 40px;
}
.message {
align-items: center;
background-color: var(--color-neutral-light);
border: 2px solid var(--color-black);
border-radius: 4px;
display: none;
font-weight: bold;
gap: 0;
justify-content: space-between;
margin-bottom: auto;
margin-top: 16px;
padding: 8px 16px;
width: 100%;
}
.message--active {
display: flex;
}
.menu {
display: flex;
gap: 8px;
padding-top: 24px;
position: relative;
}
.menu__item {
background-color: var(--color-neutral-dark);
border-radius: 50%;
cursor: pointer;
display: grid;
height: 40px;
place-content: center;
user-select: none;
width: 40px;
}
@media (hover: hover) {
.menu__item:hover {
background-color: var(--color-black);
}
.menu__item:hover svg {
stroke: var(--color-primary);
}
}
.menu__item--active {
background-color: var(--color-neutral-dark);
}
.menu__item svg {
height: 24px;
pointer-events: none;
stroke: var(--color-black);
width: 24px;
}
</style>
</head>
<body >
<main id="game">
<h1>Wildfire</h1>
<div class="dice">
<div class="dice__cube dice__cube--column" data-value="1"></div>
<div class="dice__cube dice__cube--row" data-value="1"></div>
</div>
<div id="board">
<ul class="numbering numbering--columns">
<li class="numbering__value">1</li>
<li class="numbering__value">2</li>
<li class="numbering__value">3</li>
<li class="numbering__value">4</li>
<li class="numbering__value">5</li>
<li class="numbering__value">6</li>
</ul>
<ul class="numbering numbering--rows">
<li class="numbering__value">1</li>
<li class="numbering__value">2</li>
<li class="numbering__value">3</li>
<li class="numbering__value">4</li>
<li class="numbering__value">5</li>
<li class="numbering__value">6</li>
</ul>
<div class="grid">
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
<div class="grid__square"></div>
</div>
</div>
<nav class="actions">
<div class="actions__text">Actions: <span class="actions__available">0</span></div>
<div class="actions__item actions__item--douse actions__item--disabled" title="Douse">
<svg viewBox="0 0 32 32">
<use xlink:href="#douse"></use>
</svg>
</div>
<div class="actions__item actions__item--dig actions__item--disabled" title="Dig">
<svg viewBox="0 0 32 32">
<use xlink:href="#dig"></use>
</svg>
</div>
</nav>
<div class="message">
</div>
<nav class="menu">
<div class="menu__item menu__item--restart" title="Restart">
<svg viewBox="0 0 32 32">
<use xlink:href="#restart"></use>
</svg>
</div>
<a class="menu__item menu__item--info" href="https://wildfire.cfdesigner.com/Wildfire.pdf" title="Rulebook" target="_blank">
<svg viewBox="0 0 32 32">
<use xlink:href="#info"></use>
</svg>
</a>
<div class="menu__item menu__item--mode" title="Mode">
<svg viewBox="0 0 32 32">
<use xlink:href="#mode"></use>
</svg>
</div>
</nav>
</main>
<svg class="sprite" style="display: none;">
<defs>
<g id="restart" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
<path d="M29 16 C29 22 24 29 16 29 8 29 3 22 3 16 3 10 8 3 16 3 21 3 25 6 27 9 M20 10 L27 9 28 2" />
</g>
<g id="info" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
<path d="M16 14 L16 23 M16 8 L16 10" />
<circle cx="16" cy="16" r="14" />
</g>
<g id="mode" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
<path d="M14 2C 9 2 3 7 3 15 3 23 9 29 17 29 25 29 30 23 30 18 19 25 7 13 14 2Z" />
</g>
<g id="home" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M14.2679 8C15.0377 6.66667 16.9623 6.66667 17.7321 8L24.6603 20C25.4301 21.3333 24.4678 23 22.9282 23H9.0718C7.5322 23 6.56995 21.3333 7.33975 20L14.2679 8Z"/>
</g>
<g id="slash" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M9 23L23 9"/>
</g>
<g id="fire" viewBox="0 0 32 32" width="32" heig.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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