python打地鼠游戏代码100行_JavaScript实现打地鼠小游戏

在写这个打地鼠的游戏开始首先要清楚每一步该做什么

然后再一步一步搭好框架再完善功能。

1.创建table三行三列，用来存放坑(图片)

2.获得所有的图片标签

3.老鼠的动作有①.冒出来

4.②. 老鼠跑了

5.③.老鼠被打死了

6.完善功能

一、首先实现第一步，用table创建一个三行三列的坑

打地鼠

接下来就是写js函数。

二、首先获得所有的坑的集合

var image = document.getElementsByTagName(‘img');

三、老鼠的动作有：①.冒出来

老鼠冒出来的坑得获得一个随机的坑，然后将坑的图片替换成地鼠的图片

再将每个老鼠绑定click事件。然后要么打死触发die()函数。要么隔一段时间触发paole()函数

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);

}

四、老鼠的动作： ②.老鼠很幸运的跑了

如果执行老鼠跑了的这个函数，那么得做一些改变。首先图片得换成默认的坑的图片。然后移除掉绑定到它身上的click事件。最后再继续调用老鼠出来的函数，chulai();

function paole(){

image[ranK].src = "./images/keng.gif";

image[ranK].style.marginTop = "31px";

image[ranK].removeAttribute("onclick");

setTimeout("chulai()", Math.random()*400+800);

}

五、老鼠的动作： ③.老鼠很不幸的被我们打死了

老鼠执行该事件得进行以下改变，同样也得移除它身上的click事件，将它的图片换成受伤的图片。

function die(){

image[ranK].src = "./images/shang.gif";

image[ranK].removeAttribute("onclick");

image[ranK].style.marginTop = "3px";

}

在写完了上面这些代码后，貌似有了完整的功能，实际上却不能执行。因为少了一个入口的函数，即老鼠出来的函数应该被调用，当然，这个函数也应该在Math.random()的随机时间中被调用，即整合后的代码如下。

//1 先获取到所有的坑(图片)

var image = document.getElementsByTagName('img');

var ranK;

//随机时间调用入口函数

setTimeout("chulai()",Math.random()*400+800);

//让老鼠随机出现在一个坑里

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 老鼠回去了

function paole(){

image[ranK].src = "./images/keng.gif";

image[ranK].style.marginTop = "31px";

image[ranK].removeAttribute("onclick");

setTimeout("chulai()", Math.random()*400+800);

}

//3 老鼠被打死了

function die(){

image[ranK].src = "./images/shang.gif";

image[ranK].removeAttribute("onclick");

image[ranK].style.marginTop = "3px";

}

在通过设置css样式后，就可以完美的执行了。效果图如下。

上面的主体代码已经完成了。接下来就添加功能。

添加功能一、记录当前打死的老鼠数

如果想要添加计数功能，那么在body中定义一个div块，用来显示当前打死多少只老鼠的字符串。在这里我们设置为id为score。再定义一个变量count，记录当前打死的老鼠数。在die()函数中进行count++。

部分代码如下：

function die(){

image[ranK].src = "./images/shang.gif";

image[ranK].removeAttribute("onclick");

image[ranK].style.marginTop = "3px";

count++;

score.innerHTML =count;

}

效果图如下：

添加功能二、保存历史最佳纪录

要实现保存历史最佳纪录那么要使用本地存储localStorage对象。在这儿我们主要使用该对象的

localStorage.setItem(“键名”,”值”)，将值以键值对的形式存储到本地。localStorage.getItem(“键名”)；通过键名获得值。

在这里我们只需将利用var preScore = localStorage.getItem(“键名”)获得历史的最佳记录，然后与当前的count进行对比，如果preScore大于当前的count，则不更新历史最佳记录。如果preScore小于了当前的count，那么使preScore=count；再本轮游戏结束后进行存储。

添加功能三、设置倒计时器，控制游戏结束

那么本轮游戏什么时候可以结束，那么就要设置一个计时器。在这里我写了一个一分钟的倒计时器。当sencond等于0，时游戏结束，然后再对

localStorage.setItem(“bestScore”,preScore)，进行更新。

添加功能二和三的代码如下：

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){

}

}

//设置一个定时器

var seconds = 59;

var speed = 1000;

function countDown(seconds,speed){

var txt = "剩余时间：" + ((seconds < 10) ? "0" + seconds : seconds) +"秒";

div.innerHTML = txt;

var timeId = setTimeout("countDown(seconds--,speed)",speed);

//如果时间到了

if(seconds == 0){

//对最佳记录进行存储，不管当前有没有打破记录

localStorage.setItem("bestScore",preScore);

clearTimeout(timeId);

if(cover.style.display == "none"){

cover.style.display = "block";

//当没有打到一只老鼠的话显示该信息

if(count === undefined)

text.innerHTML = "当前成绩为："+0+"分"+"
"+"游戏结束！";

//超越了历史记录，此时localStorage.getItem("bestScore")保存的值时当前的count值。显示该信息

else if(count == localStorage.getItem("bestScore"))

{

text.innerHTML = "当前成绩为："+count+"分"+"
"+"恭喜您打破纪录"+"
"+"游戏结束！";

}

else

text.innerHTML = "当前成绩为："+count+"分"+"
"+"游戏结束！";

}

}

}

countDown(seconds,speed);

效果图如下：

最后附上完整的源代码

打地鼠

*{

margin: 0px;

padding: 0px;

}

#background{

background: url(./images/beijing.jpg);

}

h2{

font-family: "微软雅黑";

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: "微软雅黑";

}

#count .score{

text-align: center;

color: lightgreen;

font-size: 20px;

line-height: 30px;

font-family: "微软雅黑";

}

#history #id{

text-align: center;

color: lightgreen;

font-size: 20px;

line-height: 30px;

font-family: "微软雅黑";

}

#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;

}

打地鼠

当前得分 ： 0 分

最佳记录: 0 分

//1 先获取到所有的坑(图片)

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;

//让老鼠随机出现在一个坑里

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 老鼠回去了

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 老鼠被打死了

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){

}

}

//设置一个定时器

var seconds = 59;

var speed = 1000;

function countDown(seconds,speed){

var txt = "剩余时间：" + ((seconds < 10) ? "0" + seconds : seconds) +"秒";

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 = "当前成绩为："+0+"分"+"
"+"游戏结束！";

else if(count == localStorage.getItem("bestScore")){

text.innerHTML = "当前成绩为："+count+"分"+"
"+"恭喜您打破纪录"+"
"+"游戏结束！";

}

else

text.innerHTML = "当前成绩为："+count+"分"+"
"+"游戏结束！";

}

}

}

countDown(seconds,speed);

更多有趣的经典小游戏实现专题，分享给大家：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。