用JavaScript實(shí)現(xiàn) 鐵甲無(wú)敵獎(jiǎng)門人 “開(kāi)口中”猜數(shù)游戲
更新時(shí)間：2009年10月25日 11:15:07 作者：
JavaScript在常人看來(lái)都是門出不了廳堂的小語(yǔ)言，僅管它沒(méi)有明星語(yǔ)言的閃耀，但至少網(wǎng)頁(yè)的閃耀還是需要它的，同時(shí)它是一門很實(shí)用的語(yǔ)言。
在線演示demo
本人平時(shí)就喜歡拿它來(lái)寫點(diǎn)實(shí)用工具或應(yīng)用，本文演示用JavaScript實(shí)現(xiàn)的《鐵甲無(wú)敵獎(jiǎng)門人》“開(kāi)口中”猜數(shù)游戲，以后我還會(huì)陸續(xù)上傳自己寫的小東西，都是些工作之余的小作。
《鐵甲無(wú)敵獎(jiǎng)門人》是TVB綜藝節(jié)目，香港藝人曾志偉就是其中重要的主持人，節(jié)目中有眾多好玩又刺激的游戲，其中有一個(gè)叫“開(kāi)口中”的猜數(shù)游戲正是本文要實(shí)現(xiàn)的功能。游戲規(guī)則大致是：首先電腦在1到100內(nèi)選一個(gè)數(shù)字作為最終答案（這個(gè)答案嘉賓一開(kāi)始是不知道的），然后嘉賓輪流喊1到100以內(nèi)的數(shù)字，每喊一次，如果不是答案，就把范圍縮小到嘉賓喊的那個(gè)數(shù)，直到有人喊中答案為止，最后喊中答案的人要接受玩游戲，如果游戲過(guò)關(guān)了，不用罰，否則將要受罰。
網(wǎng)頁(yè)HTML及JavaScript代碼如下，非常簡(jiǎn)單，都寫了注釋，感興趣的就看一下：
<!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>用JavaScript實(shí)現(xiàn)《鐵甲無(wú)敵獎(jiǎng)門人》“開(kāi)口中”猜數(shù)游戲</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: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>
</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="開(kāi)始" title="開(kāi)始游戲" type="button" />
<input id="helpBtn" onclick="guessNum.showHelp()" value="提示" title="提示答案" type="button" />
<input onclick="guessNum.restart()" value="重來(lái)" type="button" />
</div>
<div id="stateInfo">State:等待開(kāi)始游戲</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 target="_blank">問(wèn)道者博客：http://blog.csdn.net/webflash</a></div>
</div>
<!--
TVB綜藝《鐵甲無(wú)敵獎(jiǎng)門人》32集視頻地址：http://www.tudou.com/programs/view/M4_z5KU0UFA/
“開(kāi)口中”猜數(shù)游戲環(huán)節(jié)出現(xiàn)在26分鐘后
-->
<script type="text/javascript">
function clsGuessNum()
{
var answer = 0; //初始化答案為0，用于作為判斷游戲開(kāi)始與否的依據(jù)，因?yàn)閷?shí)際答案不可能是0
var currentNum = 0;
var currentState = '';
//初始化數(shù)字范圍邊界，1和100是首次猜數(shù)的最小和最大邊界值
var minNum = 1;
var maxNum = 100;
/**
* 開(kāi)始游戲
*/
this.start = function()
{
answer = getRand(2, 99); //生成答案并保存，1~100以內(nèi)的數(shù)字（不包括1和100）
$('stateInfo').innerHTML = 'State:等待輸入數(shù)字';
$('startBtn').setAttribute('disabled', true);
}
/**
* 刷新頁(yè)面重新開(kāi)始游戲
*/
this.restart = function()
{
window.location.reload();
//處理Firefox瀏覽器下刷新頁(yè)面禁用按鈕無(wú)法自動(dòng)激活問(wèn)題
var btnList = document.getElementsByTagName('input');
for (var i in btnList)
{
try
{
btnList[i].removeAttribute('disabled');
}
catch (e)
{
}
}
}
/**
* 提示答案
*/
this.showHelp = function()
{
//如果游戲還沒(méi)有開(kāi)始，不作提示處理
if (answer != 0)
{
var btnList = document.getElementById('numBtnList').getElementsByTagName('input');
btnList[answer - 1].style.color = 'red';
$('helpBtn').setAttribute('disabled', true);
}
else
{
alert('請(qǐng)先開(kāi)始游戲！');
}
}
/**
* 用戶選號(hào)處理函數(shù)
* @param {Number} num 用戶單次所選號(hào)碼
*/
this.userInput = function(num)
{
//如果游戲還沒(méi)有開(kāi)始，直接返回，退出處理
if (answer == 0)
{
alert('請(qǐng)先開(kāi)始游戲！');
return false;
}
currentNum = num;
//猜中答案
if (num == answer)
{
minNum = maxNum = num;
currentState = '您中獎(jiǎng)了:)';
currentNum = '<font color="red">' + num + '</font>';
}
else
{
//選擇數(shù)字不在正確數(shù)值范圍內(nèi)
if (num <= minNum || num >= maxNum)
{
currentState = num + '不在選擇范圍';
}
else
{
if (num > answer)
{
minNum = minNum;
maxNum = num;
}
else if (num < answer)
{
minNum = num;
maxNum = maxNum;
}
//剩下最后一個(gè)數(shù)，下一個(gè)人沒(méi)得選了
if (maxNum - minNum == 2)
{
currentState = '天?。〗酉聛?lái)還有得選嗎，剩下那個(gè)數(shù)不就是答案了？';
}
else
{
currentState = '等待下次輸入';
}
}
}
updateUI();
}
/**
* getElementById快捷方式
* @param {Object} objId DOM對(duì)象ID
* @return {DOM}
*/
var $ = function(objId)
{
return document.getElementById(objId);
}
/**
* 更新界面數(shù)據(jù)與UI
*/
var updateUI = function()
{
$('minNum').innerHTML = minNum;
$('maxNum').innerHTML = maxNum;
$('currentNum').innerHTML = currentNum;
$('stateInfo').innerHTML = 'State:' + currentState;
//禁用不在選擇范圍內(nèi)的數(shù)字按鈕
var btnList = document.getElementById('numBtnList').getElementsByTagName('input');
for (var i in btnList)
{
if (i <= minNum - 1 || i >= maxNum - 1)
{
btnList[i].setAttribute('disabled', true);
}
}
}
/**
* 隨機(jī)獲得指定范圍的一個(gè)整數(shù)
* @param {Number} minNum 最小值
* @param {Number} maxNum 最大值
* @return {Number} minNum~maxNum之間的一個(gè)隨機(jī)整數(shù)
*/
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>
</html>
作者：WebFlash
出處：http://webflash.cnblogs.com
本人平時(shí)就喜歡拿它來(lái)寫點(diǎn)實(shí)用工具或應(yīng)用，本文演示用JavaScript實(shí)現(xiàn)的《鐵甲無(wú)敵獎(jiǎng)門人》“開(kāi)口中”猜數(shù)游戲，以后我還會(huì)陸續(xù)上傳自己寫的小東西，都是些工作之余的小作。
《鐵甲無(wú)敵獎(jiǎng)門人》是TVB綜藝節(jié)目，香港藝人曾志偉就是其中重要的主持人，節(jié)目中有眾多好玩又刺激的游戲，其中有一個(gè)叫“開(kāi)口中”的猜數(shù)游戲正是本文要實(shí)現(xiàn)的功能。游戲規(guī)則大致是：首先電腦在1到100內(nèi)選一個(gè)數(shù)字作為最終答案（這個(gè)答案嘉賓一開(kāi)始是不知道的），然后嘉賓輪流喊1到100以內(nèi)的數(shù)字，每喊一次，如果不是答案，就把范圍縮小到嘉賓喊的那個(gè)數(shù)，直到有人喊中答案為止，最后喊中答案的人要接受玩游戲，如果游戲過(guò)關(guān)了，不用罰，否則將要受罰。
網(wǎng)頁(yè)HTML及JavaScript代碼如下，非常簡(jiǎn)單，都寫了注釋，感興趣的就看一下：
復(fù)制代碼 代碼如下:
<!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>用JavaScript實(shí)現(xiàn)《鐵甲無(wú)敵獎(jiǎng)門人》“開(kāi)口中”猜數(shù)游戲</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: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>
</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="開(kāi)始" title="開(kāi)始游戲" type="button" />
<input id="helpBtn" onclick="guessNum.showHelp()" value="提示" title="提示答案" type="button" />
<input onclick="guessNum.restart()" value="重來(lái)" type="button" />
</div>
<div id="stateInfo">State:等待開(kāi)始游戲</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 target="_blank">問(wèn)道者博客：http://blog.csdn.net/webflash</a></div>
</div>
<!--
TVB綜藝《鐵甲無(wú)敵獎(jiǎng)門人》32集視頻地址：http://www.tudou.com/programs/view/M4_z5KU0UFA/
“開(kāi)口中”猜數(shù)游戲環(huán)節(jié)出現(xiàn)在26分鐘后
-->
<script type="text/javascript">
function clsGuessNum()
{
var answer = 0; //初始化答案為0，用于作為判斷游戲開(kāi)始與否的依據(jù)，因?yàn)閷?shí)際答案不可能是0
var currentNum = 0;
var currentState = '';
//初始化數(shù)字范圍邊界，1和100是首次猜數(shù)的最小和最大邊界值
var minNum = 1;
var maxNum = 100;
/**
* 開(kāi)始游戲
*/
this.start = function()
{
answer = getRand(2, 99); //生成答案并保存，1~100以內(nèi)的數(shù)字（不包括1和100）
$('stateInfo').innerHTML = 'State:等待輸入數(shù)字';
$('startBtn').setAttribute('disabled', true);
}
/**
* 刷新頁(yè)面重新開(kāi)始游戲
*/
this.restart = function()
{
window.location.reload();
//處理Firefox瀏覽器下刷新頁(yè)面禁用按鈕無(wú)法自動(dòng)激活問(wèn)題
var btnList = document.getElementsByTagName('input');
for (var i in btnList)
{
try
{
btnList[i].removeAttribute('disabled');
}
catch (e)
{
}
}
}
/**
* 提示答案
*/
this.showHelp = function()
{
//如果游戲還沒(méi)有開(kāi)始，不作提示處理
if (answer != 0)
{
var btnList = document.getElementById('numBtnList').getElementsByTagName('input');
btnList[answer - 1].style.color = 'red';
$('helpBtn').setAttribute('disabled', true);
}
else
{
alert('請(qǐng)先開(kāi)始游戲！');
}
}
/**
* 用戶選號(hào)處理函數(shù)
* @param {Number} num 用戶單次所選號(hào)碼
*/
this.userInput = function(num)
{
//如果游戲還沒(méi)有開(kāi)始，直接返回，退出處理
if (answer == 0)
{
alert('請(qǐng)先開(kāi)始游戲！');
return false;
}
currentNum = num;
//猜中答案
if (num == answer)
{
minNum = maxNum = num;
currentState = '您中獎(jiǎng)了:)';
currentNum = '<font color="red">' + num + '</font>';
}
else
{
//選擇數(shù)字不在正確數(shù)值范圍內(nèi)
if (num <= minNum || num >= maxNum)
{
currentState = num + '不在選擇范圍';
}
else
{
if (num > answer)
{
minNum = minNum;
maxNum = num;
}
else if (num < answer)
{
minNum = num;
maxNum = maxNum;
}
//剩下最后一個(gè)數(shù)，下一個(gè)人沒(méi)得選了
if (maxNum - minNum == 2)
{
currentState = '天?。〗酉聛?lái)還有得選嗎，剩下那個(gè)數(shù)不就是答案了？';
}
else
{
currentState = '等待下次輸入';
}
}
}
updateUI();
}
/**
* getElementById快捷方式
* @param {Object} objId DOM對(duì)象ID
* @return {DOM}
*/
var $ = function(objId)
{
return document.getElementById(objId);
}
/**
* 更新界面數(shù)據(jù)與UI
*/
var updateUI = function()
{
$('minNum').innerHTML = minNum;
$('maxNum').innerHTML = maxNum;
$('currentNum').innerHTML = currentNum;
$('stateInfo').innerHTML = 'State:' + currentState;
//禁用不在選擇范圍內(nèi)的數(shù)字按鈕
var btnList = document.getElementById('numBtnList').getElementsByTagName('input');
for (var i in btnList)
{
if (i <= minNum - 1 || i >= maxNum - 1)
{
btnList[i].setAttribute('disabled', true);
}
}
}
/**
* 隨機(jī)獲得指定范圍的一個(gè)整數(shù)
* @param {Number} minNum 最小值
* @param {Number} maxNum 最大值
* @return {Number} minNum~maxNum之間的一個(gè)隨機(jī)整數(shù)
*/
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>
</html>
作者：WebFlash
出處：http://webflash.cnblogs.com
您可能感興趣的文章:
- JS實(shí)現(xiàn)網(wǎng)頁(yè)端猜數(shù)字小游戲
- jsp+servlet實(shí)現(xiàn)猜數(shù)字游戲
- JSP實(shí)現(xiàn)百萬(wàn)富翁猜數(shù)字游戲
- AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能示例
- angularjs實(shí)現(xiàn)猜數(shù)字大小功能
- js實(shí)現(xiàn)一個(gè)猜數(shù)字游戲
- js猜數(shù)字小游戲的簡(jiǎn)單實(shí)現(xiàn)代碼
- javascript實(shí)現(xiàn)的猜數(shù)小游戲完整實(shí)例代碼
- JavaScript實(shí)現(xiàn)猜數(shù)字游戲
相關(guān)文章
javascript設(shè)計(jì)模式 – 策略模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 策略模式,結(jié)合實(shí)例形式分析了javascript策略模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
JavaScript中Array方法你該知道的正確打開(kāi)方法
string和array作為javascript內(nèi)置對(duì)象,其中許多方法無(wú)論是在開(kāi)發(fā)過(guò)程中,還是在面試的時(shí)候都有機(jī)會(huì)被面試官問(wèn)到，下面這篇文章主要給大家介紹了關(guān)于JavaScript中Array方法你該知道的正確打開(kāi)方法，需要的朋友可以參考下2018-09-09
在微信小程序的文檔中，使用scroll-view標(biāo)簽，然后給它設(shè)置一個(gè)scroll-x就可以實(shí)現(xiàn)元素，橫向排列，可以左右滑動(dòng)，但是在實(shí)際開(kāi)發(fā)中會(huì)遇到各種問(wèn)題，下面小編給大家?guī)?lái)了微信小程序scroll-x失效的完美解決方法,需要的朋友可以參考下2018-07-07
BootStrap實(shí)現(xiàn)帶關(guān)閉按鈕功能
這篇文章主要介紹了BootStrap實(shí)現(xiàn)帶關(guān)閉按鈕功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記（十五） 瀏覽器中的JavaScript
Window對(duì)象對(duì)操作瀏覽器窗口非常有用，開(kāi)發(fā)者可以移動(dòng)或調(diào)整瀏覽器窗口的大小2012-08-08
實(shí)用的Javascript調(diào)試技巧整理
這篇文章介紹了Javascript的調(diào)試技巧，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了JS繼承分類、原理與用法,結(jié)合實(shí)例形式較為詳細(xì)的總結(jié)分析了javascript原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承、原型式繼承、寄生式繼承和寄生組合式繼承等相關(guān)原理及使用方法,需要的朋友可以參考下2019-01-01
JS實(shí)現(xiàn)的簡(jiǎn)單分頁(yè)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單分頁(yè)功能,涉及javascript事件響應(yīng)及頁(yè)面元素遍歷、動(dòng)態(tài)構(gòu)造等相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
js表達(dá)式與運(yùn)算符簡(jiǎn)單操作示例
這篇文章主要介紹了js表達(dá)式與運(yùn)算符簡(jiǎn)單操作,結(jié)合實(shí)例形式分析了JavaScript表達(dá)式與運(yùn)算符的基本算數(shù)運(yùn)算、邏輯運(yùn)算、比較運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
easywasmplayer實(shí)現(xiàn)視頻流播放示例詳解
這篇文章主要為大家介紹了easywasmplayer實(shí)現(xiàn)視頻流播放示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09