JS原生 简单的选字游戏 比较虐心(超简易的,,,大神勿喷 谢谢)
摘要：[code=html,html 代码,true]<!DOCTYPE html> <!–Made in 花小柒–> <html> <head> <meta charset="UTF-8"> <title>选字游戏</title> <style t……
[code=html,html 代码,true]<!DOCTYPE html>
<!–Made in 花小柒–>
<html>
<head>
<meta charset="UTF-8">
<title>选字游戏</title>
<style type="text/css">
all {
width: 500px;
border: 1px solid black;
margin: 0 auto;
padding: 20px;
}
#top {
overflow: hidden;
}
#time {
float: left;
font-size: 30px;
}
#score {
float: right;
font-size: 30px;
}
#big_text {
font-size: 150px;
width: 250px;
height: 250px;
text-align: center;
line-height: 300px;
margin: 0 auto;
}
#intro {
font-size: 30px;
text-indent: 2em;
}
#bottom {
overflow: hidden;
}
#bottom div {
width: 100px;
height: 100px;
font-size: 50px;
line-height: 100px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div id="all">
<div id="top">
<div id="time">剩余时间:20</div>
<div id="score">分数:0</div>
</div>
<div id="big_text">黄</div>
<div id="intro">根据上面的字的颜色从下面选择正确的字，选择正确自动开始</div>
<div id="bottom">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
<script type="text/javascript">
var oBig_text = document.getElementById("big_text");
var oBottom = document.getElementById("bottom");
var oBottomDivs = oBottom.getElementsByTagName("div");
var oScore = document.getElementById("score");
var oTime = document.getElementById("time");
var colorArr = ["red", "yellow", "blue", "green", "black"];
var textArr = ["红", "黄", "蓝", "绿", "黑"];
var score = 0;//记录分数
var timer = null;
var timeCount = 20;//倒计时秒数
//正确更改颜色和内容
changeTextAndColor();
for (var i = 0; i < oBottomDivs.length; i++) {
oBottomDivs[i].onclick = function () {
//大的字的颜色 和 本身的字代表的颜色相同
if (oBig_text.style.color == this.colorEn) {
if (score == 0) {
//开启定时器
startTimer();
}
score++;
oScore.innerHTML = "分数:" + score;
//正确更改颜色和内容
changeTextAndColor();
}
}
}
//定时器
function startTimer () {
timer = setInterval(function () {
//判断
if (timeCount ==0) {
clearInterval(timer);alert("小主时间到啦 » 本文来自：前端开发者 » 《JS原生 简单的选字游戏 比较虐心(超简易的,,,大神勿喷 谢谢)》
» 本文链接地址：https://www.rokub.com/8843.html
» 您也可以订阅本站：https://www.rokub.com
近期评论