原生js实现一个简单的扫雷游戏代码
代码语言:html
所属分类:游戏
代码描述:原生js实现一个简单的扫雷游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
<style>
:root {
--tileSize: 60px;
--boardSize: 0px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "VT323", monospace;
}
*::-moz-selection {
background: rgba(127, 140, 141, 0.6);
}
*::selection {
background: rgba(127, 140, 141, 0.6);
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #ffebc5;
}
.btn {
background: #c9c9c9;
padding: 0.5rem 1rem;
text-decoration: none;
color: #969696;
font-size: 1.5rem;
text-transform: uppercase;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: background 0.2s ease, transform 0.2s ease;
box-shadow: inset 0 2px 0 #e7e7e7, inset 0 -2px 0 #bcbcbc, inset 2px 0 0 #e7e7e7, inset -2px 0 0 #bcbcbc;
text-shadow: 0 1px 0 #efefef, 0 -1px 0 #7c7c7c;
}
.btn:hover {
background: #d5d5d5;
transform: translateY(-1px);
}
.btn:active {
background: #bcbcbc;
transform: translateY(1px);
}
.endscreen {
position: fixed;
background: #e2e2e2;
padding: 1rem 2rem;
font-size: 40px;
display: none;
box-shadow: inset 0 2px 0 #e7e7e7, inset 0 -2px 0 #bcbcbc, inset 2px 0 0 #e7e7e7, inset -2px 0 0 #bcbcbc, 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 16px 32px 0 rgba(0, 0,.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0