JavaScript 打地鼠游戏代码说明
程序员文章站
2022-05-16 11:41:50
演示地址：打包下载地址 这个是我无聊的时候写的，先看看效果(ui做得比较丑)： 说明：红色的点击得分100，蓝色的点击扣分100. 只是想用js来写个小游戏，顺...
演示地址：打包下载地址 这个是我无聊的时候写的，先看看效果(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还是可以做小游戏的。。。欢迎拍砖！
说明：红色的点击得分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还是可以做小游戏的。。。欢迎拍砖！
上一篇： 纯CSS实现扑克牌效果