JavaScript 打地鼠游戏代码说明


Posted in Javascript onOctober 12, 2010

演示地址:http://demo.3water.com/js/mouse/index.html
打包下载地址 https://3water.com/jiaoben/32434.html
这个是我无聊的时候写的,先看看效果(UI做得比较丑):
JavaScript 打地鼠游戏代码说明 
说明:红色的点击得分100,蓝色的点击扣分100.

只是想用js来写个小游戏,顺便练练js的代码。
先看html部分:
html

<style> 
#panel{height:300px;width:300px;background:#ccc;margin:50px 0 0 200px;} 
#panel ul{list-style:none;display:block;float:left;margin:0;padding:0;} 
#panel li{display:block;float:left;width:100px;height:100px; 
overflow:hidden;position:relative;text-align:center;} 
#panel li span{display:block;position:relative;left:0;top:60px; 
width:100px;height:40px;background:url(img/hole.gif) 0 -60px;z-index:100;} 
</style> 
</head> 
<body> 
<span>说明:红色的点击得分100,蓝色的点击扣分100.</span> 
<div id="panel"> 
<ul> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
</ul> 
</div> 
<div>分数:<span id="score">0</span></div> 
<div>倒计时:<span id="time">60</span></div> 
<input type="button" value="开始" onclick="GameStart()" />

js部分:地鼠类
var Mouse = function(type){ 
//地鼠的具体dom元素,添加到页面上的 
this.mouse = null; 
//地鼠的编号 
this.num = -1; 
//地洞的编号(地鼠藏身在哪个洞) 
this.hole = -1; 
//初始化,type为地鼠类型,好与坏 
this.init(type); 
} 
Mouse.prototype = { 
//地鼠类型,好,坏,好的被杀,坏的被杀 
mousetype: { 
"good": "img/good.gif", 
"bad": "img/bad.gif", 
"goodkill":"img/goodkill.gif", 
"badkill":"img/badkill.gif" 
}, 
//初始化地鼠 
init : function(type){ 
type = type || 'good'; 
var _this = this; 
//创建地鼠的dom元素 
this.mouse = document.createElement("div"); 
//扩展属性--地鼠类型 
this.mouse.mousetype = type; 
//扩展类型--属否活着 
this.mouse.islive = true; 
this.mouse.style.cssText = 'width:75px;height:100px;background:url('+this.mousetype[type]+');left:0;top:20px;\ 
position:relative;margin:auto;cursor:pointer;'; 
//绑定地鼠被点击事件 
this.mouse.onclick = function(e){_this.beat(e);}; 
}, 
//地鼠被点中 
beat : function(e){ 
if(this.mouse.islive){ 
this.mouse.islive = false; 
this.onbeat(); 
this.mouse.style.background = "url("+this.mousetype[this.mouse.mousetype+"kill"]+")"; 
} 
}, 
//地鼠的动画 
animation : function(speed){ 
speed = speed == 'fast'?20:speed == 'normal'?30:50; 
var obj = this.mouse,ost = obj.style,oTop = parseInt(ost.top,10),cut=5,_this = this; 
//让地鼠从地洞冒出来 
var show = function(top){ 
top = top-cut; 
if(top >= -40){ 
ost.top = top + 'px'; 
setTimeout(function(){show(top);},speed); 
} 
else 
{ 
setTimeout(function(){hide(-40);},speed*10); 
} 
} 
//隐藏地鼠 
var hide = function(top){ 
top = top+cut; 
if(top <= oTop){ 
ost.top = top + 'px'; 
setTimeout(function(){hide(top);},speed); 
} 
else { 
_this.reset(); 
} 
} 
show(oTop); 
}, 
//重置地鼠,当地鼠滚回洞里的时候 
reset : function(){ 
this.mouse.islive =true; 
this.mouse.style.background = "url("+this.mousetype[this.mouse.mousetype]+")"; 
this.onend(); 
}, 
//扩展方法:地鼠被点中 
onbeat : function(){}, 
//扩展方法:地鼠动画结束后 
onend : function(){} 
}

接着是游戏控制类,控制游戏的逻辑:
//游戏控制类 
var Game = { 
//游戏时间,一分钟 
time : 61, 
//地鼠地图,总共有十只,其中两只是坏的 
mouseMap : { 
1:'good', 
2:'bad', 
3:'good', 
4:'good', 
5:'bad', 
6:'good', 
7:'bad', 
8:'good', 
9:'good', 
10:'good' 
}, 
//所有的地鼠dom元素 
allMouse : [], 
//目前分数 
nowScore : 0, 
//目前有哪几个地洞给占用 
hasHole : {}, 
//目前有哪几只地鼠是活动的 
hasMouse : {}, 
//页面的地洞集合 
lis : null, 
//初始化地鼠与地洞 
init : function(){ 
//获取页面的地洞集合 
this.lis = document.getElementById('panel').getElementsByTagName('li'); 
_this = this; 
//初始化10只地鼠 
for(var i=1;i <=10;i++){ 
var mouse = new Mouse(this.mouseMap[i]); 
//扩展地鼠被点中事件 
mouse.onbeat = function(){ 
//修改分数 
Game.changeScore(100 * (this.mouse.mousetype=='good'?1:-1)); 
} 
//扩展地鼠动画结束事件 
mouse.onend = function(){ 
//移除地洞中的地鼠 
var li = _this.lis[this.hole]; 
li.removeChild(li.mouse.mouse); 
li.mouse = null; 
//清除对应的地洞与地鼠 
_this.hasHole[this.hole] = null; 
_this.hasMouse[this.num] = null; 
} 
this.allMouse.push(mouse); 
} 
}, 
//修改游戏分数 
changeScore : function(score){ 
this.nowScore += score; 
document.getElementById('score').innerHTML = this.nowScore; 
}, 
//游戏开始 
start : function(){ 
if(this.time <= 0)return; 
var _this = this; 
//随机地洞编号 
var random = parseInt(Math.random()*9,10); 
while(this.hasHole[random]){ 
random = parseInt(Math.random()*9,10); 
} 
//随机地鼠编号 
var randomMouse = parseInt(Math.random()*10,10); 
while(this.hasMouse[randomMouse]){ 
randomMouse = parseInt(Math.random()*10,10); 
} 
//添加地鼠到地洞中 
this.allMouse[randomMouse].hole = random; 
this.allMouse[randomMouse].num = randomMouse; 
this.lis[random].appendChild(this.allMouse[randomMouse].mouse); 
this.lis[random].mouse = this.allMouse[randomMouse]; 
this.lis[random].mouse.animation('normal'); 
//记录地鼠与地洞编号 
this.hasHole[random] = 'true'; 
this.hasMouse[randomMouse] = 'true'; 
setTimeout(function(){_this.start();},250); 
}, 
//倒计时 
startTime : function(){ 
this.time -= 1; 
var _this = this; 
document.getElementById('time').innerHTML = this.time; 
if(this.time > 0){ 
setTimeout(function(){_this.startTime()},1000); 
} 
}, 
//重置游戏设置 
reset : function(){ 
this.time = 61; 
this.allMouse = []; 
this.nowScore = 0; 
this.hasHole = {}; 
this.hasMouse = {}; 
this.lis = null; 
this.changeScore(0); 
} 
} 
//游戏开始函数 
function GameStart(){ 
if(Game.time > 0 && Game.time != 61){ 
alert("游戏尚未结束,不能重新开始哦!"); 
return; 
} 
Game.reset(); 
Game.init(); 
Game.start(); 
Game.startTime(); 
}

这样就完成了。。。功能还是很简陋。。。只是想说明,js还是可以做小游戏的。。。欢迎拍砖!
Javascript 相关文章推荐
基于jQuery的360图片展示实现代码
Jun 14 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
理解Javascript_03_javascript全局观
Oct 11 #Javascript
理解Javascript_02_理解undefined和null
Oct 11 #Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 #Javascript
javascript getElementsByClassName实现代码
Oct 11 #Javascript
javascript Array.prototype.slice使用说明
Oct 11 #Javascript
javascript 伪数组实现方法
Oct 11 #Javascript
javascript forEach通用循环遍历方法
Oct 11 #Javascript
You might like
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
本地存储localStorage用法详解
2017/07/31 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python字典的遍历3种方法详解
2019/08/10 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
Python无损压缩图片的示例代码
2020/08/06 Python
保密承诺书范文
2014/03/27 职场文书
植树节口号
2014/06/21 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书