Web Front-end
HTML Tutorial
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
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1672
14
1428
52
1332
25
1276
29
1256
24
Table Border in HTML
Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.
Nested Table in HTML
Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.
HTML margin-left
Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.
HTML Table Layout
Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.
HTML Input Placeholder
Sep 04, 2024 pm 04:54 PM
Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.
How do you parse and process HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an
HTML Ordered List
Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively
HTML onclick Button
Sep 04, 2024 pm 04:49 PM
Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
