JavaScript 打地鼠游戏代码说明

演示地址：http://demo.jb51.net/js/mouse/index.html打包下载地址 http://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还是可以做小游戏的。。。欢迎拍砖！

赞 (0)

相关推荐

  • js实现打地鼠小游戏

    话不多说,请看代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>打地鼠</title> <style type="text/css"> #content { width:960px; margin:0 auto; text-align:center; margin-top:40px; } #form1 {

  • 基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编

  • JavaScript实现打地鼠小游戏

    JavaScript实现打地鼠小游戏

    在写这个打地鼠的游戏开始首先要清楚每一步该做什么 然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能 一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu

  • JavaScript 打地鼠游戏代码说明

    演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑):  说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码 代码如下: <style> #panel{height:300px;width:300px;background:#cc

  • JavaScript实现打地鼠游戏

    本文实例为大家分享了JavaScript实现打地鼠游戏的具体代码,供大家参考,具体内容如下 游戏说明: 点击"开始游戏"按钮,在图中随机产生老鼠,老鼠消失前单击老鼠进行击打,打中一次即可获得100的积分,没有打中老鼠,扣取100积分 css模块 <style> #div0{ text-align: center; width: 1360px; height: 600px; margin: 60px auto; background-image: url("imag

  • JavaScript实现简单打地鼠游戏

    JavaScript实现简单打地鼠游戏

    本文实例为大家分享了JavaScript实现打地鼠游戏的具体代码,供大家参考,具体内容如下 效果如下: html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/index.js"></script> <link rel="s

  • javascript 打字游戏实现代码

    javascript 打字游戏实现代码

    效果如图所示:下面是核心代码 复制代码 代码如下: GAME = { //随机产生字母 randLetter: function() { var arrLetter = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K&qu

  • 通过javascript实现扫雷游戏代码实例

    这篇文章主要介绍了通过javascript实现扫雷游戏代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 html代码: <div id="mine"> <div class="level"> <button type="button">初级</button> <button type="button">中级&l

  • JavaScript 俄罗斯方块游戏实现方法与代码解释

    本文实例讲述了JavaScript 俄罗斯方块游戏.分享给大家供大家参考,具体如下: 俄罗斯方块代码说明 /** 名称:Javascript 俄罗斯方块! 作者:Gloot 邮箱:glootz@gmail.com QQ:345268267 网站:http://www.cnblogs.com/editor/ */ OLSFK = {}; 本俄罗斯方块代码采用 JavaScript 脚本代码写成,简单易懂: 全代码采用静态类及静态变量成员组成: 全脚本通过实现代码全局配置 OLSFK.Options

  • 基于vue实现简易打地鼠游戏

    本文实例为大家分享了vue实现简易打地鼠游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>打地鼠简易版</title> <script src="js/vue.js"></script> <style type="text/css"&g

  • 超实用的JavaScript表单代码段

    整理了下比较实用的Javascript表单代码段,分享给大家供大家参考,具体内容如下 1 多个window.onload方法 由于onload方法时在页面加载完成后,自动调用的.因此被广泛的使用,但是弊端是只能实用onload执行一个方法.下面代码段,可以保证多个方法在Onload时执行: function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ wind

  • android实现打地鼠游戏

    今天上课老师用Java实现了打地鼠游戏的界面和具体逻辑,那么我也尝试使用Android语言实现其功能. 首先是打地鼠游戏的玩法 1.每隔1秒或者0.5秒地鼠会出现在九宫格中的任一位置 2.点击界面,如果地鼠出现的位置与点击位置相同,则认为打中地鼠.否则游戏继续. 3.打中地鼠后,游戏立即停止. 先上两张效果图 布局实现 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to

  • C语言实现贪吃蛇游戏代码

    本文实例为大家分享了C语言实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 //------------------------------------------problm区------------------------------ //①思考typedef 定义的变量如何利用fwrite进行存储 //②典型可利用sleep()语句类实现控制移动速度 //③BOOL PlaySoundW(LPCWSTR, HMODULE, DWORD)": 无法将参数 1 从"const ch

随机推荐