叙述选字游戏的玩法:
首先在一定的时间内我们要快速的将文字与相应的颜色进行匹配,在问题栏中的出现的红,黄,蓝,绿,紫分别配有不同的颜色.下面的选项中页含有对应的文字和颜色,颜色是为了进行误导,只有题目上面的颜色与下面答案的文字一样时,正确的个数+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();
需要注意的是我们判断的文字和相应的颜色之间形成匹配,所以我们要进行相应的转换.
今天的选字游戏就介绍到这里,如果有什么问题,欢迎留言提问.