纯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（排行榜界面&界面管理）
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
随机推荐
- 日志切割工具logrotate解决Tomcat catalina.out日志过大的问题
一.介绍日志切割logrotate 对于Linux系统安全来说,日志文件是极其重要的工具.不知为何,我发现很多运维同学的服务器上都运行着一些诸如每天切分Nginx日志之类的CRON脚本,大家似乎遗忘了 ...
- [转]Redis配置文件详解
本文转自http://blog.csdn.net/neubuffer/article/details/17003909 redis是一款开源的.高性能的键-值存储(key-value store),和 ...
- SpringBoot(8) SpringBoot过滤器Filter
1.SpringBoot启动默认加载的Filter characterEncodingFilter hiddenHttpMethodFilter httpPutFormContentFilter re ...
- 区块链--Ubuntu上搭建以太坊私有链
1.搭建私链所需环境 操作系统:ubuntu16.04,开虚拟机的话要至少4G,否则会影响测试挖矿时的速度 软件: geth客户端 Mist和Ethereum Wallet:https://githu ...
- samba企业级实战应用详解-技术流ken
1.简介 Samba是一套使用SMB(Server Message Block)协议的应用程序, 通过支持这个协议, Samba允许Linux服务器与Windows系统之间进行通信,使跨平台的互访成为 ...
- zepto 事件分析1($.Event)
先看一下zepto事件的函数,在这里,zepto是把zepto对象作为一个立即执行函数的参数传进去的. (function($){ ... ... })(Zepto) 在zepto事件函数中,主要为$ ...
- C#异常处理。
一.什么是异常? 程序运行时发生的错误. 二.异常处理的一般代码模式. try{..可能发生异常的代码} catch{..对异常的处理} finally{...无论是否发生异常.是否捕获异常都会执行的 ...
- linux的 .bashrc文件是干什么的?
使用man bash命令查看到的联机帮助文件中的相关解释如下: .bashrc - The individual per-interactive-shell startup file. 这个文件主要保 ...
- JVM-Ubuntu18.04.1下编译OpenJDK8
近期开始学习JVM,看的是周老师的<深入理解Java虚拟机>,打算先自己编译个JDK来提升对JVM的兴趣.本文分三部分来描述编译OpenJDK的过程,分别是编译前准备工作.构建编译环境.进 ...
- 浏览器解析JavaScript原理
1.浏览器解析JavaScript原理特点: 1.跨平台 2.弱类型 javascript 定义的时候不需要定义数据类型,数据类型是根据变量值来确定的. var a = 10; 数字类型 ...