用JavaScript實現鐵甲無敵獎門人 “開口中”猜數遊戲

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

線上示範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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More