<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选字游戏</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
width: 400px;
height: 550px;
border: 5px solid;
margin: 20px auto;
}
/*浮动 时间*/
#time {
font-size: 30px;
float: left;
}
/*浮动 数量*/
#count {
font-size: 30px;
float: right;
}
/*清除浮动 居中*/
#question {
clear: both;
font-size: 300px;
text-align: center;
}
/*消除样式 开启弹性布局*/
#answer {
list-style: none;
display: flex;
justify-content: space-around;
font-size: 40px;
}
</style>
</head>
<body>
<div id="wrap">
<!--时间-->
<div id="time">剩余时间:0</div>
<!--答对个数-->
<div id="count">数量:0</div>
<!--大字-->
<div id="question">字</div>
<!--小字-->
<ul id="answer">
<li>红</li>
<li>黄</li>
<li>蓝</li>
<li>绿</li>
<li>紫</li>
</ul>
</div>
<script type="text/javascript">
//文字数组
var fontArr = ["红", "黄", "蓝", "绿", "紫"];
//颜色数组
var colorArr = ["red", "yellow", "blue", "green", "purple"];
//随机函数
function randomNumber(x, y) {
return Math.floor(Math.random() * (y - x + 1) + x);
}
//声明一个变量存储答案
var answer;
//随机大字
function randomQuestion() {
var questionDiv = document.getElementById("question");
//赋值随机文字和随机颜色
questionDiv.innerHTML = fontArr[randomNumber(0, 4)];
questionDiv.style.color = colorArr[randomNumber(0, 4)];
switch(questionDiv.style.color) {
case "red":
{
answer = "红";
break;
}
case "yellow":
{
answer = "黄";
break;
}
case "blue":
{
answer = "蓝";
break;
}
case "green":
{
answer = "绿";
break;
}
case "purple":
{
answer = "紫";
break;
}
default:
break;
}
}
randomQuestion();
//随机小字
var lis = document.querySelectorAll("li");
function randomAnswer() {
randomArr(fontArr);
randomArr(colorArr);
for(var i = 0; i < lis.length; i++) {
lis[i].innerHTML = fontArr[i];
lis[i].style.color = colorArr[i];
}
}
randomAnswer();
//洗牌
function randomArr(array) {
for(var i = 0; i < 10; i++) {
var r1 = randomNumber(0, 4);
var r2 = randomNumber(0, 4);
if(r1 != r2) {
var temp = array[r1];
array[r1] = array[r2];
array[r2] = temp;
}
}
}
//剩余时间
var time = 20;
var timeDiv = document.getElementById("time");
var timer = setInterval(function() {
timeDiv.innerHTML = "剩余时间:" + time;
if(time == 0) {
clearInterval(timer);
alert("游戏结束");
}
time--;
}, 1000);
var count = 0;
var countDiv = document.getElementById("count");
for(var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
if (this.innerHTML == answer) {
count++;
countDiv.innerHTML = "数量:" + count;
randomQuestion();
randomAnswer();
}
}
}
</script>
</body>
</html>
扫一扫
1182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
