《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設計-第2版》 第05章教案-JavaScript BOM和DOM_第1頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設計-第2版》 第05章教案-JavaScript BOM和DOM_第2頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設計-第2版》 第05章教案-JavaScript BOM和DOM_第3頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設計-第2版》 第05章教案-JavaScript BOM和DOM_第4頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設計-第2版》 第05章教案-JavaScript BOM和DOM_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設計-第2版》教案第5章JavaScriptBOM和DOM一、教學目標：掌握JavaScriptDOM的用法；掌握JavaScriptBOM的用法。二、教學重點和難點：重點：JavaScriptDOM的用法；難點：JavaScriptBOM的用法。三、教學方法與手段：采取互動式教學方法，理論教學使用多媒體投影教室。四、課程簡介：本章主要內(nèi)容是JavaScript文檔對象模型DOM和瀏覽器對象模型BOM的用法，在DOM部分主要包括對HTML元素的查找、動態(tài)創(chuàng)建、內(nèi)容/屬性修改，以及事件和節(jié)點；在BOM部分主要包括了5種常用對象。五、教學基本內(nèi)容：5.1文檔對象模型DOM瀏覽器在加載網(wǎng)頁時會創(chuàng)建文檔對象模型（DocumentObjectModel，DOM）來確定網(wǎng)頁中的元素層次結構，JavaScript可以通過DOM來動態(tài)改變HTML元素、屬性、CSS樣式以及對事件做出響應。5.1.1查找HTML元素在JavaScript中有三種方式可以查找HTML元素：通過HTML元素的id名稱查找；通過HTML元素的標簽名稱查找；通過HTML元素的類名稱查找。1. 通過id查找HTML元素一般默認不同的HTML元素使用不一樣的id名稱以示區(qū)別，因此通過id名稱找到指定的單個元素。在JavaScript中語法如下：document.getElementById("id名稱");其中getElementById()方法是遵照駝峰命名法，即第一個單詞全小寫，后面的每一個單詞首字母大寫的方式。這種命名方法在JavaScript中比較普遍。如果未找到該元素，則返回值為null；如果找到該元素，則會以對象的形式返回。例如，查找id="test"的元素，并獲取該元素內(nèi)部的文本內(nèi)容：//根據(jù)id名稱獲取元素對象vartest=document.getElementById("test");//獲取元素內(nèi)容varresult=test.innerHTML;為簡便代碼閱讀效果，使用了與id名稱同名的變量test來獲取指定元素，該變量名稱也可以是其他自定義變量名，不影響運行效果。innerHTML可以用于獲取元素內(nèi)部的HTML代碼，關于innerHTML更多用法請參考下一節(jié)5.12.2DOMHTML。2. 通過標簽名查找HTML元素HTML元素均有固定的標簽名稱，因此通過標簽名稱可以找到指定的單個或一系列元素。在JavaScript中語法如下：document.getElementsByTagName("標簽名稱");此時方法中的Elements是復數(shù)形式，因為要考慮到有可能存在多個元素符合要求。同樣如果未找到符合的元素，則返回值為null；如果有多個符合條件的元素，則返回值是數(shù)組的形式。例如，查找所有的段落元素<p>，并獲取第一個段落標簽內(nèi)部的文本內(nèi)容：vartest=document.getElementByTagName("p");varresult=p[0].innerHTML;因為有多個段落標簽，因此變量返回值是數(shù)組的形式。其中第一個段落標簽對應的是p[0]，以此類推，最后一個元素對應的索引號為數(shù)組長度減1。3. 通過類名查找HTML元素document.getElementsByClassName()方法可用于根據(jù)類名稱獲取HTML元素。在JavaScript中語法如下：document.getElementsByClassName("類名稱");此時方法中的Elements是復數(shù)形式，因為要考慮到有可能存在多個元素符合要求。同樣如果未找到符合的元素，則返回值為null；如果有多個符合條件的元素，則返回值是數(shù)組的形式。注：該方法在IE5、6、7、8版本中使用均無效，為考慮各個版本瀏覽器的兼容性，如果不能保證用戶使用IE5、6、7、8版本以外的瀏覽器則不建議使用此方法來獲取HTML元素?！纠?-1】JavaScriptDOM查找元素的應用分別使用根據(jù)id名稱、標簽名稱和類名稱查找指定的元素對象，并使用alert()語句輸出指定元素對象的內(nèi)容?！敬a說明】本示例分別使用了document對象中的getElementById()、getElementsByTagName()和getElementsByClassName方法來獲取指定的元素對象，其中getElementById()會根據(jù)id名稱準確獲取到唯一的元素，另外兩個方法會根據(jù)元素標簽名稱或類名稱獲取符合條件的所有元素。5.1.2DOMHTML1. 創(chuàng)建動態(tài)的HTML內(nèi)容在JavaScript中，使用document.write()方法可以往HTML頁面動態(tài)輸出內(nèi)容。例如：<body><script>document.write("Hello2016");</script></body>上述代碼片段表示將在空白頁面上動態(tài)輸出字符串"Hello2016"。需要注意的是，alert()方法中的換行符\n在這里是無效的，如果需要輸出換行直接使用HTML換行標簽<br>即可?！纠?-2】JavaScriptDOM動態(tài)生成HTML內(nèi)容使用document.write()方法向HTML頁面輸出內(nèi)容。2. 改變HTML元素內(nèi)容innerHTML可以用于獲取元素內(nèi)容，也可以改變元素內(nèi)容。使用innerHTML屬性獲取或更改的元素內(nèi)容可以包括HTML標簽本身。獲取元素內(nèi)容的語法結構如下：var變量名=元素對象.innerHTML;更改元素內(nèi)容的語法結構如下：元素對象.innerHTML=新的內(nèi)容;這里的元素對象可以使用document對象的getElementById("id名稱")方法獲取。【例5-3】JavaScriptDOM修改元素內(nèi)容使用innerHTML屬性改變指定元素的內(nèi)容?！敬a說明】本示例在頁面上包含了一個用于測試的段落元素<p>，并為其自定義id="test"便于在JavaScript中獲取該對象。初始情況下，該段落元素的內(nèi)容為帶有斜體字標簽<i>的文本內(nèi)容。該示例在JavaScript中首先使用document對象的getElementById("id名稱")方法獲取id="test"的段落元素對象，然后使用innerHTML屬性分別獲取和重置其內(nèi)容。由圖可見，使用innerHTML屬性獲取的段落元素內(nèi)容中包含了HTML標簽與文本內(nèi)容。同樣，使用innerHTML屬性更新的段落元素內(nèi)容也可以包含帶有HTML標簽的文本。3. 改變HTML元素屬性在JavaScript還可以根據(jù)屬性名稱動態(tài)地修改元素屬性。其語法結構如下：元素對象.attribute=新的屬性值;這里的attribute替換為真正的屬性名稱即可使用。例如，更改id="image"的圖片地址src屬性：varimg=document.getElementById("image");img.src="image/newpic.jpg";也可以使用setAttribute()方法達到同樣的效果。其語法格式如下：元素對象.setAttribute("屬性名稱","新的屬性值");例如，更改id="image"的圖片地址src屬性的代碼修改后如下：varimg=document.getElementById("image");img.setAttribute("src","image/newpic.jpg");【例5-4】JavaScriptDOM修改元素屬性【代碼說明】本示例在HTML代碼部分定義了兩個屬性完全相同的圖像元素<img>，并分別添加了自定義名稱img01和img02以示區(qū)別。其圖像素材來源均為本地image文件夾中的sunflower.jpg文件。其中id為img01的圖像元素僅用于參考對比，不會對其做任何更改；id為img02的圖像元素為測試元素，將會在JavaScript中重新設置其src與alt屬性。在JavaScript中使用document.getElementById()方法獲取id為img02的圖像元素，然后更改其src屬性為同一個image文件夾目錄下的lily.jpg，并更新其alt屬性為新的說明文字。由圖可見，作為測試的第二幅圖片內(nèi)容發(fā)生了變化。5.1.3DOMCSSJavaScript還可以改變HTML元素的CSS樣式。其語法結構如下：元素對象.style.屬性=新的值;這里的元素對象可以使用document對象的getElementById("id名稱")方法獲取。屬性指的是在CSS樣式中的屬性名稱，等號右邊填寫該屬性更改后的樣式值。例如，更改id="test"的元素背景顏色為藍色：vartest=document.getElementById("test");test.style.backgroundColor="blue";需要注意的是，這里元素CSS屬性名稱需要修改成符合camel標記法的規(guī)則的寫法，即首個單詞全小寫，后面的每個單詞均首字母大寫。而屬性值在定義時需要加上雙引號。上述代碼也可以連成一句，寫法如下：vartest=document.getElementById("test").style.backgroundColor="blue";【例5-5】JavaScriptDOM修改元素CSS樣式【代碼說明】本示例在JavaScript中動態(tài)修改了id="test"的段落元素<p>的CSS樣式。初始情況下的段落元素<p>沒有額外設置任何CSS樣式效果，因此顯示為左對齊、黑色字體并且無背景顏色的默認樣式。在JavaScript中首先使用document對象的getElementById("id名稱")方法獲取id="test"的段落元素對象，然后使用style屬性分別重置其背景顏色為橙色、字體顏色為白色、字體加粗以及文本居中顯示效果。5.1.4DOM事件JavaScript還可以在HTML頁面狀態(tài)發(fā)生變化時執(zhí)行代碼，這種狀態(tài)的變化稱為DOM事件（Event）。例如用戶點擊元素會觸發(fā)點擊事件，使用事件屬性onclick就可以捕獲這一事件。為元素的onclick屬性添加需要的JavaScript代碼，即可做到用戶點擊元素時觸發(fā)動作。<buttononclick="alert('hi')">點我會彈出對話框</button>JavaScript代碼可以直接在onclick屬性的雙引號中添加，也可以寫到JavaScript函數(shù)中，在onclick屬性的雙引號中調用函數(shù)名稱。例如上述代碼可以改寫為：<buttononclick="test()">點我會彈出對話框</button><script>functiontest(){alert("hi");}</script>以上兩種方法效果完全相同，可根據(jù)代碼量決定采用其中哪種方式，假如點擊事件觸發(fā)后需要執(zhí)行的代碼較多，建議使用函數(shù)調用的方式。常見事件如表5-1所示。表5-1HTML常用事件屬性一覽表事件屬性解釋onabort圖像加載過程被中斷onblur元素失去焦點onchange域的內(nèi)容被改變onclick元素被鼠標左鍵點擊ondbclick元素被鼠標左鍵雙擊onerror加載文檔或圖像時發(fā)送錯誤onfocus元素獲得焦點onkeydown鍵盤按鍵被按下onkeypress鍵盤按鍵被按下并松開onkeyup鍵盤按鍵被松開onload頁面或圖像被加載完成onmousedown鼠標按鈕被按下onmousemove鼠標被移動onmouseout鼠標從當前元素上移走onmouseover鼠標移動到當前元素上onmouseup鼠標按鍵被松開onreset重置按鈕被點擊onresize窗口或框架的大小被更改onselect文本被選中onsubmit提交按鈕被點擊onunload退出頁面【例5-6】DOM事件的簡單應用為按鈕添加onclick事件，當用戶點擊按鈕時更改段落元素中的文字內(nèi)容?！敬a說明】本示例包含了一個id="p1"的段落元素<p>和一個按鈕元素<button>用于測試按鈕的點擊事件onclick的觸發(fā)效果。在按鈕元素中添加onclick事件的回調函數(shù)change()，并在JavaScript中定義該函數(shù)，該函數(shù)名稱可自定義。在change()函數(shù)中使用document.getElementById()方法獲取了段落元素<p>并使用innerHTML屬性更新其中的內(nèi)容。由圖可見，圖(a)顯示的是頁面初始加載的效果，此時段落元素顯示的還是最初的文字內(nèi)容。圖(b)顯示的是點擊按鈕之后的頁面效果，此時可以看到段落元素中的文字內(nèi)容已經(jīng)發(fā)生了改變。5.1.5DOM節(jié)點使用JavaScript也可以為HTML頁面動態(tài)地添加和刪除HTML元素。1. 添加HTML元素添加HTML元素有兩個步驟，先要創(chuàng)建需要添加的HTML元素，然后將其追加在一個已存在的元素中去。使用document對象的createElement()方法可以創(chuàng)建新的元素，其語法結構如下：document.createElement("元素標簽名");例如，創(chuàng)建一個新的段落標簽<p>：document.createElement("p");使用appendChild()方法可以將創(chuàng)建好的元素追加到已存在的元素中，其語法結構如下：已存在的元素對象.appendChild(需要添加的新元素對象);這里已存在的元素對象可以使用document對象的getElementById("id名稱")方法獲取。例如，將上一個示例中創(chuàng)建的段落標簽<p>追加到id="test"的<div>標簽中去：varp=document.createElement("p");vartest=document.getElementById("test");test.appendChild(p);【例5-7】JavaScriptDOM添加HTML元素在JavaScript中使用createElement()方法動態(tài)創(chuàng)建新的HTML元素，并用appendChild()方法將其添加到指定元素中?！敬a說明】本示例包含了兩個段落元素<p>，并在CSS內(nèi)部樣式表中為其設置統(tǒng)一樣式：寬和高均為100像素，帶有1像素寬的實線邊框，各邊內(nèi)外邊距均為10像素，向左浮動。其中第一個段落元素將保持原狀，作為參照樣例。第二個段落元素添加自定義id名稱container便于在JavaScript中獲取該對象。為了使最終顯示效果更加明顯，在使用createElement()方法動態(tài)創(chuàng)建了<div>元素之后，將<div>元素的背景顏色設置為黃色，然后使用appendChild()方法動態(tài)地添加到id="container"的段落元素中。由圖可見，右邊的段落元素內(nèi)部多出了一個背景為黃色的區(qū)域，該區(qū)域就是使用JavaScript代碼動態(tài)加入的<div>元素。2. 刪除HTML元素刪除已存在的HTML元素也需要兩個步驟：首先使用document對象的getElementById("id名稱")方法獲取該元素，然后使用removeChild()方法將其從父元素中刪除。其父元素如果有明確的id名稱，同樣可以使用getElementById()方法獲取。例如，在知道父元素id名稱的情況下刪除其中id="p01"的子元素：vartest=document.getElementById("test");//獲取父元素varp=document.getElementById("p01");//獲取子元素test.removeChild(p);//刪除子元素若父元素無對應的id名稱獲取，可以使用子元素的parentNode屬性獲取其父元素對象，效果相同。例如，在不知道父元素id名稱的情況下刪除其中id="p01"的子元素：varp=document.getElementById("p01");//獲取子元素vartest=p.parentNode;//獲取父元素test.removeChild(p);//刪除子元素【例5-8】JavaScriptDOM刪除HTML元素在JavaScript中使用removeChild()方法動態(tài)刪除指定元素的子元素?！敬a說明】本示例包含了兩個區(qū)域元素<div>，并在CSS內(nèi)部樣式表中為其設置統(tǒng)一樣式：寬和高均為100像素，帶有1像素寬的實線邊框，各邊內(nèi)外邊距均為10像素，向左浮動。其中第一個<div>元素將保持原狀，作為參照樣例。第二個<div>元素添加自定義id名稱container便于在JavaScript中獲取該對象。為測試動態(tài)刪除功能，事先在這兩個<div>元素內(nèi)部分別加入一個段落元素<p>，并在CSS內(nèi)部樣式表中統(tǒng)一設置<p>元素的樣式為寬100像素、背景顏色為粉色的效果。由圖可見，右邊的段落元素內(nèi)部已被清空，該區(qū)域就是使用JavaScript代碼動態(tài)刪除了段落元素。5.2瀏覽器對象模型BOM瀏覽器對象模型（BrowserObjectModel，BOM）使JavaScript可以與瀏覽器進行交互。BOM中的常用對象如下：window：瀏覽器窗口對象，其成員包括所有的全局變量、函數(shù)和對象。screen：屏幕對象，通常用于獲取用戶可用屏幕的寬和高。location：位置對象，用于獲得當前頁面的URL地址，還可以把瀏覽器重定向到新的指定頁面。history：歷史記錄對象，其中包含了瀏覽器的瀏覽歷史記錄。navigator：瀏覽器對象，通常用于獲取用戶瀏覽器的相關信息。5.2.1Window對象在JavaScript中window對象表示瀏覽器窗口，目前所有瀏覽器都支持該對象。JavaScript中一切全局變量、函數(shù)和對象都自動成為window對象的內(nèi)容。例如，用于判斷變量是否為數(shù)字的全局方法isNaN()就是window對象的方法，完整寫法為window.isNaN()。通常情況下window前綴可以省略不寫?！纠?-9】JavaScriptBOMWindow對象的應用在JavaScript中使用window對象的innerWidth和innerHeight屬性分別獲取瀏覽器窗口的內(nèi)部寬度和高度?！敬a說明】本示例中innerWidth和innerHeight屬性值顯示的是頁面初始加載完畢時的尺寸，如果手動更改了當前瀏覽器窗口的大小并刷新頁面，這兩個屬性值會動態(tài)變化。除此以外，Window對象還包含一些關于瀏覽器窗口的常用方法如下：window.open(URL)：打開新窗口，例如window.open("");表示打開百度首頁；window.close()：關閉當前窗口；window.moveTo(x,y)：移動當前窗口使其左上角位于坐標點(x,y)上，例如window.moveTo(0,0)表示把窗口左上角移動到坐標點(0,0)上；window.print()：打印當前窗口的內(nèi)容；window.resizeTo(width,height)：調整當前窗口的尺寸，例如window.resizeTo(800,600);表示把窗口調整到寬800px、高600px的尺寸。5.2.2Screen對象在JavaScript中window.screen對象可用于獲取屏幕的可用寬度和高度。該對象在使用時通?？梢允÷詗indow前綴，簡寫為screen。screen對象的常用屬性如下：availWidth：表示屏幕的可用寬度，默認單位為像素（px）。availHeight：表示屏幕的可用高度，默認單位為像素（px）。其中avail前綴來源于英文單詞available（可用的）?？捎脤挾然蚋叨戎傅氖侨コ缑嫔献詭У膬?nèi)容（例如任務欄）后的實際可使用的寬高。【例5-10】JavaScriptBOMScreen對象的應用在JavaScript中使用screen對象獲取屏幕的可用寬度和高度。5.2.3Location對象在JavaScript中window.location對象可用于獲取當前頁面的URL或者將瀏覽器重定向到新的頁面。該對象在使用時通?？梢允÷詗indows前綴，簡寫為location。location的href屬性可以用于重定向到其他URL地址。例如：location.href("a.html");上述代碼將會使頁面重定向到同一個目錄下的a.html頁面。這里所填寫參數(shù)可以是本地URL地址或是網(wǎng)絡URL地址?！纠?-11】JavaScriptBOMLocation對象的應用在JavaScript中使用location對象重定向到其他URL地址。5.2.4History對象在JavaScript中window.history對象包含了用戶通過瀏覽器窗口訪問過的URL歷史記錄。該對象在使用時通常可以省略windows前綴，簡寫為history。通常使用history對象實現(xiàn)瀏覽器上返回和前進按鈕的相同功能。相關方法解釋如下：back()：返回上一個頁面，相當于點擊了瀏覽器上的后退按鈕。forward()：前進到下一個頁面，相當于點擊了瀏覽器上的前進按鈕?！纠?-12】JavaScriptBOMHistory對象的應用在JavaScript中使用history對象模擬瀏覽器上的前進和后退按鈕?！敬a說明】本示例如需測試后退按鈕的效果，在使用時需要首先打開一個其他網(wǎng)頁，然后在同一個瀏覽器窗口重新打開本示例頁面。同樣如需測試前進按鈕的效果，需要在本示例頁面之后打開過其他頁面再退回方可有瀏覽器歷史記錄。5.2.5Navigator對象在JavaScript中window.navigator對象可用于獲取用戶瀏覽器的一系列信息，例如瀏覽器的名稱、版本號等。該對象在使用時通?？梢允÷詗indow前綴，簡寫為navigator。navigator對象的常用屬性如表5-2所示。表5-2JavaScriptNavigator對象常見屬性一覽屬性名稱解釋appCodeName瀏覽器代碼名，通常會顯示為Mozilla。appName瀏覽器名稱，通常顯示為Netscape。appVersion瀏覽器版本。cookieEnabled瀏覽器是否允許使用cookies。如果允許使用cookies返回true，否則返回false。javaEnabled當前瀏覽器中是否啟用了Java。language瀏覽器使用的首選語言。mimeTypes在瀏覽器中注冊的mime類型，返回值為數(shù)組。onLine瀏覽器是否處于聯(lián)網(wǎng)狀態(tài)。如果處于聯(lián)網(wǎng)狀態(tài)返回true，否則返回false。plugins瀏覽器中安裝插件的信息，返回值為數(shù)組。platform瀏覽器所在的操作系統(tǒng)。product產(chǎn)品名稱，通常顯示為Gecko。userAgent用戶代理信息。vendor瀏覽器的品牌供應商。注：由于數(shù)據(jù)有可能被瀏覽器的使用者更改，因此來自navigator的信息僅作為參考，不能作為權威的依據(jù)。而且不同瀏覽器中navigator對象包含的屬性也稍有差異?！纠?-13】JavaScriptBOMNavigator對象的應用在JavaScript中使用navigator對象獲取用戶瀏覽器的相關信息。5.3階段案例：Nim博弈小游戲5.3.1案例需求制作一款Nim博弈小游戲，由真人玩家和電腦AI雙人對戰(zhàn)。一共有25個石子，玩家和AI輪流拿取，每次必須拿至少1個、最多3個，誰拿到最后一顆就算誰輸。5.3.2案例分析1. 生成隨機數(shù)這里可以直接使用第4章階段案例中的方法來生成一個a-b的隨機整數(shù)（包含a和b本身），參考js代碼如下：//隨機生成a-b之間的數(shù)字，包含a和b本身functiongetRandomNum(a,b){returnMath.floor(Math.random()*(b-a+1))+a;}本案例需要隨機產(chǎn)生1至3之間的整數(shù)，因此就使用getRandomNum(1,3)即可。但是還需要考慮一種特殊情況，有可能剩余石子數(shù)不足3個，那么這時就不能直接隨機1至3之間的整數(shù)了，而是應該隨機生成1至剩余石子總數(shù)之間的整數(shù)，參考js代碼如下：varmaxNum=3;//最大數(shù)值varminNum=1;//最小數(shù)值varstoneNum=2;//當前石子總數(shù)//AI隨機產(chǎn)生一個要拿走的石子數(shù)varbotNum=getRandomNum(minNum,maxNum>stoneNum?stoneNum:maxNum);上述代碼中的三目運算maxNum>stoneNum?stoneNum:maxNum表示先判斷最大數(shù)值maxNum和石子總數(shù)stoneNum的大小，誰小就用誰作為隨機數(shù)的上限。實際最后隨機拿走的石子數(shù)是getRandomNum(minNum,maxNum)或getRandomNum(minNum,stoneNum)，根據(jù)比大小判斷的結果而定。2. 判斷數(shù)字有效性可直接參考“第4章階段案例：猜數(shù)字小游戲”中的“案例分析-2判斷數(shù)字有效性”，同樣是判斷是否是數(shù)字、整數(shù)以及是否在有效范圍內(nèi)，這里不再贅述。3. 循環(huán)游戲回合這里不妨試試使用while(true)來制作一個永久循環(huán)，直到判斷出勝負再使用break強勢停止循環(huán)，參考js代碼如下：1. varmyTurn=true;//標記當前是否輪到真人玩家2. while(true){3. //真人玩家的回合4. if(myTurn){…玩家游戲過程待補充…}5. //AI的回合6. else{…AI游戲過程待補充…}7. 8. //判斷游戲是否結束（如果剩余石子數(shù)為0則游戲結束）9. if(stoneNum==0){10. //判斷誰贏了（…判斷過程待補充…）11. break;//停止循環(huán)12. }13. else{14. myTurn=!myTurn;//切換當前玩家15. }16. }5.3.3案例制作創(chuàng)建一個HTML文件，文件名可自定義，例如NimGame.html。相關代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="utf-8">5. <title>Nim博弈小游戲</title>6. </head>7. <body>8. <!--標題-->9. <h3>Nim博弈小游戲（人機對戰(zhàn)）</h3>10. <!--水平線-->11. <hr>12. <p>游戲規(guī)則：<br>13. 1.玩家和AI輪流拿石子，每次最少拿1個，最多拿3個。<br>14. 2.玩家先手拿，誰拿到最后1個就是誰輸了（末者敗）。</p>15. <buttononclick="startGame()">開始游戲</button>16. <script>17. //隨機生成a-b之間的數(shù)字，包含a和b本身18. functiongetRandomNum(a,b){19. returnMath.floor(Math.random()*(b-a+1))+a;20. }21. 22. //開始游戲23. functionstartGame(){24. //==============================25. //游戲初始化26. //==============================27. varmyTurn=true;//標記當前是否輪到真人玩家28. varmaxNum=3;//最大數(shù)值29. varminNum=1;//最小數(shù)值30. varstoneNum=25;//當前石子總數(shù)31. 32. //==============================33. //游戲開始34. //==============================35. while(true){36. //真人玩家的回合37. if(myTurn){38. //獲取輸入的玩家要拿去的石子數(shù)39. varmyNum=prompt("當前剩余石子總數(shù)為"+stoneNum+"，請輸入您要拿去的石子數(shù)（1-3）","");40. //有效性判斷41. if(isNaN(myNum)){42. alert("您輸入的不是數(shù)字，請重新輸入！");43. continue;44. }45. elseif(myNum%1!==0){46. alert("您輸入的不是整數(shù)，請重新輸入！");47. continue;48. }49. elseif(myNum<minNum||myNum>maxNum||myNum>stoneNum){50. alert("您輸入的數(shù)字不在有效范圍，請重新輸入！");51. continue;52. }53. else{54. //更新剩余石子總數(shù)55. stoneNum=stoneNum-myNum;56. alert("玩家拿走了"+myNum+"個，當前剩余石子總數(shù)為"+stoneNum);57. }58. }59. //AI的回合60. else{61. //AI隨機產(chǎn)生一個要拿走的石子數(shù)62. varbotNum=getRandomNum(minNum,maxNum>stoneNum?stoneNum:maxNum);63. //更新剩余石子總數(shù)64. stoneNum=stoneNum-botNum;65. alert("AI拿走了"+botNum+"個，當前剩余石子總數(shù)為"+stoneNum);66. }67. 68. //判斷游戲是否結束（如果剩余石子數(shù)為0則游戲結束）69. if(stoneNum==0){70. //判斷誰贏了71. varwinner=myTurn?"AI":"玩家";72. alert("游戲結束！"+winner+"勝利。");73. break;//停止循環(huán)74. }75. else{76. myTurn=!myTurn;//切換當前玩家77. }78. }79. } 80. </script>81. </bod

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論