<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#wrap {
width: 400px;
margin: 30px auto;
font-size: 18px;
box-shadow: 5px 5px 20px rgb(231, 188, 130);
border-radius: 8px;
}
#header p:first-child{
float: left;
margin-left: 20px;
}
#header p:last-child{
float: right;
margin-right: 20px;
}
#main {
clear: both;
font-size: 150px;
text-align: center;
margin: 120px auto;
}
#wrap>p {
text-indent: 2em;
line-height: 35px;
margin: 5px;
}
.choose{
display: flex;
justify-content: space-around;
}
.choose p {
font-size: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<p>倒计时：<span id="time">10</span>s</p>
<p>得分：<span id="mark">0</span>分</p>
</div>
<div id="main"></div>
<p>根据上面字体的颜色从下面选择正确的字，选择正确游戏自动开始.</p>
<div id="choose" class="choose">
<p>蓝</p>
<p>黄</p>
<p>绿</p>
<p>粉</p>
<p>红</p>
</div>
</div>
<script>
var time = document.getElementById("time");
var mark = document.getElementById("mark");
var main = document.getElementById("main");
var smallFont = document.querySelector('#choose');
var choose = document.querySelectorAll('#choose p');
// console.log(choose);
// 文字的数组
var fontArr = ["红","橙","黄","绿","蓝"];
// 文字颜色的数组
var colorArr = ["red","orange","yellow","green","blue"];
// 声明分数，时间，倒计时，
var grade = 0;
var djs = 10;
var timer;
// 设置flag
var flag = true;
// 封装函数生成随机数
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
// 随机数组
function rnArr(){
var arr = [];
// 去重
// 数组长度小于5时
while(arr.length<5){
// 生成0-4的随机数作为数组下标
var n = random(0,4);
// 生成对应下标的数字在之前数组中不存在，push
if(arr.indexOf(n)==-1){
arr.push(n);
}
}
return arr;
}
rnArr();
// 创建页面文字
function createFont(){
// 随机文字数组，随机取出一个作为页面大字（随机的索引的value）
main.innerHTML = fontArr[random(0,4)];
// 随机颜色数组，取出一个颜色给大字
main.style.color = colorArr[random(0,4)];
// 创建小字
// 随机数组，作为小字和小字颜色
var smallIndexArr = rnArr(); //小字数组
var smallColorArr = rnArr(); //小字颜色数组
// 让小字随机变化
// 循环遍历小字数组
for(var j = 0; j < smallIndexArr.length; j++){
// 小字数组的每一项设为字体颜色
var fontIndex = smallIndexArr[j];
// 小字数组内容作为数组元素的下标，找原始数组内容
// 给页面小字的元素集合赋值
choose[j].innerText= fontArr[fontIndex];
var colorIndex = smallColorArr[j];
choose[j].style.color = colorArr[colorIndex];
}
}
createFont();
// 给小字循环绑定点击时间
for(var k = 0; k < choose.length; k++){
choose[k].onclick = function(){
// 获取当前大字的颜色
var bigColor = main.style.color;
// 获取当前的的文字
var word = this.innerText;
// 判断大字颜色下标和小字内容在文字数组里的下标
if(colorArr.indexOf(bigColor)==fontArr.indexOf(word)){
grade++;
mark.innerHTML = grade;
createFont();
if(flag){
// console.log(djs);
timer = setInterval(function(){
djs--;
time.innerHTML = djs;
// console.log(djs);
if(djs == -1){
// 清楚计时器
clearInterval(timer);
// 结束弹窗
alert('辣鸡' + grade +'分');
grade = 0;
djs = 10;
mark.innerHTML = grade;
time.innerText = djs;
creatFont();
flag = true;
}
},1000)
}
flag = false;
}
}
}
</script>
</body>
</html>
效果图
游戏逻辑： 随机产生页面文字和颜色，选择正确加分。