在线演示demo
本人平时就喜欢拿它来写点实用工具或应用，本文演示用JavaScript实现的《铁甲无敌奖门人》“开口中”猜数游戏，以后我还会陆续上传自己写的小东西，都是些工作之余的小作。
《铁甲无敌奖门人》是TVB综艺节目，香港艺人曾志伟就是其中重要的主持人，节目中有众多好玩又刺激的游戏，其中有一个叫“开口中”的猜数游戏正是本文要实现的功能。游戏规则大致是：首先电脑在1到100内选一个数字作为最终答案（这个答案嘉宾一开始是不知道的），然后嘉宾轮流喊1到100以内的数字，每喊一次，如果不是答案，就把范围缩小到嘉宾喊的那个数，直到有人喊中答案为止，最后喊中答案的人要接受玩游戏，如果游戏过关了，不用罚，否则将要受罚。
网页HTML及JavaScript代码如下，非常简单，都写了注释，感兴趣的就看一下：
复制代码 代码如下:
<!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实现《铁甲无敌奖门人》“开口中”猜数游戏</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>
<div><span>1</span> → <span>100</span></div>
<div>0</div>
<div>
<input value="开始" title="开始游戏" type="button" />
<input value="提示" title="提示答案" type="button" />
<input value="重来" type="button" />
</div>
<div>State:等待开始游戏</div>
<div>
<input value="1" type="button" />
<input value="2" type="button" />
<input value="3" type="button" />
<input value="4" type="button" />
<input value="5" type="button" />
<input value="6" type="button" />
<input value="7" type="button" />
<input value="8" type="button" />
<input value="9" type="button" />
<input value="10" type="button" />
<input value="11" type="button" />
<input value="12" type="button" />
<input value="13" type="button" />
<input value="14" type="button" />
<input value="15" type="button" />
<input value="16" type="button" />
<input value="17" type="button" />
<input value="18" type="button" />
<input value="19" type="button" />
<input value="20" type="button" />
<input value="21" type="button" />
<input value="22" type="button" />
<input value="23" type="button" />
<input value="24" type="button" />
<input value="25" type="button" />
<input value="26" type="button" />
<input value="27" type="button" />
<input value="28" type="button" />
<input value="29" type="button" />
<input value="30" type="button" />
<input value="31" type="button" />
<input value="32" type="button" />
<input value="33" type="button" />
<input value="34" type="button" />
<input value="35" type="button" />
<input value="36" type="button" />
<input value="37" type="button" />
<input value="38" type="button" />
<input value="39" type="button" />
<input value="40" type="button" />
<input value="41" type="button" />
<input value="42" type="button" />
<input value="43" type="button" />
<input value="44" type="button" />
<input value="45" type="button" />
<input value="46" type="button" />
<input value="47" type="button" />
<input value="48" type="button" />
<input value="49" type="button" />
<input value="50" type="button" />
<input value="51" type="button" />
<input value="52" type="button" />
<input value="53" type="button" />
<input value="54" type="button" />
<input value="55" type="button" />
<input value="56" type="button" />
<input value="57" type="button" />
<input value="58" type="button" />
<input value="59" type="button" />
<input value="60" type="button" />
<input value="61" type="button" />
<input value="62" type="button" />
<input value="63" type="button" />
<input value="64" type="button" />
<input value="65" type="button" />
<input value="66" type="button" />
<input value="67" type="button" />
<input value="68" type="button" />
<input value="69" type="button" />
<input value="70" type="button" />
<input value="71" type="button" />
<input value="72" type="button" />
<input value="73" type="button" />
<input value="74" type="button" />
<input value="75" type="button" />
<input value="76" type="button" />
<input value="77" type="button" />
<input value="78" type="button" />
<input value="79" type="button" />
<input value="80" type="button" />
<input value="81" type="button" />
<input value="82" type="button" />
<input value="83" type="button" />
<input value="84" type="button" />
<input value="85" type="button" />
<input value="86" type="button" />
<input value="87" type="button" />
<input value="88" type="button" />
<input value="89" type="button" />
<input value="90" type="button" />
<input value="91" type="button" />
<input value="92" type="button" />
<input value="93" type="button" />
<input value="94" type="button" />
<input value="95" type="button" />
<input value="96" type="button" />
<input value="97" type="button" />
<input value="98" type="button" />
<input value="99" type="button" />
<input value="100" type="button" />
</div>
<div><a href="https://blog.csdn.net/webflash" target="_blank">问道者博客：</a></div>
</div>
<!--
TVB综艺《铁甲无敌奖门人》32集视频地址：
“开口中”猜数游戏环节出现在26分钟后
-->
<script type="text/javascript">
function clsGuessNum()
{
var answer = 0; //初始化答案为0，用于作为判断游戏开始与否的依据，因为实际答案不可能是0
var currentNum = 0;
var currentState = '';
//初始化数字范围边界，1和100是首次猜数的最小和最大边界值
var minNum = 1;
var maxNum = 100;
/**
* 开始游戏
*/
this.start = function()
{
answer = getRand(2, 99); //生成答案并保存，1~100以内的数字（不包括1和100）
$('stateInfo').innerHTML = 'State:等待输入数字';
$('startBtn').setAttribute('disabled', true);
}
/**
* 刷新页面重新开始游戏
*/
this.restart = function()
{
window.location.reload();
//处理Firefox浏览器下刷新页面禁用按钮无法自动激活问题
var btnList = document.getElementsByTagName('input');
for (var i in btnList)
{
try
{
btnList[i].removeAttribute('disabled');
}
catch (e)
{
}
}
}
/**
* 提示答案
*/
this.showHelp = function()
{
//如果游戏还没有开始，不作提示处理
if (answer != 0)
{
var btnList = document.getElementById('numBtnList').getElementsByTagName('input');
btnList[answer - 1].style.color = 'red';
$('helpBtn').setAttribute('disabled', true);
}
else
{
alert('请先开始游戏！');
}
}
/**
* 用户选号处理函数
* @param {Number} num 用户单次所选号码
*/
this.userInput = function(num)
{
//如果游戏还没有开始，直接返回，退出处理
if (answer == 0)
{
alert('请先开始游戏！');
return false;
}
currentNum = num;
//猜中答案
if (num == answer)
{
minNum = maxNum = num;
currentState = '您中奖了:)';
currentNum = '<font color="red">' + num + '</font>';
}
else
{
//选择数字不在正确数值范围内
if (num <= minNum || num >= maxNum)
{
currentState = num + '不在选择范围';
}
else
{
if (num > answer)
{
minNum = minNum;
maxNum = num;
}
else if (num < answer)
{
minNum = num;
maxNum = maxNum;
}
//剩下最后一个数，下一个人没得选了
if (maxNum - minNum == 2)
{
currentState = '天啊！接下来还有得选吗，剩下那个数不就是答案了？';
}
else
{
currentState = '等待下次输入';
}
}
}
updateUI();
}
/**
* getElementById快捷方式
* @param {Object} objId DOM对象ID
* @return {DOM}
*/
var $ = function(objId)
{
return document.getElementById(objId);
}
/**
* 更新界面数据与UI
*/
var updateUI = function()
{
$('minNum').innerHTML = minNum;
$('maxNum').innerHTML = maxNum;
$('currentNum').innerHTML = currentNum;
$('stateInfo').innerHTML = 'State:' + currentState;
//禁用不在选择范围内的数字按钮
var btnList = document.getElementById('numBtnList').getElementsByTagName('input');
for (var i in btnList)
{
if (i <= minNum - 1 || i >= maxNum - 1)
{
btnList[i].setAttribute('disabled', true);
}
}
}
/**
* 随机获得指定范围的一个整数
* @param {Number} minNum 最小值
* @param {Number} maxNum 最大值
* @return {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>
</html>