Home > Developer > JavaScript

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

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
python guessing game implement definition and examples meaning of word implement what definition of implement how to implement interface es mean to implement how to implement recaptcha
Related Article
JavaScript solution to the eight Queens Problem method summar...
Http status code: 301, 302 redirection, 302 redirection
Ajax and 302 response code Testing
Ajax and 302 response code test_javascript-js tutorial

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More