打地鼠游戏(3)之游戏属性
在第一篇中,我们已经实现了单击开始后游戏的倒计时,那么下面,我们需要继续在Game这个简直对对象中进行扩展属性和方法,整个有效中拥有哪些属性呢?
(1)游戏分数
(2)地鼠(多个扩展属性)
(3)地洞(多个扩展属性)
(4)动画
首先我们需要在Game中添加几组初始键值对:
1 2 3 4 5 6 7 8 9 10 11 | //所有的地鼠dom元素 allMouse : [], //目前分数 nowScore : 0, //目前有哪几个地洞给占用 hasHole : {}, //目前有哪几只地鼠是活动的 hasMouse : {}, //页面的地洞集合 lis : null , //初始化地鼠与地洞 |
以及游戏中十个地鼠的编号,我们可以定义其中有三个编号对应的地鼠是无效的:
1 2 3 4 5 6 7 8 9 10 11 12 13 | //地鼠地图,总共有十只,其中两只是无效的(扣分) mouseMap : { 1: 'num1' , 2: 'num2' , 3: 'num3' , 4: 'num4' , 5: 'num5' , 6: 'num1' , 7: 'num4' , 8: 'num5' , 9: 'num1' , 10: 'num4' }, |
下面我们从开始游戏的方法开始创建,在创建之前,我们先思考,地鼠是怎么出现的,出现的时机和顺序是怎样的?
(1)地洞的地鼠是随机的
(2)出现的地鼠是随机的
(3)每次出现地洞编号和地鼠编号都不参与下一次的随机输出
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | //游戏开始 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); }, |
在Game中,我们同样需要一个方法来初始化地鼠和巢穴的属性及扩展:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | //初始化地鼠与地洞 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); } }, |
上面的方法中,我们用到了一个分数统计的方法,每击中有效或无效地鼠,我们需要在原有的分数上做增减分数,所以我们需要一个方法:
1 2 3 4 5 | //修改游戏分数 changeScore : function (score){ this .nowScore += score; document.getElementById( 'score' ).innerHTML = this .nowScore; }, |
最后我们同样需要一个重置有效,游戏归零的操作
1 2 3 4 5 6 7 8 9 10 11 | //重置游戏设置 reset : function (){ this .time = 61; this .allMouse = []; this .nowScore = 0; this .hasHole = {}; this .hasMouse = {}; this .lis = null ; this .changeScore(0); } |
分类:
JavaScript
标签:
javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构