<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Whack A Mole!</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="style.css" />
<style>
html {
box-sizing: border-box;
font-size: 10px;
background: #ffc600;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
padding: 0;
margin: 0;
font-family: 'Amatic SC', cursive;
}
h1,
h2 {
text-align: center;
font-size: 10rem;
line-height: 1;
margin-bottom: 0;
}
h2 {
font-size: 8rem;
}
.score {
background: rgba(255, 255, 255, 0.2);
padding: 0 3rem;
line-height: 1;
border-radius: 1rem;
}
p {
height: 5rem;
text-align: center;
}
button {
margin: 0 auto;
width: 10rem;
font-size: 3rem;
font-family: 'Amatic SC', cursive;
-webkit-appearance: none;
appearance: none;
font-weight: bold;
background: rgba(255, 255, 255, 0.2);
border: 1px solid black;
border-radius: 1rem;
}
.game {
width: 600px;
height: 400px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.hole {
flex: 1 0 33.33%;
overflow: hidden;
position: relative;
}
.hole:after {
display: block;
background: url(dirt.svg) bottom center no-repeat;
background-size: contain;
content: '';
width: 100%;
height: 70px;
position: absolute;
z-index: 2;
bottom: -30px;
}
.mole {
background: url('../mole.png') bottom center no-repeat;
background-size: 60%;
position: absolute;
top: 70%;
width: 100%;
height: 100%;
transition: all 0.4s;
}
.hole.up .mole {
top: 0;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url(TUZyzwprpvBS1izr_vOEDuSfQZQ.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url(TUZyzwprpvBS1izr_vOECOSfQZQ.woff2) format('woff2');
unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url(TUZyzwprpvBS1izr_vOEBeSfQZQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url(TUZyzwprpvBS1izr_vOEBOSfQZQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url(TUZyzwprpvBS1izr_vOECuSf.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 700;
src: url(TUZ3zwprpvBS1izr_vOMscGKerUC7WQ.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 700;
src: url(TUZ3zwprpvBS1izr_vOMscGKfLUC7WQ.woff2) format('woff2');
unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 700;
src: url(TUZ3zwprpvBS1izr_vOMscGKcbUC7WQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 700;
src: url(TUZ3zwprpvBS1izr_vOMscGKcLUC7WQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 700;
src: url(TUZ3zwprpvBS1izr_vOMscGKfrUC.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
</head>
<body>
<h1>Whack-a-mole! <span class="score">0</span></h1>
<p><button>Start</button></p>
<div class="game">
<div class="hole hole1">
<div class="mole"></div>
</div>
<div class="hole hole2">
<div class="mole"></div>
</div>
<div class="hole hole3">
<div class="mole"></div>
</div>
<div class="hole hole4">
<div class="mole"></div>
</div>
<div class="hole hole5">
<div class="mole"></div>
</div>
<div class="hole hole6 ">
<div class="mole"></div>
</div>
</div>
<h2 class="game-status"></h2>
<script src="./index.js"></script>
<script>
let cocMouseGame = (set, tnt) => {
let button = document.querySelector('button')
let hole = document.querySelectorAll('.hole')
let score = document.querySelector('.score')
let get = 0
button.addEventListener('click', function () {
button.style.display = 'none';
score.innerHTML = 0
set = setInterval(function () {
tnt = parseInt(Math.random() * 6)
hole[tnt].classList.toggle('up')
setTimeout(function () {
hole[tnt].classList.remove('up')
}, 950)
}, 1000)
setTimeout(function () {
clearInterval(set)
button.style.display = 'block'
get = 0
alert('游戏结束')
}, 60000)
hole.forEach(function (value) {
value.addEventListener('click', function () {
if (this.classList.contains('up')) {
this.classList.toggle('up')
get++
score.innerHTML = get
}
})
});
})
}
cocMouseGame()
</script>
</body>
</html>
