用JavaScript实现铁甲无敌奖门人 “开口中”猜数游戏

摘要：在线演示demo本人平时就喜欢拿它来写点实用工具或应用，本文演示用JavaScript实现的《铁甲无敌奖门人》“开口中”猜数游戏，以后我还会...

在线演示demo

本人平时就喜欢拿它来写点实用工具或应用，本文演示用JavaScript实现的《铁甲无敌奖门人》“开口中”猜数游戏，以后我还会陆续上传自己写的小东西，都是些工作之余的小作。

《铁甲无敌奖门人》是TVB综艺节目，香港艺人曾志伟就是其中重要的主持人，节目中有众多好玩又刺激的游戏，其中有一个叫“开口中”的猜数游戏正是本文要实现的功能。游戏规则大致是：首先电脑在1到100内选一个数字作为最终答案（这个答案嘉宾一开始是不知道的），然后嘉宾轮流喊1到100以内的数字，每喊一次，如果不是答案，就把范围缩小到嘉宾喊的那个数，直到有人喊中答案为止，最后喊中答案的人要接受玩游戏，如果游戏过关了，不用罚，否则将要受罚。

用JavaScript实现铁甲无敌奖门人 “开口中”猜数游戏1

网页HTML及JavaScript代码如下，非常简单，都写了注释，感兴趣的就看一下：

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>用JavaScript实现《铁甲无敌奖门人》“开口中”猜数游戏</title>

* {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 id="stateInfo">State:等待开始游戏</div>

</div>

<div id="copyRight"><a href="http://blog.csdn.net/webflash" target="_blank">问道者博客：http://blog.csdn.net/webflash</a></div>

</div>

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>

作者：WebFlash

出处：http://webflash.cnblogs.com