自己制作的文字游戏。(:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字游戏</title>
<style type="text/css">
#wrap{
width: 400px;height: 550px;
border: 1px solid black;
margin: 50px auto 0px;
position: relative;
}
#left{
width: 80px;height: 30px;
position: absolute;
left: 30px;top: 10px;
}
#right{
width: 80px;height: 30px;
position: absolute;
right: 40px;top: 10px;
}
#one{
width: 250px;height: 250px;
/*background: green;*/
position: absolute;
left: 75px;top: 70px;
text-align: center;
line-height: 250px;
font-size: 150px;
}
p{
margin: 0;padding-top: 0;
width: 300px;height: 80px;
position: absolute;
left: 50px;top: 350px;
text-indent: 2em;
font-size: 25px;
}
#two{
width: 100%;height: 100px;
position: absolute;
left: 0;bottom: 0px;
}
#two span{
display: block;
width: 80px;height: 80px;
margin-top: 20px;
font-size: 70px;
text-align: center;
float: left;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<span id="left">时间:</span>
<span id="right">分数:</span>
<div id="one">黑</div>
<p>根据上面的字的颜色从下面选择正确的字，选择正确自动开始</p>
<div id="two">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript">
var left = document.getElementById('left');
var right = document.getElementById('right');
var one = document.getElementById('one');
var two = document.getElementById('two');
var span = two.getElementsByTagName('span');
var text = ['黑','蓝','黄','绿','红'];
var color = ['black','blue','yellow','green','red'];
// time = setInterval(function(){
// left.innerHTML = '时间:' + i + 's';
// i--;
// if (i < 0) {
// clearInterval(time);
// alert('Game Over');
// };
// },1000)
function num(){
var a = Math.floor(Math.random()*5);
return a;
}
function random (){
var five = [];
while(five.length < 5){
var rand = num();
if (five.indexOf(rand) == -1) {
five.push(rand);
}
}
return five;
}
function text2(){
var san = num();
si = num();
one.innerHTML = text[san];
one.style.color = color[si];
var yi = random();
var er = random();
for(var f = 0; f < span.length; f++){
span[f].innerHTML = text[yi[f]];
span[f].style.color = color[er[f]];
span[f].index = yi[f];
}
}
text2();
var score = 0;
var t = 10;
right.innerHTML = '分数:' + score;
left.innerHTML = '时间:' + t + 's';
var play = false;
for(var f = 0; f < span.length; f++){
span[f].onclick = function(){
if (si == this.index && t != 0) {
score++;
play = true;
right.innerHTML = '分数:' + score;
text2();
}else if (si != this.index && play) {
t--;
left.innerHTML = '时间:' + t + 's';
if (t <= 0) {
clearInterval(time);
play = false;
};
}
}
}
time = setInterval(function(){
if (play) {
t--;
left.innerHTML = '时间:' + t + 's';
if (t <= 0) {
clearInterval(time);
play = false;
alert('Game Over');
};
}
},1000)
</script>
</body>
</html>