打地鼠游戏(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);
}

  

  

posted @   落日知暮  阅读(197)  评论(0编辑  收藏  举报
编辑推荐:
· 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语句:使用策略模式优化代码结构
作者:boyzi007 出处:http://www.cnblogs.com/boyzi/ QQ:470797533 QQ交流群:364307742 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
点击右上角即可分享
微信分享提示