选字游戏的设计

叙述选字游戏的玩法:

首先在一定的时间内我们要快速的将文字与相应的颜色进行匹配,在问题栏中的出现的红,黄,蓝,绿,紫分别配有不同的颜色.下面的选项中页含有对应的文字和颜色,颜色是为了进行误导,只有题目上面的颜色与下面答案的文字一样时,正确的个数+1;计数结束游戏结束,弹出一个弹框表示游戏结束.

游戏界面如下图所示:我们可以再最短的时间选择最多的正确答案就代表获胜,通过这个小游戏我们可以很好地对JS的函数用法做一个回顾和复习,这对于我们渐渐地掌握JS的相关编码规则有着很好地练习效果.

其中的HTML标签和CSS部分对于初学者来说问题不大,我们可以让上面的剩余时间模块左浮,让数量的模块右浮.中间的问题部分我们可以设置项应的margin值就可以将字体放到中间.下面的答案部分我们使用弹性布局能够很快的将下面的布局布出来.经过布局之后整个文本将会呈现下图的效果:

这样我们的游戏的整体布局就做出来了,下一步我们就要对JS部分作出处理了.下面我们将会比较详细的介绍一下相关的JS操作:

首先我们需要将JS部分做分块的操作分布进行实现

我将整个demo分为三个小部分

第一部分主要对倒计时进行实现,本部分在整个过程中属于比较简单的部分,我们只需要开启一个定时器,并且定义一个变量赋予相应的初始值让每隔一分钟变量的值减1;并且在倒计时到0的时候弹出一个弹框说明游戏结束.

第二部分我们要对问题部分做处理,具体就是定义一个数组去存储我们计划的文字和颜色.然后随机生成文字和颜色.

第三部分我们主要要对下面的答案部分做处理,首先每一次选择正确之后文字的次序和颜色都要进行相应的变化,并且各位上的的文字和颜色互斥,不能够出现两个相同的文字和颜色,所以我们定义了一个相互交换的函数,可以 让下面的答案部分的文字和颜色相互变化和交换.我将该算法称为魔术交换法.主要是对数组的下标进行相应的交换,然后调用数组就可以得到我们希望的结果.下面我会将 主要部分的JS代码贴出来供大家一玩.

首先是我们处理的计时部分的代码:

//一,时间的倒计时部分
		var downcount = 20;
		function dcount () {
			downcount--;
			time.innerHTML = "剩余时间:"+downcount+"s";
			if(downcount <= 0){
				clearInterval(timer1)
				alert("游戏结束!");
				
			}
			
		}
		var timer1 = setInterval(dcount,1000);

问题部分的相关代码:

二,问题部分
		var txts = ["红","黄","蓝","绿","紫"];
		var colors = ["red","yellow","blue","green","purple"];
		//定义随机数函数
		function randomnum (x,y) {
			return Math.floor(Math.random()*(y-x+1)+x);
		}
		var match = ""
		function questionrand (){
			question.innerHTML = txts[randomnum(0,4)];
			var yan = colors[randomnum(0,4)];
			question.style.color = yan;
			switch (yan){
				case "red":
				match = "红"
					break;
					case "yellow":
				match = "黄"
					break;
					case "blue":
				match = "蓝"
					break;
					case "green":
				match = "绿"
					break;
					case "purple":
				match = "紫"
					break;
				default:
					break;
			}
		}
		questionrand();

魔术算法排序代码:

//(1)魔术算法
		function grerage (arr) {
			for (var i = 0; i < arr.length; i++) {
			var num = randomnum(0,4)
			if(i!=num){
				var temp = arr[i];
				arr[i]= arr[num];
				arr[num] = temp;
			}
			}
			
		}

答案部分的随机排序和颜色的随机变化的相关代码:

function gaswer () {
			grerage(txts);
			grerage(colors);
			for (var i = 0; i < lis.length; i++) {
				lis[i].innerHTML = txts[i];
				lis[i].style.color = colors[i];
			}
		}
		gaswer();

最后我们需要进行判断题添加点击事件,当选择正确的时候数量加1,相关判断的代码如下:

function pan () {
			var gcount = 0;
		for (var i = 0; i < lis.length; i++) {
		lis[i].onclick = function (){
				if(this.innerHTML == match){
				gcount++;
				score.innerHTML ="数量:"+gcount;
				questionrand();
				gaswer();
			}
		}
		}
		}
		pan();

需要注意的是我们判断的文字和相应的颜色之间形成匹配,所以我们要进行相应的转换.

今天的选字游戏就介绍到这里,如果有什么问题,欢迎留言提问.