前言
又是一个用JavaScript实现的小游戏,游戏规则为:根据上面的字的颜色从下面选择正确的字,选择正确自动开始
正文
主要思路:
如何改变字体和颜色
:将颜色和字块,放进数组,通过将数组进行重新排序,这样可以将颜色随机赋给随机的一个字体。
如何进行判断:通过获取提示信息的颜色值和当前点击的对象的innerHTML进行比较,如果符合条件,则进入下一轮,例如:
if(char_inform == '红' && remind.style.color == 'red') {
random();
count++;
}
分数设置:当第一次点击正确时,游戏开始,并且开始计时,每点击正确一次,分数加1;在这儿,通过两层判断,用来防止计时器重复启动。例如:
if(count == 1) {
a++;
if(a == 1) {
cut_down();//计时器函数
}
}
}
这样,当下次点击正确时,a=2;满足条件,计时器函数无法再次调用。
重置游戏:当计时结束时,即time=0时,游戏结束。点击重置按钮,可以重新开始游戏,这儿用到history.go('0')用来刷新界面,以此来达到重置游戏的效果
效果图:
源码如下:
倒计时:
总分:
根据上面的字的颜色从下面选择正确的字,选择正确自动开始
<script type="text/javascript">
//定义颜色和字符数组
var color = ['red', 'blue', 'pink', 'purple', 'orange'];
var character = ['红', '蓝', '橙', '粉', '紫'];
var color1 = ['red', 'blue', 'pink', 'purple', 'orange'];
var character1 = ['红', '蓝', '橙', '粉', '紫'];
//创建信息框
var remind = document.getElementById('remind');
var inform_ = [];
var count = 0;
var time = 20;
var a = 0;
for(i = 0; i < character.length; i++) {
var information = document.getElementById('information');
var inform = document.createElement('div');
inform.style.border = '1px solid yellowgreen';
inform.style.width = '18%';
inform.style.margin = '2px';
inform.style.marginTop = '10px';
inform.style.lineHeight = '60px';
inform.style.height = '60px';
inform.style.textAlign = 'center';
inform.style.fontSize = '2rem';
inform.style.display = 'inline-block';
inform.onclick = click;
inform_.push(inform);
information.appendChild(inform);
}
//功能实现
function random() {
color = color.sort(function() {
return Math.random() - 0.5;
});
color1 = color1.sort(function() {
return Math.random() - 0.5;
});
character = character.sort(function() {
return Math.random() - 0.5;
});
character1 = character1.sort(function() {
return Math.random() - 0.5;
});
remind.style.color = color[2];
remind.innerHTML = character[4];
for(i = 0; i < color.length; i++) {
inform_[i].innerHTML = character1[i];
inform_[i].style.color = color1[i];
}
}
random();
var count_ = document.getElementById('count_');
coun = count_.innerHTML;
function click() {
var char_inform = this.innerHTML;
if(time != 0) {
if(char_inform == '红' && remind.style.color == 'red') {
random();
count++;
} else if(char_inform == '蓝' && remind.style.color == 'blue') {
random();
count++;
} else if(char_inform == '粉' && remind.style.color == 'pink') {
random();
count++;
} else if(char_inform == '紫' && remind.style.color == 'purple') {
random();
count++;
} else if(char_inform == '橙' && remind.style.color == 'orange') {
random();
count++;
}
count_.innerHTML = coun + count + '分';
if(count == 1) {
a++;
if(a == 1) {
cut_down();
}
}
}
console.log(count)
}
var timer = null;
var title = document.getElementById('title');
titl = title.innerHTML;
title.innerHTML = titl + time + 's';
function cut_down() {
if(time >= 0) {
timer = setInterval(function() {
time--;
title.innerHTML = titl + time + 's';
console.log(time);
if(time == 0) {
alert('游戏结束');
clearInterval(timer)
// history.go('0');
}
}, 1000)
}
}
//重置游戏
var button0=document.getElementById("button0")
button0.οnclick=function(){
history.go('0');
}
</script>