js实现打地鼠小游戏
话不多说，请看代码：
<!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>
<div 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>
</div>
</body>
</html>
流程设计：
- 点击“开始游戏”按钮游戏开始，否则将提示“请点击开始游戏”字样
- 分数、命中率显示重置为“0”，倒计时开始（默认为30秒）
- 老鼠图片不断显示、隐藏，玩家可点击鼠标左键进行游戏
- 当30秒倒计时结束或者玩家主动点击“结束按钮”时，游戏结束并显示游戏结果
实例中用到的图片附件下载
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编
-
JavaScript 打地鼠游戏代码说明
演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑): 说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码 代码如下: <style> #panel{height:300px;width:300px;background:#cc
-
JavaScript实现打地鼠小游戏
在写这个打地鼠的游戏开始首先要清楚每一步该做什么 然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能 一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu
-
js实现打地鼠小游戏
话不多说,请看代码: <!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 {
-
js仿3366小游戏选字游戏
本文实例为大家分享了js仿3366小游戏中"你是色盲吗"游戏,大家先来挑战一下 游戏目标: 按画面中出现的文字的颜色来选择颜色,千万不要被颜色的困局打扰,眼睛一定要放亮哦,游戏开始时会有10分,每答对一题得一分,总共有10分,时间用完游戏会结束. 操作说明: 鼠标点击选择颜色 1.效果图: 原图: 模仿: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
-
Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体代码: Mouse.java: import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt
-
js消除图片小游戏代码
js消除图片小游戏,效果如下所示: 做了一个简易的消除图片的小游戏,没有连线的规则. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
-
Android实现打地鼠小游戏
本文实例为大家分享了Android实现打地鼠小游戏的具体代码,供大家参考,具体内容如下 实现结果 代码实现 playmouse.java package com.example.playmouse; import android.content.pm.ActivityInfo; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.util.Log; impor
-
js实现翻牌小游戏
本文实例为大家分享了js实现翻牌小游戏的具体代码,供大家参考,具体内容如下 效果图 需求分析 1.生成两组顺序随机的1-8数据 2.卡片需要有翻转效果 3.两次翻转数据不相等,回复原状 4.两次翻转数据相等,卡片相等,不能再被点击 5.当所有卡片不能被点击游戏结束 6.限制最大点击次数50次 HTML结构 <div class="wrap"> <div> <p class="top"></p> <p class=
-
vue实现打地鼠小游戏
本文实例为大家分享了vue实现打地鼠小游戏的具体代码,供大家参考,具体内容如下 效果图如下: 代码如下: <template> <div class="game"> <h2>打地鼠游戏</h2> <div class="wraper"> <div class="item" v-for="n in TOTAL" :key="n"> <
-
用js实现拼图小游戏
本文实例为大家分享了js实现拼图小游戏的具体代码,供大家参考,具体内容如下 一.js拼图是什么? 用js做得小游戏 二.使用步骤 1.先创建div盒子 <style> div,body{ margin: 0; height: 0; } #box{ width: 800px; height: 800px; background-color: burlywood; position: relative; } #box div { width: 200px; height: 200px; backg
-
JS原生2048小游戏源码分享(全网最新)
最近在学习算法方面的知识,看到了一个由算法主导的小游戏,这里给大家分享下代码: 效果: 代码: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=360px,user-scalable=no" /> <title>2048小游戏</title> <style> body,h1,div,tabl