JS 制作简单小游戏--选字游戏
选字游戏是刚接触JS学习经常被拿来练手的项目,比较考验初学者对函数的认识和运用
选字游戏的玩法:
在一定的时间内我们要快速的将答案栏的文字与问题区的颜色进行匹配,在问题栏中的出现的红,黄,蓝,绿,紫分别配有不同的颜色.下面的选项中页含有对应的文字和颜色,颜色是为了进行误导,只有题目上面的颜色与下面答案的文字一样时,正确的个数+1;计时结束游戏结束,弹出一个弹框表示游戏结束.
html部分
剩余时间:20
数量:0
字
紫
红
黄
蓝
绿
css部分
*{
margin: 0;
padding: 0;
}
.wrap{
width: 360px;
height: 540px;
margin: 50px auto 0;
border: 2px solid paleturquoise;
}
.top{
font-size: 30px;
word-spacing: 90px;
}
#quest{
text-align: center;
font-size: 260px;
}
.answer{
margin: 50px auto 0;
text-align: center;
font-size: 40px;
}
重点 JS部分
var time = document.getElementById("time");
var count = document.getElementById("count");
var quest = document.getElementById("quest");
var answer = document.getElementsByClassName("answer")[0];
var spans = answer.getElementsByTagName("span");
//剩余时间
var times = 20;
var timerTime = setInterval(function(){
times--;
time.innerHTML = '剩余时间:' + times;
if (times <= 0) {
clearInterval(timerTime);
alert("Game Over");
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = null;
}
}
},1000);
//显示问题的随机数组
var texts = ["红", "黄", "蓝", "绿", "紫"];
//字体随机的颜色
var colors = ["red","yellow", "blue", "green", "purple"];
//随机函数
function randNum (x, y) {
return Math.floor(Math.random() * (y - x + 1) + x);
}
var answer = '';//定义变量,存储文字,让 color 和 文字对应
//问题部分
function randQuest (){
quest.innerHTML = texts[randNum(0, 4)];
var color = colors[randNum(0, 4)];
quest.style.color = color;
switch (color){
case "red":
answer = "红";
break;
case "blue":
answer = "蓝";
break;
case "green":
answer = "绿";
break;
case "purple":
answer = "紫";
break;
case "yellow":
answer = "黄";
break;
default:
break;
}
}
randQuest();
//洗牌算法 (交换数组下标上的值)
function randArry(arr){
for (var i = 0; i < arr.length; i++) {
var n = randNum(0, arr.length - 1);
if (n != i) {
var temp = arr[i];
arr[i] = arr[n];
arr[n] = temp;
}
}
}
// 答案部分
function randAns () {
randArry(texts);
randArry(colors);
for (var i = 0; i < spans.length; i++) {
spans[i].innerHTML = texts[i];
spans[i].style.color = colors[i];
}
}
randAns();
//点击的答案和问题想对应
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = clickAction;
}
var coun = 0;//定义变量存储成绩
function clickAction(){
if (this.innerHTML == answer) {
coun++;
count.innerHTML = "数量:" + coun;
randQuest();
randAns();
}
}