Home>

When writing this gopher game, you must first understand what to do at each step.

Then build the framework step by step and perfect the functions.

1. Create three rows and three columns of table,Used to store pits (pictures)

2. Get all picture tags

3. The action of the mouse is ①.

4.②. The mouse ran away

5.③. The rat was killed

6. Perfect functions

First, the first step is realized,Create a three-row, three-column pit with table

<div id="content">
<h2>Gopher</h2><br />
<table id="background">
<tr>
<td><img src="./images/keng.gif"></td>
<td><img src="./images/keng.gif"></td>
<td><img src="./images/keng.gif"></td>
</tr>
<tr>
<td><img src="./images/keng.gif"></td>
<td><img src="./images/keng.gif"></td>
<Td><img src="./images/keng.gif"></td>
</tr>
<tr>
<td><img src="./images/keng.gif"></td>
<td><img src="./images/keng.gif"></td>
<td><img src="./images/keng.gif"></td>
</tr>
</table>

The next step is to write js functions.

Second, first get the set of all the pits

var image=document.getelementsbytagname ("img");

3. The actions of the mouse are:①. Come out

The pits that the rats pop up have to get a random pit,Then replace the picture of the pit with the picture of the gopher

Then bind each mouse to the click event. Then either killed and triggered the die () function. Either the paole () function is triggered at intervals

function chulai () {
 rank=math.floor (math.random () * 9);
 image [rank] .src="./images/dishu.gif";
 image [rank] .style.margintop="0px";
 image [rank] .setattribute ("onclick", "die ()");
 settimeout ("paole ()", math.random () * 400 + 800);
}

Four, the action of the mouse:② The mouse was lucky to run away.

If you execute this function that the mouse ran,Then you have to make some changes.First, the picture must be replaced with the picture of the default pit.Then remove the click event bound to it. Finally, continue to call the function from the mouse,chulai ();

function paole () {
 image [rank] .src="./images/keng.gif";
 image [rank] .style.margintop="31px";
 image [rank] .removeattribute ("onclick");
 settimeout ("chulai ()", math.random () * 400 + 800);
}

Five, the action of the mouse:③. The mouse was unfortunately killed by us

The mouse must perform the following changes to perform the event,You also need to remove the click event on it and replace its picture with the injured picture.

function die () {
 image [rank] .src="./images/shang.gif";
 image [rank] .removeattribute ("onclick");
 image [rank] .style.margintop="3px";
 }

After writing the above code,Looks like it has full functionality,Actually, it cannot be executed.Because there is one missing entry function,That is, the function from the mouse should be called,Of course, this function should also be called at random time in math.random (),That is, the integrated code is as follows.

<script type="text/javascript">
//1 get all the pits first (picture)
var image=document.getelementsbytagname ("img");
var rank;
//call entry function at random time
settimeout ("chulai ()", math.random () * 400 + 800);
//Let the mice randomly appear in a pit
function chulai () {
 rank=math.floor (math.random () * 9);
 image [rank] .src="./images/dishu.gif";
 image [rank] .style.margintop="0px";
 image [rank] .setattribute ("onclick", "die ()");
 settimeout ("paole ()", math.random () * 400 + 800);
}
//2 The mouse went back
function paole () {
 image [rank] .src="./images/keng.gif";
 image [rank] .style.margintop="31px";
 image [rank] .removeattribute ("onclick");
 settimeout ("chulai ()", math.random () * 400 + 800);
}
//3 the rat was killed
function die () {
 image [rank] .src="./images/shang.gif";
 image [rank] .removeattribute ("onclick");
 image [rank] .style.margintop="3px";
}
</script>

The above body code is complete.Add features next.

Added feature one, record the number of mice killed

If i want to add a counting function,Then define a div block in the body to display the string of how many mice are currently killed.Here we set the id to score. Define a variable count to record the number of mice currently killed.Count ++ in the die () function.

Part of the code is as follows:

function die () {
 image [rank] .src="./images/shang.gif";
 image [rank] .removeattribute ("onclick");
 image [rank] .style.margintop="3px";
 count ++;
 score.innerhtml=count;
 }

Added feature two, save the best record in history

To achieve the best historical record, you need to use local storage localstorage objects. Here we mainly use the object's

localstorage.setitem ("key name", "value"), stores the value locally as a key-value pair.localstorage.getitem ("key name");get value by key name.

Here we just need to use var prescore=localstorage.getitem ("key name") to get the best record of history,And compare it with the current count,If prescore is greater than the current count, the historical best record is not updated.If prescore is less than the current count, then make prescore=count;store it after the game is over.

Add function three, set the countdown timer,Control game over

So when can this round of games end?Then we need to set a timer.Here I wrote a one-minute countdown.When sencond is equal to 0, the game ends,Then right

localstorage.setitem ("bestscore", prescore) to update.

The code to add functions two and three is as follows:

function die () {
 try {
 image [rank] .src="./images/shang.gif";
 image [rank] .removeattribute ("onclick");
 image [rank] .style.margintop="3px";
 count ++;
 score.innerhtml=count;
 if (count>prescore)
 {
  score1.innerhtml=count;
  prescore=count;
 }
 localstorage.setitem ("bestscore", prescore);
 } catch (ex) {
 }
}
//Set a timer
var seconds=59;
var speed=1000;
function countdown (seconds, speed) {
 var txt="Time remaining:" + ((seconds<10)?"0" + seconds:seconds) + "second";
 div.innerhtml=txt;
 var timeid=settimeout ("countdown (seconds-, speed)", speed);
 //if time is up
 if (seconds == 0) {
 //store the best record,Regardless of the current record breaking
 localstorage.setitem ("bestscore", prescore);
  cleartimeout (timeid);
  if (cover.style.display == "none") {
  cover.style.display="block";
  //Show this message when no mouse is hit
 if (count === undefined)
  text.innerhtml="The current score is:" +0+ "point" + "<br/>" + "Game over!";
 //beyond historical records,At this time the value saved by localstorage.getitem ("bestscore") is the current count value. Show this message
 else if (count == localstorage.getitem ("bestscore"))
 {
 text.innerhtml="The current score is:" + count + "points" + "<br/>" "+" Congratulations on breaking the record "+"<br/>"+" Game over! ";
 }
 else
  text.innerhtml="The current score is:" + count + "point" + "<br />" + "Game over!";
  }
 }
}
countdown (seconds, speed);

Attach the complete source code

<! Doctype html>
<html>
<head>
<mata charset="utf-8" />
 <title>Gopher</title>
 <script src="http://libs.google.com/jquery/1.10.2/jquery.min.js"></script>
 <style type="text/css">
 * {
 margin:0px;
 padding:0px;
 }
 #background {
 background:url (./images/beijing.jpg);
 }
 h2 {
  font-family:"Microsoft Yahei";
  font-size:30px;
  padding-left:100px;
 }
 table td {
  width:100px;
  height:100px;
 }
 img {
  margin-top:31px;
 }
 #content {
  z-index:1;
  margin-left:40%;
 }
 #count {
 width:320px;
 height:40px;
 background-color:#e8e8e8;
 padding-left:0px;
 text-align:center;
 color:red;
 font-size:18px;
 line-height:30px;
 font-family:"Microsoft Yahei";
 }
 #count .score {
 text-align:center;
 color:lightgreen;
 font-size:20px;
 line-height:30px;
 font-family:"Microsoft Yahei";
 }
 #history #id {
 text-align:center;
 color:lightgreen;
 font-size:20px;
 line-height:30px;
 font-family:"Microsoft Yahei";
 }
 #history {
 position:absolute;
 top:60px;
 right:240px;
 width:180px;
 height:90px;
 background-color:#e8e8e8;
 color:lightblue;
 font-size:20px;
 line-height:80px;
 text-align:center;
 }
 .clock {
 position:absolute;
 top:0px;
 right:240px;
 width:180px;
 height:60px;
 background-color:lightblue;
 color:red;
 font-size:20px;
 text-align:center;
 line-height:60px;
 }
 #cover {
  margin-top:0px;
 position:absolute;
 z-index:2;
 width:800px;
 height:600px;
 top:0px;
 left:0px;
 right:0px;
 bottom:0px;
 margin:auto;
 background:rgba (128,128,128,0.5);
 color:red;
 font-size:30px;
 text-align:center;
 vertical-align:middle;
 }
 </style>
</head>
<body>
<div id="content">
<h2>Gopher</h2>
<table id="background">
 <tr>
 <td><img src="./images/keng.gif"></td>
 <td><img src="./images/keng.gif"></td>
 <td><img src="./images/keng.gif"></td>
 </tr>
 <tr>
 <td><img src="./images/keng.gif"></td>
 <td><img src="./images/keng.gif"></td>
 <td><img src="./images/keng.gif"></td>
 </tr>
 <tr>
 <td><img src="./images/keng.gif"></td>
 <td><img src="./images/keng.gif"></td>
 <td><img src="./images/keng.gif"></td>
 </tr>
</table>
<div id="count">Current score:<span class="score">0</span>points</div>
<div id="history">Best record:<span id="score1">0</span>points</div>
<div class="clock"</div>
</div>
<div id="cover"><span id="text"></span></div>
<script type="text/javascript">
//1 get all the pits first (picture)
var content=document.getelementbyid ("content");
var cover=document.getelementbyid ("cover");
var image=document.getelementsbytagname ("img");
var countmouse=document.getelementbyid ("count");
var score=countmouse.queryselector (". score");
var history=document.getelementbyid ("history");
var score1=document.getelementbyid ("score1");
var div=document.queryselector (". clock");
var text=document.getelementbyid ("text");
var prescore=0;
var rank;
var count=0;
//localstorage.removeitem ("bestscore");
//localstorage.removeitem ("scoreshow");
prescore=localstorage.getitem ("bestscore");
console.log (prescore);
score1.innerhtml=prescore;
//Let the mice randomly appear in a pit
settimeout ("chulai ()", math.random () * 400 + 800);
function chulai () {
 try {
 rank=math.floor (math.random () * 9);
 image [rank] .src="./images/dishu.gif";
 image [rank] .style.margintop="0px";
 image [rank] .setattribute ("onclick", "die ()");
 settimeout ("paole ()", math.random () * 400 + 800);
 } catch (ex) {}
}
//2 The mouse went back
function paole () {
 try {
 image [rank] .src="./images/keng.gif";
 image [rank] .style.margintop="31px";
 image [rank] .removeattribute ("onclick");
 settimeout ("chulai ()", math.random () * 400 + 800);
 } catch (ex) {}
}
//3 the rat was killed
function die () {
 try {
 image [rank] .src="./images/shang.gif";
 image [rank] .removeattribute ("onclick");
 image [rank] .style.margintop="3px";
 count ++;
 score.innerhtml=count;
 if (count>prescore)
 {
  score1.innerhtml=count;
  prescore=count;
 }
 localstorage.setitem ("bestscore", prescore);
 } catch (ex) {
 }
}
//Set a timer
var seconds=59;
var speed=1000;
function countdown (seconds, speed) {
  var txt="Time remaining:" + ((seconds<10)?"0" + seconds:seconds) + "second";
  div.innerhtml=txt;
  var timeid=settimeout ("countdown (seconds-, speed)", speed);
  if (seconds == 0) {
   //localstorage.setitem("scoreshow",count);
   localstorage.setitem ("bestscore", prescore);
   cleartimeout (timeid);
   if (cover.style.display == "none") {
    cover.style.display="block";
   if (count === undefined)
    text.innerhtml="The current score is:" +0+ "point" + "<br/>" + "Game over!";
   else if (count == localstorage.getitem ("bestscore")) {
    text.innerhtml="Current score:" + count + "point" + "<br/>" + "Congratulations on breaking the record" + "<br/>" + "Game over!";
    }
   else
    text.innerhtml="The current score is:" + count + "point" + "<br />" + "Game over!";
    }
   }
}
countdown (seconds, speed);
</script>
</body>
</html>
  • Previous Javascript to achieve smart navigation when page scrolling
  • Next Access to SQL database method