打地鼠游戏之动画效果

Posted boyzi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了打地鼠游戏之动画效果相关的知识,希望对你有一定的参考价值。

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

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

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

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

//总共有十只,其中三只是无效的
	mouseMap : {
		1:‘good‘,
		2:‘bad‘,
		3:‘good‘,
		4:‘good‘,
		5:‘bad‘,
		6:‘good‘,
		7:‘bad‘,
		8:‘good‘,
		9:‘good‘,
		10:‘good‘
	},

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

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

 

以上是关于打地鼠游戏之动画效果的主要内容,如果未能解决你的问题,请参考以下文章

纯JS编写打地鼠游戏

打地鼠游戏之定义地鼠函数及函数原型 prototype

#夏日挑战赛# HarmonyOS - 基于ArkUI(JS)实现打地鼠游戏

基于Java语言的打地鼠的小游戏源代码是啥?

MFC制作打地鼠小游戏

ios打地鼠游戏源代码