游戏使用HTML、CSS和JavaScript编写,可以在任何现代的Web浏览器中运行。
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Whack-a-Mole</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Whack-a-Mole</h1>
<p>Click the moles as they appear to earn points!</p >
<div id="game-container">
<div id="score-container">
<h2>Score:</h2>
<p id="score">0</p >
</div>
<div id="mole-container">
<div class="mole"></div>
<div class="mole"></div>
<div class="mole"></div>
<div class="mole"></div>
<div class="mole"></div>
<div class="mole"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS代码,用于样式化游戏界面
body {
background-color: #efefef;
font-family: sans-serif;
}
h1 {
text-align: center;
}
#game-container {
margin: 0 auto;
width: 600px;
}
#score-container {
text-align: center;
}
#score {
font-size: 3em;
margin-top: 0.5em;
}
#mole-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.mole {
width: 100px;
height: 100px;
background-image: url('mole.png');
background-size: cover;
cursor: pointer;
transition: transform 0.2s ease;
}
.mole:hover {
transform: scale(1.2);
}
JavaScript代码,用于游戏逻辑
const moleContainer = document.getElementById("mole-container");
const score = document.getElementById("score");
let scoreValue = 0;
moleContainer.addEventListener("click", (event) => {
if (event.target.classList.contains("mole")) {
event.target.style.display = "none";
scoreValue ;
score.textContent = scoreValue;
}
});
setInterval(() => {
const moles = document.querySelectorAll(".mole");
const randomIndex = Math.floor(Math.random() * moles.length);
const randomMole = moles[randomIndex];
randomMole.style.display = "block";
setTimeout(() => {
randomMole.style.display = "none";
}, 1000);
}, 1500);
该代码使用了定时器,每隔1.5秒钟随机选择一个地鼠出现,并在1秒后隐藏它。
点击地鼠时,得分会增加,并将得分更新到页面上。
通过添加更多的功能和交互性来扩展它。例如,你可以增加游戏难度、添加动画效果、添加音效等等。
如果你想要在Mac上运行这个游戏,可以按照以下步骤:
1 将上面的HTML、CSS和JavaScript代码复制到你的编辑器中。
2 保存文件,并将它们放到同一个文件夹中。
3 在Mac上打开任何现代的Web浏览器,如Safari、Chrome或Firefox。
4 在浏览器中打开HTML文件(例如,双击文件或使用“文件”菜单中的“打开文件”选项)。
如果一切顺利,你应该能够在Mac上玩这个简单的网页游戏了。
,