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

Last Update:2018-12-08 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>

<Div id = "stateInfo"> State: waiting to start the game </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.

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

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

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

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

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support