You make the word game. (:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Word Games </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>
<body>
<div id= "Wrap" >
<span id= "Left" > Time:</span>
<span id= "right" > Score:</span>
<div id= "One" > Black </div>
<p> Select the correct word from below according to the color of the word above, choose the correct auto start </p>
<div id= "both" >
<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 = document.getElementById (' both ');
var span = two.getelementsbytagname (' span ');
var text = [' Black ', ' blue ', ' yellow ', ' green ', ' red '];
var color = [' black ', ' blue ', ' yellow ', ' green ', ' red '];
Time = SetInterval (function () {
left.innerhtml = ' time: ' + i + ' s ';
i--;
if (I < 0) {
Clearinterval (time);
Alert (' Game over ');
// };
},1000)
function num () {
var a = Math.floor (Math.random ());
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: ' + score;
left.innerhtml = ' time: ' + 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: ' + score;
Text2 ();
}else if (si! = this.index && play) {
t--;
left.innerhtml = ' time: ' + t + ' s ';
if (t <= 0) {
Clearinterval (time);
Play = false;
};
}
}
}
Time = SetInterval (function () {
if (play) {
t--;
left.innerhtml = ' time: ' + t + ' s ';
if (t <= 0) {
Clearinterval (time);
Play = false;
Alert (' Game over ');
};
}
},1000)
</script>
</body>
JS-made word games