• 打地鼠游戏(3)之游戏属性


    在第一篇中,我们已经实现了单击开始后游戏的倒计时,那么下面,我们需要继续在Game这个简直对对象中进行扩展属性和方法,整个有效中拥有哪些属性呢?

    (1)游戏分数

    (2)地鼠(多个扩展属性)

    (3)地洞(多个扩展属性)

    (4)动画

    首先我们需要在Game中添加几组初始键值对:

    //所有的地鼠dom元素
    	allMouse : [],
    	//目前分数
    	nowScore : 0,
    	//目前有哪几个地洞给占用
    	hasHole : {},
    	//目前有哪几只地鼠是活动的
    	hasMouse : {},
    	//页面的地洞集合
    	lis : null,
    	//初始化地鼠与地洞
    

    以及游戏中十个地鼠的编号,我们可以定义其中有三个编号对应的地鼠是无效的:

    //地鼠地图,总共有十只,其中两只是无效的(扣分)
    	mouseMap : {
    		1:'num1',
    		2:'num2',
    		3:'num3',
    		4:'num4',
    		5:'num5',
    		6:'num1',
    		7:'num4',
    		8:'num5',
    		9:'num1',
    		10:'num4'
    	},
    

    下面我们从开始游戏的方法开始创建,在创建之前,我们先思考,地鼠是怎么出现的,出现的时机和顺序是怎样的?

    (1)地洞的地鼠是随机的

    (2)出现的地鼠是随机的

    (3)每次出现地洞编号和地鼠编号都不参与下一次的随机输出

    	//游戏开始
    	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中,我们同样需要一个方法来初始化地鼠和巢穴的属性及扩展:

    //初始化地鼠与地洞
    	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;
    	},
    

    最后我们同样需要一个重置有效,游戏归零的操作

    	//重置游戏设置
    	reset : function(){
    		this.time = 61;
    		this.allMouse = [];
    		this.nowScore = 0;
    		this.hasHole = {};
    		this.hasMouse = {};
    		this.lis = null;
    		
    		this.changeScore(0);
    	}
    

      

      

  • 相关阅读:
    数据仓库010
    R语言- 实验报告
    数据仓库006
    数据仓库009
    多台Linux 7.x服务器具有相同的UUID网络链接参数,肿么办?
    数据仓库005
    数据仓库004
    我的编程竞赛生涯
    我的建模竞赛生涯
    再见了,亲爱的博客园
  • 原文地址:https://www.cnblogs.com/boyzi/p/9968257.html
Copyright © 2020-2023  润新知