js實現一個猜數字游戲
編輯：JavaScript技巧
看你需要猜幾次才能猜到那個正確的數字！
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>猜數字游戲</title>
<script type="text/javascript" charset="utf-8">
window.onload = newgame; //頁面載入的時候就開始一個新的游戲
window.onpopstate = popState; //處理歷史記錄相關事件
var state, ui; //全局變量，在newgame()方法中會對其初始化
function newgame(playagain) {
ui = {
heading: null, //文檔最上面的<h1>元素
prompt: null, //要求用戶輸入一個猜測數字
input: null, //用戶輸入猜測數字的地方
low: null, //可視化的三個表格單元格
mid: null, //猜測的數字范圍
high: null,
};
//查詢這些元素中每個元素的id
for(var id in ui) ui[id] = document.getElementById(id);
//給input字段定義一個事件處理程序函數
ui.input.onchange = handleGuess;
//生成一個隨機的數字並初始化游戲狀態
state = {
n: Math.floor(99 * Math.random())+1, //整數： 0 < n <100
low: 0, //可猜數字范圍下限
high: 100, //可猜數字范圍上限
guessnum: 0, //猜測的次數
guess: undefined //最後一次猜測
};
//修改文檔內容來顯示該初始狀態
display(state);
if (playagain === true)save(state);
}
function save(state) {
if (!history.pushState) return; //如果pushState()方法沒有定義，則什麼也不做
//將一個保存的狀態和url關聯起來
var url = "#guess" + state.guessnum;
history.pushState(state, //要保存的狀態對象
"", //狀態標題：當前浏覽器會忽視它
url); //狀態URL：對書簽是沒有用的
}
//這是onpopstate的事件處理程序，用於恢復歷史狀態
function popState(event) {
if (event.state) {
//如果事件有一個狀態對象，則恢復該狀態
state = event.state; //恢復歷史狀態
display(state); //顯示恢復的狀態
}else{
history.replaceState(state, "", "#guess" + state.guessnum);
}
};
//每次猜測一個數字的時候，都會調用此事件處理程序
//此處理程序用於更新游戲的狀態、保存游戲狀態並顯示游戲狀態
function handleGuess() {
//從input字段中獲取用戶猜測的數字
var g = parseInt(this.value);
//如果該值是限定范圍中的一個數字
if ((g > state.low) && (g < state.high)) {
//對應的更新狀態
if (g < state.n) state.low =g;
else if (g > state.n) state.high = g;
state.guess = g;
state.guessnum++;
//在浏覽器歷史記錄中保存新的狀態
save(state);
//根據用戶猜測情況來修改文檔
display(state);
}else{
//無效的猜測：不保存狀態
alert("請輸入大於" + state.low + "和小於" + state.high);
}
}
//修改文檔來顯示游戲當前狀態
function display(state) {
//顯示文檔的導航和標題
ui.heading.innerHTML = document.title ="我在想一個" + state.low + "到" + state.high + "之間的數字！";
//使用一個表格來顯示數字的取值范圍
ui.low.style.width = state.low + "%";
ui.mid.style.width = (state.high-state.low) + "%";
ui.high.style.width = (100-state.high) + "%";
//確保input字段是可見的、空的並且是聚焦的
ui.input.style.visibility = "visible";
ui.input.value = "";
ui.input.focus();
//根據用戶最近猜測，設置提示
if (state.guess === undefined)
ui.prompt.innerHTML = "輸入你的猜測：";
else if (state.guess < state.n)
ui.prompt.innerHTML = state.guess + "低了，再猜一次：";
else if (state.guess > state.n)
ui.prompt.innerHTML = state.guess + "高了，再猜一次：";
else {
//當猜對了的時候，就隱藏input字段並顯示“再玩一次”按鈕
ui.input.style.visibility = "hidden";
ui.heading.innerHTML = document.title = state.guess + "正確！";
ui.prompt.innerHTML = "你贏了 <button onclick='newgame(true)'>再玩一次</button>";
}
}
</script>
<style>
#prompt { font-size: 16pt;}
table { width: 90%; margin:10px; margin-left:5%;}
#low, #high { background-color:lightgray; height:1em; }
#mid { background-color:green;}
</style>
</head>
<body>
<h1 id="heading">我在想一個數字...</h1>
<table>
<tr>
<td id="low"></td>
<td id="mid"></td>
<td id="high"></td>
</tr>
</table>
<label id="prompt"></label>
<input id="input" type="text">
</body>
</html>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！
小編推薦
熱門推薦