管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

JavaScript 打地鼠游戏代码说明

　　演示地址：http://demo.glzy8.com/js/mouse/index.html

　　打包下载地址 http://www.glzy8.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还是可以做小游戏的。。。欢迎拍砖！

教程首页 更多教程