纯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（排行榜界面&界面管理）
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
随机推荐
- struts转发和重定向action
1.转发(服务器端跳转) <action name="rederTo"> <result type="chain">hello</ ...
- Java 并发编程-再谈 AbstractQueuedSynchronizer 3 ：基于 AbstractQueuedSynchronizer 的并发类实现
公平模式ReentrantLock实现原理 前面的文章研究了AbstractQueuedSynchronizer的独占锁和共享锁,有了前两篇文章的基础,就可以乘胜追击,看一下基于AbstractQue ...
- TCP/IP协议学习(一)
一.网络模型 OSI七层模型:自上至下依次是 应用层,表示层,会话层,传输层,网络层,数据链路层,物理层 应用层:具体的应用协议如HTTP.SMTP.FTP.TELNET.DNS等 表示层:针对数据格 ...
- UnicodeDecodeError: 'ascii' codec can't decode byte
这个问题遇到过很多次了,但是每次都没记住,用完就忘了,这次记录下. 通过关键词谷歌一下: 解决方案: # encoding=utf8 import sys reload(sys) sys.setdef ...
- SQL语句害死人
最近在弄Android的SQLite,觉得其语法是在难搞~ 在这里把一些正确规范的实例贴出来,供参考 ';
- 【转载】阿里云Windows服务器重置远程登录密码
在使用阿里云Windows系统的云服务器的时候,有时候忘记了远程连接密码,可在浏览器上登录阿里云官网,进入ECS云服务器管理后台重置远程连接的密码,因为此步操作对于服务器安全来说关系重大,所以有时候在 ...
- webpack-dev-server不是内部或外部命令
参考:https://segmentfault.com/q/1010000006939078 错误报告:webpack-dev-server不是内部或外部命令 错误原因: 当执行命令: npm run ...
- [android] 代码注册广播接收者&利用广播调用服务的方法
利用广播调用服务里面的方法,间接的方式调用服务内部的方法,与现实中差不多,请媒体曝光 主界面里面 在界面创建的时候开启一下服务普通的startService()方法 发送一条广播出去 获取Intent ...
- openjudge------ 日期的种类题目
描述TXT is a vegetable chicken,so 出题什么的完全不会啊! 干脆直接从网络上copy一题下来吧. 小明正在整理一批历史文献.这些历史文献中出现了很多日期.小明知道这些日期都 ...
- learnVUE-note
title: learnVUE-note date: 2018-02-27 15:57:37 tags: categories: 前端技术 --- 本文是自己在学习Vue中的 VUE事件处理 在事件处 ...