<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
display: flex;
justify-content: center;
align-items: flex-start
}
.warp {
width: 500px;
background-color: rgb(237, 237, 237);
border-radius: 10px;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 20px;
}
.head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
}
.cent {
display: flex;
flex-direction: column;
align-items: center;
}
.cent h1 {
font-size: 200px;
}
.cent p {
margin: 0;
font-size: 20px;
}
.foot {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 50px;
}
.foot span {
cursor: pointer;
}
.list {
border: 1px solid black;
width: 200px;
height: 500px;
text-align: center;
}
.list span {
display: block;
font-size: 30px;
}
</style>
<body>
<div class="warp">
<div class="head">
<span>剩余时间:<i>10</i></span>
<span>完成:0</span>
</div>
<div class="cent">
<h1>红</h1>
<p>根据上面的字的颜色从下面选择正确的字,选择正确自动开始</p>
</div>
<div class="foot">
<span>绿</span>
<span>黑</span>
<span>红</span>
<span>黄</span>
<span>蓝</span>
</div>
</div>
<div class="list">
<span>排行榜</span>
<div class="listranking">
</div>
</div>
<button class="btn">刷新</button>
</body>
<script>
/*********************************************
_ooOoo_
o8888888o
88" . "88
(| -_- |)
O\ = /O
____/`---'\____
.' \\| |// `.
/ \\||| : |||// \
/ _||||| -:- |||||- \
| | \\\ - /// | |
| \_| ''\---/'' | |
\ .-\__ `-` ___/-. /
___`. .' /--.--\ `. . __
."" '< `.___\_<|>_/___.' >'"".
| | : `- \`.;`\ _ /`;.`/ - ` : | |
\ \ `-. \_ __\ /__ _/ .-` / /
======`-.____`-.___\_____/___.-`____.-'======
`=---='
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
佛祖保佑 永无BUG
***************************************************/
function total() {
// <div class="warp">
// <div class="head">
// <span>剩余时间:10</span>
// <span>完成:0</span>
// </div>
// <div class="cent">
// <h1>红</h1>
// <p>根据上面的字的颜色从下面选择正确的字,选择正确自动开始</p>
// </div>
// <div class="foot">
// <span>绿</span>
// <span>黑</span>
// <span>红</span>
// <span>黄</span>
// <span>蓝</span>
// </div>
// </div>
var textArr = ["绿", "黑", "红", "黄", "蓝"];
var colorArr = ["green", "black", "red", "yellow", "blue"];
//获取4字数组
var fourTexts = document.querySelectorAll(".foot span");
var oCent = document.querySelector(".cent h1")
function bodyText() {
//随机主页文字
for (var i = 0; i < textArr.length; i++) {
//遍历文字数组 变量保存随机数
var textRand = rand(0, textArr.length - 1);
// 主页文字随机被赋予数组下标随机文字
oCent.innerHTML = textArr[textRand];
}
//随机主页文字颜色
for (var i = 0; i < colorArr.length; i++) {
//遍历颜色数组 变量保存随机数
var colorRand = rand(0, colorArr.length - 1)
//主页文字颜色随机被赋予数组下标随机文字
oCent.style.color = colorArr[colorRand];
}
//随机下方四字文字
//因4字不能重复 定义空数组获取不重复4字\
var fourTextArr = [];
//遍历4字数组
for (var i = 0; i < fourTexts.length; i++) {
//产生4字随机下标
var fourTextrand = rand(0, textArr.length - 1);
//判断4字有无在新数组重复
if (fourTextArr.indexOf(textArr[fourTextrand]) == -1) {
fourTextArr.push(textArr[fourTextrand]);
} else {
i--
}
//随机出来的文字装入下方的4字文档内
fourTexts[i].innerHTML = fourTextArr[i];
}
// //因4字颜色不能重复 定义空数组获取不重复4字颜色
var fourTextArrColor = [];
for (var i = 0; i < fourTexts.length; i++) {
//产生4字随机颜色下标
var fourTextrandColor = rand(0, colorArr.length - 1)
if (fourTextArrColor.indexOf(colorArr[fourTextrandColor]) == -1) {
fourTextArrColor.push(colorArr[fourTextrandColor]);
} else {
i--
}
fourTexts[i].style.color = fourTextArrColor[i]
}
}
bodyText()
/********************************页面布局完成***************************/
//点击事件
function click() {
for (var i = 0; i < fourTexts.length; i++) {
fourTexts[i].onclick = clicks;
}
}
click();
//获取中间提示文字
var oP = document.querySelector(".cent p");
//获取得分显示
var oHeadSpan = document.querySelector(".head span:nth-child(2)")
//获取时间参数
var oTimerI = document.querySelector(".head i")
//定义一个值保存分数
var score = 0;
//定义一个值倒计时
var countDown = 10;
//储存定时器标号
var timer = null
function clicks() {
var totalColor = {
black: "黑",
yellow: "黄",
red: "红",
green: "绿",
blue: "蓝",
}
//获取当前主文档的颜色
var mainColor = oCent.style.color;
//获取当前4字结果
var fourText = this.innerHTML;
//利用访问属性 totalColor的 颜色标志 不等于 4字结果点击显示的文字 就跳出去;
if (totalColor[mainColor] != fourText) return;
oP.style.opacity = 0;
score++;
oHeadSpan.innerHTML = `得分:${score}`;
bodyText()
//添加定时器
if (timer == null) {
timer = setInterval(() => {
countDown--;
oTimerI.innerHTML = countDown;
if (countDown == 0) {
//停止计时器
clearInterval(timer);
timer = null;
statereste()
}
}, 1000);
}
}
//计分板
var arr = [];
function pdd() {
console.log(score)
arr.push(score)
var listranking = document.querySelector(".listranking")
if (listranking.innerHTML != "") {
listranking.innerHTML = ""
}
console.log(arr)
var s = arr.sort((a, b) => b - a)
console.log(s)
for (var i = 1; i < s.length + 1; i++) {
var oSpan = document.createElement("span");
var num = `第${[i]}名${s[i-1]}分`
console.log(num)
oSpan.innerHTML = num
listranking.appendChild(oSpan)
}
}
//刷新页面
function F5(){
var btn = document.querySelector(".btn");
btn.onclick = function () {
//刷新界面
location.reload();
}
}
F5()
//状态重置 计时结束
function statereste() {
alert(` 游戏结束,你真菜,得分${score} 分,点击确认重新开始`)
pdd()
timer = null;
score = 0;
document.querySelector(".head span:nth-child(2)").innerHTML = `完成:${score}`;
countDown = 10;
oTimerI.innerHTML = countDown;
oP.style.opacity = 1;
bodyText()
}
function rand(min, max) {
var Rand = Math.floor(Math.random() * (max - min + 1)) + min;
return Rand;
}
rand()
}
total()
</script>
</html>