Home > Article > Web Front-end > Share an example code for implementing the whack-a-mole game using html+js
Share an example code for implementing the whack-a-mole game using html+js
- 零下一度Original
- 2017-05-08 11:37:507250browse
This article mainly shares the sample code of js to implement the whack-a-mole game. It has a very good reference value. Let’s take a look at it with the editor.
Without further ado, please look at the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打地鼠</title>
<style type="text/css">
#content {
width:960px;
margin:0 auto;
text-align:center;
margin-top:40px;
}
#form1 {
margin:20px 0;
}
table {
margin:0 auto;
cursor:url(http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915n79d7hvffengpdxe.png),auto;
}
td {
width:95px;
height:95px;
background:#00ff33;
}
</style>
<script type="text/javascript">
var td = new Array(), //保存每个格子的地鼠
playing = false, //游戏是否开始
score = 0, //分数
beat = 0, //鼠标点击次数
success = 0, //命中率
knock = 0, //鼠标点中老鼠图片的次数
countDown = 30, //倒计时
interId = null, //指定 setInterval()的变量
timeId = null; //指定 setTimeout()的变量
//游戏结束
function GameOver(){
timeStop();
playing = false;
clearMouse();
alert("游戏结束！\n 你获得的分数为："+score+"\n 命中率为："+success);
success = 0;
score = 0;
knock = 0;
beat = 0;
countDown = 30;
}
//显示当前倒计时所剩时间
function timeShow(){
document.form1.remtime.value = countDown;
if(countDown == 0){
GameOver();
return;
}else{
countDown = countDown-1;
timeId = setTimeout("timeShow()",1000);
}
}
//主动停止所有计时
function timeStop() {
clearInterval(interId);
clearTimeout(timeId);
}
//随机循环显示老鼠图片
function show(){
if(playing){
var current = Math.floor(Math.random()*25);
document.getElementById("td["+current+"]").innerHTML = '<img src="http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915w6tluu1gq8l1b54h.png">';
setTimeout("document.getElementById('td["+current+"]').innerHtml=''",3000); //使用 setTimeout()实现3秒后隐藏老鼠图片
}
}
//清除所有老鼠图片
function clearMouse(){
for(var i=0;i<25;i++){
document.getElementById("td["+i+"]").innerHTML="";
}
}
//点击事件函数，判断是否点中老鼠
function hit(id){
if(playing == false){
alert("请点击开始游戏!");
return;
}else{
beat += 1;
if(document.getElementById("td["+id+"]").innerHTML != ""){
score += 1;
knock += 1;
success = knock/beat;
document.form1.success.value = success;
document.form1.score.value = score;
document.getElementById("td["+id+"]").innerHTML = "";
}else{
score += -1;
success = knock/beat;
document.form1.success.value = success;
document.form1.score.value = score;
}
}
}
//游戏开始
function GameStart(){
playing = true;
interId = setInterval("show()",1000);
document.form1.score.value = score;
document.form1.success.value = success;
timeShow();
}
</script>
</head>
<body>
<p id="content">
<input type="button" value="开始游戏" onclick="GameStart()" />
<input type="button" value="结束游戏" onclick="GameOver()" />
<form name="form1" id="form1">
<label>分数：</label>
<input type="text" name="score" size="5">
<label>命中率：</label>
<input type="text" name="success" size="10">
<label>倒计时：</label>
<input type="text" name="remtime" size="5">
</form>
<table>
<tr>
<td id="td[0]" onclick="hit(0)"></td>
<td id="td[1]" onclick="hit(1)"></td>
<td id="td[2]" onclick="hit(2)"></td>
<td id="td[3]" onclick="hit(3)"></td>
<td id="td[4]" onclick="hit(4)"></td>
</tr>
<tr>
<td id="td[5]" onclick="hit(5)"></td>
<td id="td[6]" onclick="hit(6)"></td>
<td id="td[7]" onclick="hit(7)"></td>
<td id="td[8]" onclick="hit(8)"></td>
<td id="td[9]" onclick="hit(9)"></td>
</tr>
<tr>
<td id="td[10]" onclick="hit(10)"></td>
<td id="td[11]" onclick="hit(11)"></td>
<td id="td[12]" onclick="hit(12)"></td>
<td id="td[13]" onclick="hit(13)"></td>
<td id="td[14]" onclick="hit(14)"></td>
</tr>
<tr>
<td id="td[15]" onclick="hit(15)"></td>
<td id="td[16]" onclick="hit(16)"></td>
<td id="td[17]" onclick="hit(17)"></td>
<td id="td[18]" onclick="hit(18)"></td>
<td id="td[19]" onclick="hit(19)"></td>
</tr>
<tr>
<td id="td[20]" onclick="hit(20)"></td>
<td id="td[21]" onclick="hit(21)"></td>
<td id="td[22]" onclick="hit(22)"></td>
<td id="td[23]" onclick="hit(23)"></td>
<td id="td[24]" onclick="hit(24)"></td>
</tr>
</table>
</p>
</body>
</html>Process design:
Click the "Start Game" button to start the game, otherwise the message "Please click to start the game" will be prompted
Score, hit rate The display is reset to "0" and the countdown starts (default is 30 seconds)
The mouse picture is constantly displayed and hidden, and the player can click the left mouse button to play the game
When the 30-second countdown ends or the player actively clicks the "End Button", the game ends and the game results are displayed
[Related recommendations]
1. Free html online video tutorial
3. php.cn original html5 video tutorial
The above is the detailed content of Share an example code for implementing the whack-a-mole game using html+js. For more information, please follow other related articles on the PHP Chinese website!