JavaScript 打地鼠游戏代码说明
作者：
打地鼠游戏代码说明，喜欢用js开发游戏的朋友可以参考下。
演示地址：http://demo.jb51.net/js/mouse/index.html
打包下载地址 https://www.jb51.net/jiaoben/32434.html
这个是我无聊的时候写的，先看看效果(UI做得比较丑)：
说明：红色的点击得分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还是可以做小游戏的。。。欢迎拍砖！
打包下载地址 https://www.jb51.net/jiaoben/32434.html
这个是我无聊的时候写的，先看看效果(UI做得比较丑)：
说明：红色的点击得分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还是可以做小游戏的。。。欢迎拍砖！