06a5672ef9
In the top left corner, the remaining number of bombs is displayed based on the already place count of flags
80 lines
1.8 KiB
HTML
80 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Minesweeper.js</title>
|
|
<style>
|
|
html {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#minesweeper-overlay, #minesweeper-overlay2 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#game-container {
|
|
position: absolute;
|
|
bottom: 2.5%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
#game-stats {
|
|
position: absolute;
|
|
top: calc(2.5vh / 2);
|
|
left: 50%;
|
|
height: 5vh;
|
|
width: 1592px;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.stat-container {
|
|
float: left;
|
|
background-color: black;
|
|
border-radius: 10px;
|
|
color: red;
|
|
font-size: 4vh;
|
|
font-family: "SF Digital Readout", Roboto, Arial, sans-serif;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.stat-container.right {
|
|
float: right;
|
|
}
|
|
|
|
#time, #bombs {
|
|
margin: 0 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="margin: 0">
|
|
|
|
<div id="game-stats">
|
|
<div class="stat-container">
|
|
<span id="bombs">
|
|
000
|
|
</span>
|
|
</div>
|
|
|
|
<div class="stat-container right">
|
|
<span id="time">
|
|
00:00
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="game-container">
|
|
<canvas id="minesweeper-game" width="100" height="100"></canvas>
|
|
<canvas id="minesweeper-overlay" width="100" height="100"></canvas>
|
|
<canvas id="minesweeper-overlay2" width="100" height="100"></canvas>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="animations/click.js"></script>
|
|
<script type="text/javascript" src="animations/victory.js"></script>
|
|
<script type="text/javascript" src="minesweeper.js"></script>
|
|
|
|
</body>
|
|
</html>
|