JavaScript无聊打地鼠

这个是我无聊的时候写的，先看看效果(UI做得比较丑)：

try{document.execCommand("BackgroundImageCache",false,true);}catch(e){}

var Mouse = function(type){
this.mouse = null;
this.num = -1;
this.hole = -1;
this.init(type);
}
Mouse.prototype = {
mousetype: {
"good": "http://images.cnblogs.com/cnblogs_com/floyd/264351/o_good.gif",
"bad": "http://images.cnblogs.com/cnblogs_com/floyd/264351/o_bad.gif",
"goodkill":"http://images.cnblogs.com/cnblogs_com/floyd/264351/o_goodkill.gif",
"badkill":"http://images.cnblogs.com/cnblogs_com/floyd/264351/o_badkill.gif"
},
init : function(type){
type = type || 'good';
var _this = this;

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'
},
allMouse : [],
nowScore : 0,
hasHole : {},
hasMouse : {},
lis : null,
init : function(){

this.lis = document.getElementById('panel').getElementsByTagName('li');
_this = this;

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(){

Game.reset();
Game.init();
Game.start();
Game.startTime();
}

#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(http://images.cnblogs.com/cnblogs_com/floyd/264351/o_hole.gif) 0 -60px;z-index:100;}
说明：红色的点击得分100，蓝色的点击扣分100.

分数：0 倒计时：60

只是想用js来写个小游戏，顺便练练js的代码。

先看html部分：

地鼠类//游戏控制类
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还是可以做小游戏的。。。欢迎拍砖！

响应要求，提供源码：http://files.cnblogs.com/floyd/%e6%89%93%e5%9c%b0%e9%bc%a0.zip