<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>js Web Edition Games </title>
<style media= "screen" >
. Wrap {
width:577px;
outline:1px solid hotpink;
margin:100px Auto;
box-shadow:0 0 5px;
}
. screendis-wrap{
padding:22px 0px;
Overflow:hidden;
}
#displayCountDown {
Display:inline-block;
Float:left;
Font-size:3em;
padding:17px 13px;
Color:rgb (255, n, +);
}
#displayScore {
Display:inline-block;
Float:right;
Font-size:3em;
padding:17px 13px;
Color:rgb (255, N.);
}
. textwrap{
padding:20px 0;
Text-align:center;
Font-size:7em;
}
. tip{
padding:33px 0px;
Text-align:center;
Font-size:1.3em;
}
. Tip P:nth-child (2) {
Display:inline-block;
padding:20px 30px;
Background-color:rgb (134, 177);
margin:20px Auto;
Font-size:4em;
Cursor:pointer;
}
ul{
Text-align:center;
padding:33px 0px;
}
ul li{
Display:inline-block;
width:77px;
margin:3px 7px;
Text-align:center;
Font-size:3em;
padding:4px 3px;
Background-color:darkgreen;
Cursor:pointer;
}
</style>
<body>
<div class= "wrap" >
<div class= "Screendis-wrap" >
<div id= "Displaycountdown" >
Countdown:
</div>
<div id= "Displayscore" >
Rating: 0
</div>
</div>
<div class= "TextWrap" >
<p id= "Otxt" >
Red
</p>
</div>
<div class= "Tip" >
<p>
rules of the game: according to the color of the font to choose its color corresponding to the Chinese description
</p>
<p id= "Startgame" >
Start
</p>
</div>
<ul>
<li> Red </li>
<li> Yellow </li>
<li> Blue </li>
<li> Green </li>
<li> Black </li>
</ul>
</div>
</body>
<script type= "Text/javascript" >
var Displaycountdown=document.getelementbyid (' Displaycountdown ');
var Displayscore=document.getelementbyid (' Displayscore ');
var Otxt=document.getelementbyid (' Otxt ');
var txtarry=[' red ', ' black ', ' yellow ', ' blue ', ' green ';
var colorarry=[' red ', ' black ', ' yellow ', ' blue ', ' green ';
var btns=document.queryselectorall (' ul Li ');
var score=0;
var Startgame=document.getelementbyid (' Startgame ');
//Generate a random number, range is 0~5 function
function Randomnum () {
var num=parseint (Math.random ());
return num;
}
//A text in the array randomly displayed on the central screen
function Randomshowtext_otxt () {
Otxt.innerhtml=txtarry[randomnum ()];
}
randomshowtext_otxt ();
//Display the color of the text on the screen subscript of the corresponding color array
var otxt_colorsub;
//Randomly add color to the font on the central screen
function Randomshowcolor_otxt () {
otxt_colorsub=randomnum ();
Otxt.style.color=colorarry[otxt_colorsub];
}
randomshowcolor_otxt ();
//random generation of array functions with no duplicate numbers
function Randomarrynum (a) {
var nularry=[];
While (nularry.length<a) {
var flag=true;
var randomre=parseint (Math.random ());
For (var i = 0; i < nularry.length; i++) {
if (nularry[i]==randomre) {
Flag=false;
}
}
if (flag) {
Nularry.push (randomre);
}
}
return nularry;
}
//Give the button random add content and randomly change the font color function
var btnstxtsub=[];
function showtxtcolor_buts () {
Btnstxtsub=randomarrynum (5);
For (var i = 0; i < btns.length; i++) {
btns[i].btnsub=i;
Btns[i].innerhtml=txtarry[btnstxtsub[i]];
}
var btnscolorsub=randomarrynum (5);
For (var i = 0; i < btns.length; i++) {
Btns[i].style.color=colorarry[btnscolorsub[i]];
}
}
showtxtcolor_buts ();
//Set click events and match the text of the click button with the text color in the Otxt
var uclickable=true;
For (var i = 0; i < btns.length; i++) {
btns[i].onclick=function () {
if (uclickable) {
return;
}
Console.log (1);
if (btnstxtsub[this.btnsub]==otxt_colorsub) {
++score;
Showscore ();
}
showtxtcolor_buts ();
randomshowtext_otxt ();
randomshowcolor_otxt ();
}
}
//Show scoring function
function Showscore () {
displayscore.innerhtml= ' score: ' +score;
}
//Game End Function
function Gameover () {
clearinterval (timer);
if (score<10) {
alert (' Come on! ');
}else {
alert (' best! ')
}
uclickable=true;
}
//Countdown function, timed end game Stop
var timer;
function GameTime (countdown) {
if (timer) {
clearinterval (timer);
}
Timer=setinterval (function () {
countdown--;
displaycountdown.innerhtml= "Countdown:" +countdown
if (countdown==0) {
Gameover ();
}
},100)
}
Start Game function
Startgame.onclick=function () {
Uclickable=false;
GameTime (100);
score=0;
Showscore ();
}
</script>
JS Select Color games (randomly generate an array with no duplicate numbers, control the defined array by the number in the array)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
