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

2024-10-02 21:49:38

在线演示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>

<div id="stateInfo">State:等待开始游戏</div>

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

</div>

/**
* 开始游戏
*/
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

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

在线演示demo本人平时就喜欢拿它来写点实用工具或应用,本文演示用JavaScript实现的<铁甲无敌奖门人>"开口中"猜数游戏,以后我还会陆续上传自己写的小东西,都是些工作之余的小作. <铁甲无敌奖门人>是TVB综艺节目,香港艺人曾志伟就是其中重要的主持人,节目中有众多好玩又刺激的游戏,其中有一个叫"开口中"的猜数游戏正是本文要实现的功能.游戏规则大致是:首先电脑在1到100内选一个数字作为最终答案(这个答案嘉宾一开始是不知道的),然后嘉宾
JavaScript知识点总结(十一)之js中的Object类详解

JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的.Object对象主要用于将任意数据封装成对象形式. 一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructor:对象的构造函数. 2.prototype:获得类的prototype对象,static性质. 三.Object类主要方法 1
javascript随机将第一个dom中的图片添加到第二个div中示例

javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=
JavaScript学习笔记之取数组中最大值和最小值

推荐阅读:JavaScript学习笔记之数组的增.删.改.查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序在实际业务中有的时候要取出数组中的最大值或最小值.但在数组中并没有提供arr.max()和arr.min()这样的方法.那么是不是可以通过别的方式实现类似这样的方法呢?那么今天我们就来整理取出数组中最大值和最小值的一些方法. 取数组中最大值可以先把思路理一下: 将数组中第一个元素赋值给一个变量,并且把这个变量作为最大值: 开始遍历数组,从第二个元
JavaScript实现获取用户单击body中所有A标签内容的方法

本文实例讲述了JavaScript实现获取用户单击body中所有A标签内容的方法.分享给大家供大家参考,具体如下: var tbody = document.body; tbody.onclick = function (e) { getUrl(e); } function getUrl(e) { e = e || event; var target = e.target || e.srcElement, href; alert(target.tagName); //获取到A标签中的onclic
JavaScript 获取元素在父节点中的下标(推荐)

jQuery中直接通过$(this).index()即可得到当前元素的下标.但原生JavaScript并没有提供类似的属性或方法,这时候可以调用数组中的indexOf方法直接计算 <ul> <li>hello</li> <li>hello</li> <li id="mts">hello</li> <li>hello</li> </ul> var elt=documen
javascript上下方向键控制表格行选中并高亮显示的方法

本文实例讲述了javascript上下方向键控制表格行选中并高亮显示的方法.分享给大家供大家参考.具体实现方法如下: <style> tr.highlight { background:#08246B; color:white; } </style> <table border="1" width="70%" id="ice"> <tr onClick="selectTR();return fa
JavaScript如何实现组合列表框中元素移动效果

首先给大家说下组合框和列表框的区别: 组合框包括列表框和文本框的功能文本框:只能输入数据列表框:只能选择数据组合框:既能输入数据,又能选择`` 应用背景:在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框 . 实现的基本思想: (1)编写init方法对两个列表框进行初始化: (2)为body添加onload事件调用init方法: (3)编写move(s1,s2)把s1中选中的选项移到s2; (4)编写moveAll(s1,s2)把s1中所有的选项都移到s2. (5)为按钮添
JavaScript+html5 canvas制作的圆中圆效果实例

本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { background:#F2F2F2; height:500px; height:500px; mar
javascript判断并获取注册表中可信任站点的方法

本文实例讲述了javascript判断并获取注册表中可信任站点的方法.分享给大家供大家参考.具体分析如下: 判断可信任站点,首先要在注册表中找到可信任站点在注册表中的位置,如下: (1)域名作为可信任站点在注册表中的位置: HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\InternetSettings\\ZoneMap\\Domains\\ (2)IP作为可信任站点在注册表中的位置: HKCU\\Software\\Microsoft\\

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

相关推荐

随机推荐

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