Using JavaScript to implement the game of "opening up" and "guessing"

Source: Internet
Author: User

Online demo
I usually like to use it to write some practical tools or applications. This article demonstrates how to use JavaScript to guess the number of games in the "open-mouth" of "the invincible Referer, in the future, I will upload my own little things, all of which will be a little bit of work.

Iron armor invincible prize winner is a TVB variety show. Hong Kong Artist Zeng Zhiwei is an important host. The show contains many interesting and exciting games, one of them is the function of this article, which is called "open-mouth. The general rule of the game is: first, the computer selects a number from 1 to 100 as the final answer (this answer is unknown at the beginning ), then, the guests call numbers ranging from 1 to 100 in turn. If the answer is not the answer, they will narrow down the scope to the number that the guest calls until someone calls the answer, the person who finally calls the answer should accept the game. If the game passes the game, no penalty is required. Otherwise, the game will be fined.

The HTML and JavaScript code of the webpage are as follows, which is very simple and has been commented out. If you are interested, take a look:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> use JavaScript to implement the "open-mouth" quiz game of "Invincible Referer" </title>
<Style type = "text/css">
* {Margin: 0; padding: 0}
Body {font-size: 12px}
# Layout {width: 800px; height: 500px; text-align: center; margin: 25px auto; border: 2px solid #999; background: # CCC; position: relative}

# NumRange {width: 200px; font-family: Arial Black; font-size: 20px; background: #000; color: # FFF; position: absolute; top: pixel PX; left: 72px}

# CurrentNum {width: 200px; height: 200px; font-family: Arial Black; font-size: 98px; line-height: 200px; background: #999; position: absolute; top: 159px; left: 72px}

# MainBtn {width: pixel PX; position: absolute; top: 46px; right: 22px}
# MainBtn input {width: 140px; height: 30px}

# StateInfo {width: pixel PX; position: absolute; top: 91px; right: 22px}

# NumBtnList {width: pixel PX; position: absolute; top: 121px; right: 22px}
# NumBtnList input {display: block; width: 40px; height: 30px; margin: 2px; float: left}

# CopyRight {position: absolute; left: 10px; bottom: 10px}
# CopyRight a {color: #000; text-decoration: none; display: block; padding: 5px 8px}
# CopyRight a: hover {background: #999; color: # FFF; text-decoration: none}
</Style>
</Head>

<Body>
<Div id = "layout">

<Div id = "numRange"> <span id = "minNum"> 1 </span> →< span id = "maxNum"> 100 </span> </div>

<Div id = "currentNum"> 0 </div>

<Div id = "mainBtn">
<Input id = "startBtn" onclick = "guessNum. start ()" value = "start" title = "start game" type = "button"/>
<Input id = "helpBtn" onclick = "guessNum. showHelp ()" value = "prompt" title = "prompt answer" type = "button"/>
<Input onclick = "guessNum. restart ()" value = "" type = "button"/>
</Div>

<Div id = "stateInfo"> State: waiting to start the game </div>

<Div id = "numBtnList">
<Input onclick = "guessNum. userInput (1)" value = "1" type = "button"/>
<Input onclick = "guessNum. userInput (2)" value = "2" type = "button"/>
<Input onclick = "guessNum. userInput (3)" value = "3" type = "button"/>
<Input onclick = "guessNum. userInput (4)" value = "4" type = "button"/>
<Input onclick = "guessNum. userInput (5)" value = "5" type = "button"/>
<Input onclick = "guessNum. userInput (6)" value = "6" type = "button"/>
<Input onclick = "guessNum. userInput (7)" value = "7" type = "button"/>
<Input onclick = "guessNum. userInput (8)" value = "8" type = "button"/>
<Input onclick = "guessNum. userInput (9)" value = "9" type = "button"/>
<Input onclick = "guessNum. userInput (10)" value = "10" type = "button"/>
<Input onclick = "guessNum. userInput (11)" value = "11" type = "button"/>
<Input onclick = "guessNum. userInput (12)" value = "12" type = "button"/>
<Input onclick = "guessNum. userInput (13)" value = "13" type = "button"/>
<Input onclick = "guessNum. userInput (14)" value = "14" type = "button"/>
<Input onclick = "guessNum. userInput (15)" value = "15" type = "button"/>
<Input onclick = "guessNum. userInput (16)" value = "16" type = "button"/>
<Input onclick = "guessNum. userInput (17)" value = "17" type = "button"/>
<Input onclick = "guessNum. userInput (18)" value = "18" type = "button"/>
<Input onclick = "guessNum. userInput (19)" value = "19" type = "button"/>
<Input onclick = "guessNum. userInput (20)" value = "20" type = "button"/>
<Input onclick = "guessNum. userInput (21)" value = "21" type = "button"/>
<Input onclick = "guessNum. userInput (22)" value = "22" type = "button"/>
<Input onclick = "guessNum. userInput (23)" value = "23" type = "button"/>
<Input onclick = "guessNum. userInput (24)" value = "24" type = "button"/>
<Input onclick = "guessNum. userInput (25)" value = "25" type = "button"/>
<Input onclick = "guessNum. userInput (26)" value = "26" type = "button"/>
<Input onclick = "guessNum. userInput (27)" value = "27" type = "button"/>
<Input onclick = "guessNum. userInput (28)" value = "28" type = "button"/>
<Input onclick = "guessNum. userInput (29)" value = "29" type = "button"/>
<Input onclick = "guessNum. userInput (30)" value = "30" type = "button"/>
<Input onclick = "guessNum. userInput (31)" value = "31" type = "button"/>
<Input onclick = "guessNum. userInput (32)" value = "32" type = "button"/>
<Input onclick = "guessNum. userInput (33)" value = "33" type = "button"/>
<Input onclick = "guessNum. userInput (34)" value = "34" type = "button"/>
<Input onclick = "guessNum. userInput (35)" value = "35" type = "button"/>
<Input onclick = "guessNum. userInput (36)" value = "36" type = "button"/>
<Input onclick = "guessNum. userInput (37)" value = "37" type = "button"/>
<Input onclick = "guessNum. userInput (38)" value = "38" type = "button"/>
<Input onclick = "guessNum. userInput (39)" value = "39" type = "button"/>
<Input onclick = "guessNum. userInput (40)" value = "40" type = "button"/>
<Input onclick = "guessNum. userInput (41)" value = "41" type = "button"/>
<Input onclick = "guessNum. userInput (42)" value = "42" type = "button"/>
<Input onclick = "guessNum. userInput (43)" value = "43" type = "button"/>
<Input onclick = "guessNum. userInput (44)" value = "44" type = "button"/>
<Input onclick = "guessNum. userInput (45)" value = "45" type = "button"/>
<Input onclick = "guessNum. userInput (46)" value = "46" type = "button"/>
<Input onclick = "guessNum. userInput (47)" value = "47" type = "button"/>
<Input onclick = "guessNum. userInput (48)" value = "48" type = "button"/>
<Input onclick = "guessNum. userInput (49)" value = "49" type = "button"/>
<Input onclick = "guessNum. userInput (50)" value = "50" type = "button"/>
<Input onclick = "guessNum. userInput (51)" value = "51" type = "button"/>
<Input onclick = "guessNum. userInput (52)" value = "52" type = "button"/>
<Input onclick = "guessNum. userInput (53)" value = "53" type = "button"/>
<Input onclick = "guessNum. userInput (54)" value = "54" type = "button"/>
<Input onclick = "guessNum. userInput (55)" value = "55" type = "button"/>
<Input onclick = "guessNum. userInput (56)" value = "56" type = "button"/>
<Input onclick = "guessNum. userInput (57)" value = "57" type = "button"/>
<Input onclick = "guessNum. userInput (58)" value = "58" type = "button"/>
<Input onclick = "guessNum. userInput (59)" value = "59" type = "button"/>
<Input onclick = "guessNum. userInput (60)" value = "60" type = "button"/>
<Input onclick = "guessNum. userInput (61)" value = "61" type = "button"/>
<Input onclick = "guessNum. userInput (62)" value = "62" type = "button"/>
<Input onclick = "guessNum. userInput (63)" value = "63" type = "button"/>
<Input onclick = "guessNum. userInput (64)" value = "64" type = "button"/>
<Input onclick = "guessNum. userInput (65)" value = "65" type = "button"/>
<Input onclick = "guessNum. userInput (66)" value = "66" type = "button"/>
<Input onclick = "guessNum. userInput (67)" value = "67" type = "button"/>
<Input onclick = "guessNum. userInput (68)" value = "68" type = "button"/>
<Input onclick = "guessNum. userInput (69)" value = "69" type = "button"/>
<Input onclick = "guessNum. userInput (70)" value = "70" type = "button"/>
<Input onclick = "guessNum. userInput (71)" value = "71" type = "button"/>
<Input onclick = "guessNum. userInput (72)" value = "72" type = "button"/>
<Input onclick = "guessNum. userInput (73)" value = "73" type = "button"/>
<Input onclick = "guessNum. userInput (74)" value = "74" type = "button"/>
<Input onclick = "guessNum. userInput (75)" value = "75" type = "button"/>
<Input onclick = "guessNum. userInput (76)" value = "76" type = "button"/>
<Input onclick = "guessNum. userInput (77)" value = "77" type = "button"/>
<Input onclick = "guessNum. userInput (78)" value = "78" type = "button"/>
<Input onclick = "guessNum. userInput (79)" value = "79" type = "button"/>
<Input onclick = "guessNum. userInput (80)" value = "80" type = "button"/>
<Input onclick = "guessNum. userInput (81)" value = "81" type = "button"/>
<Input onclick = "guessNum. userInput (82)" value = "82" type = "button"/>
<Input onclick = "guessNum. userInput (83)" value = "83" type = "button"/>
<Input onclick = "guessNum. userInput (84)" value = "84" type = "button"/>
<Input onclick = "guessNum. userInput (85)" value = "85" type = "button"/>
<Input onclick = "guessNum. userInput (86)" value = "86" type = "button"/>
<Input onclick = "guessNum. userInput (87)" value = "87" type = "button"/>
<Input onclick = "guessNum. userInput (88)" value = "88" type = "button"/>
<Input onclick = "guessNum. userInput (89)" value = "89" type = "button"/>
<Input onclick = "guessNum. userInput (90)" value = "90" type = "button"/>
<Input onclick = "guessNum. userInput (91)" value = "91" type = "button"/>
<Input onclick = "guessNum. userInput (92)" value = "92" type = "button"/>
<Input onclick = "guessNum. userInput (93)" value = "93" type = "button"/>
<Input onclick = "guessNum. userInput (94)" value = "94" type = "button"/>
<Input onclick = "guessNum. userInput (95)" value = "95" type = "button"/>
<Input onclick = "guessNum. userInput (96)" value = "96" type = "button"/>
<Input onclick = "guessNum. userInput (97)" value = "97" type = "button"/>
<Input onclick = "guessNum. userInput (98)" value = "98" type = "button"/>
<Input onclick = "guessNum. userInput (99)" value = "99" type = "button"/>
<Input onclick = "guessNum. userInput (100)" value = "100" type = "button"/>
</Div>

<Div id = "copyRight"> <a href = "http://blog.csdn.net/webflash" target = "_ blank"> evangelist blog: http://blog.csdn.net/webflash </a> </div>

</Div>

<! --
TVB variety of the armor invincible prize winner 32 sets video address: http://www.tudou.com/programs/view/M4_z5KU0UFA/
In the open dialog box, guess that the game will appear 26 minutes later.
-->

<Script type = "text/javascript">
Function clsGuessNum ()
{
Var answer = 0; // The initial answer is 0, which is used as the basis for determining whether the game starts or not, because the actual answer cannot be 0.
Var currentNum = 0;
Var currentState = '';
// Initialize the number range boundary. 1 and 100 are the minimum and maximum boundary values of the first guess.
Var minNum = 1;
Var Max num = 100;

/**
* Start the game
*/
This. start = function ()
{
Answer = getRand (2, 99); // generate and save the answer, 1 ~ Numbers less than 100 (excluding 1 and 100)
$ ('Stateinfo'). innerHTML = 'State: waiting to enter a number ';
$ ('Startbtn '). setAttribute ('Disabled', true );
}

/**
* Refresh the page and start the game again
*/
This. restart = function ()
{
Window. location. reload ();
// Handle the problem that the disabled button cannot be automatically activated when the page is refreshed in Firefox
Var btnList = document. getElementsByTagName ('input ');
For (var I in btnList)
{
Try
{
BtnList [I]. removeAttribute ('Disabled ');
}
Catch (e)
{
}
}
}

/**
* Prompt answer
*/
This. showHelp = function ()
{
// If the game has not started, do not prompt for handling
If (answer! = 0)
{
Var btnList = document. getElementById ('numbtnlist'). getElementsByTagName ('input ');
BtnList [answer-1]. style. color = 'red ';
$ ('Helpbtn '). setAttribute ('Disabled', true );
}
Else
{
Alert ('start the game first! ');
}
}

/**
* Number selection Handler
* @ Param {Number} num the Number selected by the user at a time
*/
This. userInput = function (num)
{
// If the game has not started, return directly and exit the processing.
If (answer = 0)
{
Alert ('start the game first! ');
Return false;
}

CurrentNum = num;
// Guess the answer
If (num = answer)
{
MinNum = maxNum = num;
CurrentState = 'you have won the prize :)';
CurrentNum = '<font color = "red">' + num + '</font> ';
}
Else
{
// The selected number is not in the correct value range
If (num <= minNum | num> = maxNum)
{
CurrentState = num + 'out of Selection Range ';
}
Else
{
If (num> answer)
{
MinNum = minNum;
MaxNum = num;
}
Else if (num <answer)
{
MinNum = num;
MaxNum = maxNum;
}
// The last number is left. The next person has no choice.
If (maxNum-minNum = 2)
{
CurrentState = 'Oh, my God! Do you still have to choose next? Isn't that number the answer? ';
}
Else
{
CurrentState = 'Wait for next input ';
}
}
}
UpdateUI ();
}

/**
* GetElementById shortcut
* @ Param {Object} objId DOM Object ID
* @ Return {DOM}
*/
Var $ = function (objId)
{
Return document. getElementById (objId );
}

/**
* Update interface data and UI
*/
Var updateUI = function ()
{
$ ('Minnum'). innerHTML = minNum;
$ ('Maxnum'). innerHTML = maxNum;
$ ('Currentnum'). innerHTML = currentNum;
$ ('Stateinfo'). innerHTML = 'State: '+ currentState;
// Disable the number button that is not in the selected range
Var btnList = document. getElementById ('numbtnlist'). getElementsByTagName ('input ');
For (var I in btnList)
{
If (I <= minNum-1 | I> = maxNum-1)
{
BtnList [I]. setAttribute ('Disabled ', true );
}
}
}

/**
* Random acquisition of an integer in the specified range
* @ Param {Number} minNum minimum value
* @ Param {Number} maxNum maximum value
* @ Return {Number} minNum ~ A random integer between maxNum
*/
Var getRand = function (minNum, maxNum)
{
Var a = maxNum-minNum;
Var B = Math. random ();
Return (minNum + Math. round (B * ));
}
}

Var guessNum = new clsGuessNum ();
</Script>
</Body>
</Html>

Author: WebFlash
Source: http://webflash.cnblogs.com

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.