Using JavaScript to realize the "open" in the "opening" game

Using JavaScript to realize the "open" in the "opening" game _javascript skills

Last Update:2017-01-19 Source: Internet

Author: User

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

Demo Demo Online
I usually like to take it to write a point of practical tools or applications, this article demonstrates the use of JavaScript to achieve the "armored Invincible" "open" guessing game, later I will upload their own writing small things, are some of the small work.

"Armored Invincible" is TVB variety show, Hong Kong artist Eric Tsang is one of the important hosts, the program has a lot of fun and exciting games, which has a call "in the open" guessing game is this article to achieve the function. The rules of the game are: first, the computer in 1 to 100 to select a number as the final answer (this answer is not known at the beginning of the guests), then the guests take turns shouting the number within 1 to 100, every time, if not the answer, the range to the number of guests shouted, until someone shouted the answer, The final shout in the answer to the people to accept playing games, if the game pass, no penalty, or will be punished.

Web page HTML and JavaScript code are as follows, very simple, have written a note, interested to look at:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> using JavaScript to achieve "armored Invincible" "Gate" "in the Open" Guess number game </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; : 131px; 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:440px; position:absolute; top:46px; right:22px}
#mainBtn input {width:140px; height:30px}

#stateInfo {width:440px; position:absolute; top:91px; right:22px}

#numBtnList {width:440px; 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>

<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= "Reset" 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" value= "ten" type= "button"/>
<input onclick= "Guessnum.userinput" value= "one" type= "button"/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "to" type= "button"/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput (Panax Notoginseng)" value= "Notoginseng" type= "button"/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" "value=" type= "button"/>
<input onclick= "guessnum.userinput" value= "Yi" type= "button"/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "guessnum.userinput" value= "si" type= "button"/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "" "type=" button "/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" "value=" "type=" button "/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "" "type=" button "/>
<input onclick= "Guessnum.userinput" value= "a" type= "button"/>
<input onclick= "Guessnum.userinput" "value=" type= "button"/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" "value=" type= "button"/>
<input onclick= "Guessnum.userinput" value= "" "type=" button "/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput (Bayi)" value= "Bayi" type= "button"/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "" type= "button"/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
<input onclick= "Guessnum.userinput" value= "" "type=" button "/>
<input onclick= "Guessnum.userinput" value= "type=" button "/>"
</div>

<div id= "CopyRight" ><a href= "Http://blog.csdn.net/webflash" target= "_blank" > asked people blog: http:// Blog.csdn.net/webflash</a></div>

</div>



<script type= "Text/javascript" >
function Clsguessnum ()
{
var answer = 0; The initialization answer is 0, which is used as a basis for judging 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 bounds for the first guessing number
var minnum = 1;
var maxnum = 100;

/**
* Start the game
*/
This.start = function ()
{
Answer = Getrand (2, 99); Generate an answer and save the number within 1~100 (excluding 1 and 100)
$ (' Stateinfo '). InnerHTML = ' state: Wait for input number ';
$ (' startbtn '). setattribute (' disabled ', true);
}

/**
* Refresh the page and start the game again
*/
This.restart = function ()
{
Window.location.reload ();
Process Firefox Browser Refresh page Disable button does not automatically activate the issue
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 processing
if (answer!= 0)
{
var btnlist = document.getElementById (' numbtnlist '). getElementsByTagName (' input ');
Btnlist[answer-1].style.color = ' red ';
$ (' helpbtn '). setattribute (' disabled ', true);
}
Else
{
Alert (' Please start the game first! ');
}
}

/**
* User Select number processing function
* @param {number} num user selected numbers single times
*/
This.userinput = function (num)
{
If the game has not started, go straight back and quit processing
if (answer = 0)
{
Alert (' Please start the game first! ');
return false;
}

Currentnum = num;
Guess the answer.
if (num = = answer)
{
Minnum = Maxnum = num;
CurrentState = ' You won a prize: ';
Currentnum = ' <font color= ' red ' > ' + num + ' </font> ';
}
Else
{
The selection number is not in the correct numeric range
if (num <= minnum | | num >= maxnum)
{
CurrentState = num + ' does not select range ';
}
Else
{
if (num > Answer)
{
Minnum = Minnum;
Maxnum = num;
}
else if (num < answer)
{
Minnum = num;
Maxnum = Maxnum;
}
The last number left, the next man has no choice.
if (Maxnum-minnum = 2)
{
CurrentState = ' Oh, my God! There is a choice, the remaining number is not the answer? ';
}
Else
{
CurrentState = ' Wait for next input ';
}
}
}
UpdateUI ();
}

/**
* getElementById Shortcuts
* @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 number buttons that are not in the selection 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);
}
}
}

/**
* Randomly obtained an integer of the specified range
* @param {Number} Minnum minimum value
* @param {Number} Maxnum maximum value
* @return A random integer between {number} Minnum~maxnum
*/
var Getrand = function (Minnum, maxnum)
{
var a = Maxnum-minnum;
var B = Math.random ();
Return (Minnum + math.round (b * a));
}
}

var guessnum = new Clsguessnum ();
</script>
</body>

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 realize the "open" in the "opening" game _javascript skills

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 realize the "open" in the "opening" game _javascript skills

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