Without further ado, please see the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Beat the gopher</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(/notes/pics/201702/12/),auto;
}
td {
width:95px;
height:95px;
background:#00ff33;
}
</style>
<script type="text/javascript">
var td = new Array(), //Save the gopher in each grid playing = false, //Whether the game starts score = 0, //Fraction beat = 0, //Mouse clicks success = 0, //Hit rate knock = 0, //The number of times the mouse is clicked on the mouse picture countDown = 30, //Countdown interId = null, //Specify the variable of setInterval() timeId = null; //Specify the variable of setTimeout() //game over function GameOver(){
timeStop();
playing = false;
clearMouse();
alert("The game ends!\nThe score you get is:"+score+"\nHit rate is:"+success);
success = 0;
score = 0;
knock = 0;
beat = 0;
countDown = 30;
}
//Show the remaining time of the current countdown function timeShow(){
document. = countDown;
if(countDown == 0){
GameOver();
return;
}else{
countDown = countDown-1;
timeId = setTimeout("timeShow()",1000);
}
}
//Actively stop all timing function timeStop() {
clearInterval(interId);
clearTimeout(timeId);
}
// Random cycle displays mouse pictures function show(){
if(playing){
var current = (()*25);
("td["+current+"]").innerHTML = '<img src="/notes/pics/201702/12/">';
setTimeout("('td["+current+"]').innerHtml=''",3000); //Use setTimeout() to hide the mouse picture after 3 seconds }
}
//Clear all mouse pictures function clearMouse(){
for(var i=0;i<25;i++){
("td["+i+"]").innerHTML="";
}
}
//Click the event function to determine whether the mouse is clicked function hit(id){
if(playing == false){
alert("Please click to start the game!");
return;
}else{
beat += 1;
if(("td["+id+"]").innerHTML != ""){
score += 1;
knock += 1;
success = knock/beat;
document. = success;
document. = score;
("td["+id+"]").innerHTML = "";
}else{
score += -1;
success = knock/beat;
document. = success;
document. = score;
}
}
}
//The game begins function GameStart(){
playing = true;
interId = setInterval("show()",1000);
document. = score;
document. = success;
timeShow();
}
</script>
</head>
<body>
<div >
<input type="button" value="Start the game" onclick="GameStart()" />
<input type="button" value="End the game" onclick="GameOver()" />
<form name="form1" >
<label>Fraction：</label>
<input type="text" name="score" size="5">
<label>Hit rate：</label>
<input type="text" name="success" size="10">
<label>Countdown：</label>
<input type="text" name="remtime" size="5">
</form>
<table>
<tr>
<td onclick="hit(0)"></td>
<td onclick="hit(1)"></td>
<td onclick="hit(2)"></td>
<td onclick="hit(3)"></td>
<td onclick="hit(4)"></td>
</tr>
<tr>
<td onclick="hit(5)"></td>
<td onclick="hit(6)"></td>
<td onclick="hit(7)"></td>
<td onclick="hit(8)"></td>
<td onclick="hit(9)"></td>
</tr>
<tr>
<td onclick="hit(10)"></td>
<td onclick="hit(11)"></td>
<td onclick="hit(12)"></td>
<td onclick="hit(13)"></td>
<td onclick="hit(14)"></td>
</tr>
<tr>
<td onclick="hit(15)"></td>
<td onclick="hit(16)"></td>
<td onclick="hit(17)"></td>
<td onclick="hit(18)"></td>
<td onclick="hit(19)"></td>
</tr>
<tr>
<td onclick="hit(20)"></td>
<td onclick="hit(21)"></td>
<td onclick="hit(22)"></td>
<td onclick="hit(23)"></td>
<td onclick="hit(24)"></td>
</tr>
</table>
</div>
</body>
</html>
Process design:
- Click the "Start Game" button to start the game, otherwise the word "Please click "Start Game" will be prompted.
- The score and hit rate display reset to "0", and the countdown starts (default is 30 seconds)
- The mouse picture is constantly displayed and hidden, and players 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
Used in the exampleDownload picture attachment
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!