js练手项目--简单的选字游戏_js选字游戏-CSDN博客

本文链接：https://blog.csdn.net/weixin_46111732/article/details/125740470

<!DOCTYPE html>

<head>

<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>

<p>根据上面的字的颜色从下面选择正确的字,选择正确自动开始</p>

</div>

</div>

</div>

</body>

/*********************************************

_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>

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>