用用JavaScript实现实现 铁甲无敌奖门人铁甲无敌奖门人 “开口中开口中”猜数游戏猜数游戏
JavaScript在常人看来都是门出不了厅堂的小语言,仅管它没有明星语言的闪耀,但至少网页的闪耀还是需要它
的,同时它是一门很实用的语言。
在线演示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 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="开始" title="开始游戏" type="button" />
<input id="helpBtn" onclick="guessNum.showHelp()" value="提示" title="提示答案" type="button" />
<input onclick="guessNum.restart()" value="重来" type="button" />
</div>
<div id="stateInfo">State:等待开始游戏</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" />