纯javascript实现的选字游戏

最新推荐文章于 2023-01-28 14:13:12 发布

置顶 Toleranty

最新推荐文章于 2023-01-28 14:13:12 发布

阅读量784

点赞数

分类专栏： js 文章标签： javascript html

本文链接：https://blog.csdn.net/Toleranty/article/details/52318615

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选字游戏</title>
<style type="text/css">
*{
margin:0;
padding: 0;
font-family: simsun;
}
#wrap{
width: 420px;
margin: 0 auto;
position: relative;
min-height: 540px;
max-height: 640px;
border: 1px #ccc solid;
border-radius: 5px;
background: #dcdee0;
}
#time{
position: absolute;
left: 20px;
top: 20px;
font-size: 30px;
}
#wan{
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
}
#show{
font-size: 10em;
top: 90px;
left: 126px;
position: absolute;
}
#menu{
padding: 40px 30px;
font-size: 30px;
top: 250px;
position: absolute;
}
#ul1{
position: absolute;
left: 10px;
bottom: 20px;
list-style: none;
}
#ul1 li{
float: left;
font-size: 5em;
}
</style>
</head>
<body>
<div id="wrap">
<div id="time">剩余时间：20</div>
<div id="wan">完成：0</div>
<div id="show">红</div>
<div id="menu">根据上面的字的颜色从下面选择正确的字，选择正确自动开始</div>
<ul id="ul1">
<li>绿</li>
<li>蓝</li>
<li>黑</li>
<li>黄</li>
<li>红</li>
</ul>
</div>
</body>
<script type="text/javascript">
var show = document.querySelector("#show"); //获取定义的元素
var lis = document.querySelectorAll("#ul1>li");
var menu = document.querySelector("#menu");
var wan = document.querySelector("#wan");
var time = document.querySelector("#time");
var score = 0;
var colorIndex=null;
var timeBol = false;
var count = 20;
var clickBol = true;

var colors = ["red","yellow","blue","green","black"];
var fonts = ["红","黄","蓝","绿","黑"];
function rand(min,max){
return parseInt(Math.random()*(max-min+1)+min);
}

function showRand(){
colorIndex = rand(0,4);//candy
var fontIndex = rand(0,4);
show.innerHTML = fonts[fontIndex];
show.style.color = colors[colorIndex];
}
function grade(){
if (score<=2) {
alert("你是色盲ma");
}else if(score<5){
alert("你是色弱嘛");
}else if (score<10){
alert("一般");

}else if(score<15){
alert("表现不错");
}
}

function createArr(){
var arr=[];
while(arr.length<5){
var r = rand(0,4);
for (var j = 0; j < arr.length; j++) {
if(arr[j]==r){ //除掉重复的字
break;
}
}
if(j==arr.length){
arr.push(r);
}
}
// alert(arr);
return arr;
}

function textRand(){
var colorArr = createArr();//存储的就是每个li颜色的下标值
console.log(colorArr);
var fontArr = createArr();
for (var i = 0; i < lis.length; i++) {
lis[i].innerHTML = fonts[fontArr[i]];
lis[i].style.color = colors[colorArr[i]];
lis[i].fontIndex = fontArr[i];
}
}

//循环时间的函数
var timer = setInterval(function(){
if (timeBol) {
count--;
if (count <=0) {
clearInterval(timer); //每次条用的时候清0一下
clickBol = false;
grade();
}
time.innerHTML = "剩余时间:"+count;
}
},1000);

showRand();
textRand();
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function(){
if (colorIndex==this.fontIndex&&clickBol) {
// alert("点对了");
menu.style.display="none";
showRand();
textRand();
score++;
timeBol = true;
// timeBol=true;
wan.innerHTML="完成:"+score;
}
}
}
</script>
</html>

Toleranty

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯javascript实现的选字游戏

选字游戏*{ margin:0; padding: 0;font-family: simsun;}#wrap{width: 420px;margin: 0 auto;position: relative;min-height: 540px;max-height: 640px;border: 1px #ccc solid;border-radi
复制链接

扫一扫