纯JS编写打地鼠游戏
这个游戏是本人前不久刚入门编写的游戏，感觉里面代码很LOW但是对于新手来说很一般般吧~
没有上传音乐文件了
运行效果：
上代码（HTML+JS）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
<script type="text/javascript">
function $$(idName){
return document.getElementById(idName);
}
</script>
</head>
<body> <div id="" class="top">
<table>
<tr><td>游戏时间</td><td><input type="text" id="inp0" value=""/> 分钟</td></tr> <tr><td>倒计时间</td><td><span id="datetime"></span></td></tr> <tr><td>地鼠出现间隔</td><td><input type="text" id="inp1"/> 秒钟</td></tr> <tr><td>停留时间</td><td><input type="text" id="inp2"/> 秒钟</td></tr> <tr><td>得分情况</td><td><span id="grade">0</span> </td></tr> <tr><td><input type="button" value="开始游戏" id="st" /></td>
<td><input type="button" value="退出游戏" id="over" disabled=""/></td></tr> </table> </div> <div id="heads" class="header">
<span class="mouse1 dd">
<a id="mouses1" onclick="addGrade()" href="#"></a>
</span>
<span class="mouse2 dd">
<a id="mouses2" onclick="addGrade()" href="#"></a>
</span>
<span class="mouse3 dd">
<a id="mouses3" onclick="addGrade()" href="#"></a>
</span>
<span class="mouse4 dd">
<a id="mouses4" onclick="addGrade()" href="#"></a>
</span>
<span class="mouse5 dd">
<a id="mouses5" onclick="addGrade()" href="#"></a>
</span>
<span class="mouse6 dd">
<a id="mouses6" onclick="addGrade()" href="#"></a>
</span>
<span class="mouse7 dd">
<a id="mouses7" onclick="addGrade()" href="#"></a>
</span>
<span class="mouse8 dd">
<a id="mouses8" onclick="addGrade()" href="#"></a>
</span>
<span id="cuizi" class="c"> </span>
</div>
<div class="rule">
<h2>游戏说明</h2>点击游戏开始按钮，在下图中随机产生老鼠,老鼠消失前单机老鼠进行打击，
打中一次即可获得10积分，失败一次不扣分，赶快行动吧！
</div>
<!--背景音乐-->
<audio id="audio1" controls="controls" loop>
<source src="mp3/music2.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
<audio id="audio2"><!--敲击的声音-->
<source src="mp3/music1.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio> <script type="text/javascript">
var audioa= $$('audio1');
window.onload=function(){
audioa.play();
}
</script> <script type="text/javascript">
//锤子在div里面跟踪鼠标移动
$$("heads").onmousemove=function(e){
e = e||event;//获事件对象
var xx=e.x;
var yy=e.y;
$$("cuizi").style.left = xx+"px";
$$("cuizi").style.top = yy+"px";
}
var timespace=0;//间隔
var timestop=0;//停留时间
var timesdaojishi=1000; var jg;
var daoji;
var stops;
//点击开始按钮
$$('st').onclick=function(){
//禁用开始键 和开启退出游戏
$$('st').disabled='disabled';
$$('over').disabled=''; if(timesdaojishi!=0){
//倒计时
var mit=$$('inp0').value;
mit*=60;
daoji= setInterval(function(){
if(mit>=0){
$$('datetime').innerHTML='倒计时：'+mit+'秒';
}else{
end();
}
mit--;
},timesdaojishi);
} //时间间隔
timespace = document.getElementById('inp1').value*1000;
timestop = document.getElementById('inp2').value*1000;
//不等于0就继续
if(timespace!=0)
jg = setInterval(mouse,timespace);
}
//点击退出游戏按钮
$$('over').onclick=function(){
end();
};
//点击地鼠加分
function addGrade(){
var g=$$('grade').innerHTML;
$$('grade').innerHTML=parseInt(g)+10;
//播放敲击的声音
$$('audio2').play(); //当前的老鼠隐身
event.target.style.display='none';
}
//============================================以下是帮助函数
//地鼠出现时间
function mouse(){
//不等于0就继续
if(timestop!=0){
var dishuNum=['mouses1','mouses2','mouses3','mouses4','mouses5','mouses6','mouses7','mouses8']; var sj = parseInt(Math.random()*10%dishuNum.length);
// alert(sj);
$$(dishuNum[sj]).style.display='block';
// alert(timestop);
function datime() {
$$(dishuNum[sj]).style.display='none'; }
stops=setTimeout(datime, timestop);
} }
//结束
function end(){
//禁用退出游戏键 和开启开始游戏
$$('over').disabled='disabled';
$$('st').disabled='';
$$('inp0').value=0;
$$('grade').innerHTML=0;
window.clearInterval(jg);
window.clearInterval(daoji);
window.clearTimeout(stops);
}
</script>
</body>
</html>
css代码：
.top{
width: 700px;
margin: 0 auto;
}
/**{
border: 1px solid lightgoldenrodyellow;
}*/
.header{
width: 700px;
height: 400px;
margin: 0 auto;
border: 1px dotted lightsalmon;
background-image: url(../img/地鼠场地.gif);
background-color: lightgreen;
}
.dd{
/*display: none;*/
width: 54px;
height: 54px;
/*background-image: url(../img/地鼠.gif);*/
/*background-position: -159px -130px;*/
display: block;
/*border: 1px solid red;*/
}
.dd a{
display: none;
width: 53px;
height: 53px;
background-image: url(../img/地鼠.gif);
background-position: -159px -130px;
/*border: 1px solid lightgoldenrodyellow;*/
}
.mouse1{
position: relative;
z-index: 3px;
left: 315px;
top: 90px;
}
.mouse2{
position: relative;
z-index: 3px;
left: 210px;
top: 73px;
}
.mouse3{
position: relative;
z-index: 4px;
left: 540px;
top: 25px;
}
.mouse4{
position: relative;
z-index: 1px;
left: 53px;
top: 54px;
}
.mouse5{
position: relative;
z-index: 1px;
left: 285px;
top: -10px;
}
.mouse6{
position: relative;
z-index: 1px;
left: 500px;
top: -76px;
}
.mouse7{
position: relative;
z-index: 1px;
left: 173px;
top: -55px;
}
.mouse8{
position: relative;
z-index: 1px;
left: 376px;
top: -80px;
}
.c{
position: absolute;
z-index: 1000px;
top:190px;
display: block;
width: 20px;
height: 20px;
background-image: url(../img/锤子.gif);
background-size: 25px;
background-repeat: no-repeat;
background-position:-2px -3px;
border-radius:10px ;
}
.rule{
position: absolute;
width: 200px;
z-index: 10px;
right: 5%;
top: 0px;
border: 1px dotted lightcoral;
text-align: center;
border-radius: 10px;
background-color: lightgoldenrodyellow;
}
需要的图片：
纯JS编写打地鼠游戏的更多相关文章
- [前端 3]纯Js制作俄罗斯方块游戏
导读:在别人文章里看到了,然后写了一遍.结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法.忘了在 哪一篇上面看的了,就贴不出来链接地址.原谅.呃,真没自己的东西,权当练打字了吧.其实, ...
- js中打地鼠游戏
<!DOCTYPE html><html lang=""><head> <mata charset = "utf-8" ...
- 纯js编写验证信息提示正则匹配数字，字母，空值
1.显示效果 2,html结构 <div class="border_bg"> <div id="upcCode" style="p ...
- baguetteBox.js响应式画廊插件(纯JS)
baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...
- 纯JS单页面赛车游戏代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...
- 纯JS实现俄罗斯方块，打造属于你的游戏帝国
纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...
- 无聊的人用JS实现了一个简单的打地鼠游戏
直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...
- 为Node.js编写组件的几种方式
本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介 首先介绍 ...
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10（排行榜界面&界面管理）
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
随机推荐
- [NewLife.XCode]数据模型文件
NewLife.XCode是一个有10多年历史的开源数据中间件,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和运行日志来进行深入分析,蕴含 ...
- MyEclipse忽略js报错
MyEclipse对官网下载的js报错,解决办法如下: 1. 对js文件右键选择 MyEclipse --> Exclude From Validation 2. 然后继续右键执行MyEclip ...
- 3.Magicodes.NET框架之路——预览（一）
3.Magicodes.NET框架之路——预览(一) 前言 一眨眼,已经过去两个多月了 ,哥已经火力全开了(业余时间和精力,甚至为此放弃了各种私活),所以大家不要抱怨慢哈.编程犹如逆水行舟,不进则退. ...
- Python面向对象基础：设置对象属性
用类存储数据 类实际上就是一个数据结构,对于python而言,它是一个类似于字典的结构.当根据类创建了对象之后,这个对象就有了一个数据结构,包含一些赋值了的属性.在这一点上,它和其它语言的struct ...
- mac os下vscode快捷键
全局 Command + Shift + P / F1 显示命令面板 Command + P 快速打开 Command + Shift + N 打开新窗口 Command + W 关闭窗口 基本 Co ...
- Hyperledger Fabric链码之二
上篇文章中我们介绍了链码的概念,本文中我们将介绍Fabric下链码的编写和测试.我们会通过一个简单例子的方式来阐述链码API的使用. 链码API 每一个链码程序都必须实现一个接口Chainco ...
- Postgresql ODBC驱动，用sqlserver添加dblink跨库访问postgresql数据库
在同样是SQLserver数据库跨库访问时,只需要以下方法 declare @rowcount int set @rowcount =(select COUNT(*) from sys.servers ...
- C#基础知识总结(七)
摘要 C#最简单的两个算法:输入数字打印出菱形星星.冒泡排序1.输入数字打印出菱形星星 static void Main(string[] args) { //输入一个数,表示菱形星号,数字必须是一个 ...
- python之isinstance内建函数
语句: isinstance(object,type) 作用: 来判断一个对象是否是一个已知的类型. 解释: 其第一个参数(object)为对象,第二个参数(type)为类型名(int...)或类型名 ...
- python之strip()小记
描述 Python strip() 方法用于移除字符串头尾指定的字符(默认为空格或换行符)或字符序列. 注意:该方法只能删除开头或是结尾的字符,不能删除中间部分的字符. 语法 strip()方法语法: ...