话不多说,请看代码:
打地鼠
#content {
width:960px;
margin:0 auto;
text-align:center;
margin-top:40px;
}
#form1 {
margin:20px 0;
}
table {
margin:0 auto;
cursor:url(http://cdn./notes/pics/02/12/115915n79d7hvffengpdxe.png),auto;
}
td {
width:95px;
height:95px;
background:#00ff33;
}
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 = '';
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();
}
分数:
命中率:
倒计时:
流程设计:
点击“开始游戏”按钮游戏开始,否则将提示“请点击开始游戏”字样
分数、命中率显示重置为“0”,倒计时开始(默认为30秒)
老鼠图片不断显示、隐藏,玩家可点击鼠标左键进行游戏
当30秒倒计时结束或者玩家主动点击“结束按钮”时,游戏结束并显示游戏结果
实例中用到的图片附件下载
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
如果觉得《html设计打地鼠游戏 js实现打地鼠小游戏》对你有帮助,请点赞、收藏,并留下你的观点哦!