連連看課程設(shè)計(jì)

1、<p><b>　　. </b></p><p><b>　　信息科學(xué)與工程學(xué)院</b></p><p>　　程序設(shè)計(jì)實(shí)訓(xùn)課程設(shè)計(jì)</p><p>　　題 目 連 連 看 游 戲 </p><p>　　學(xué) 院 信息科學(xué)與工程學(xué)院 <

2、/p><p>　　班 級(jí) </p><p>　　姓 名 </p><p>　　學(xué) 號(hào) </p><p>　　指 導(dǎo) 教 師 </p><p>　　成 績(jī)

3、 </p><p><b>　　2013年5月</b></p><p><b>　　摘 要</b></p><p>　　在電腦普及發(fā)展的今天，游戲已成為人們生活中必不可少的一部分了，不論你走到哪個(gè)游戲網(wǎng)站，連連看游戲總是排在受玩家歡迎排名的前5位。休閑、趣味、益智是連連看玩不厭的精華，且不分男女老少、工薪白

4、領(lǐng)，是一款適合大眾的經(jīng)典休閑小游戲。而這次我所選的課題連連看小游戲的設(shè)計(jì)開(kāi)發(fā)正是互聯(lián)網(wǎng)與社會(huì)生活之間關(guān)系的緊密體現(xiàn)。</p><p>　　當(dāng)今社會(huì)隨著網(wǎng)絡(luò)的不斷發(fā)展，游戲行業(yè)也如雨后春筍般迅速崛起。雖然說(shuō)大型網(wǎng)絡(luò)游戲能夠給游戲開(kāi)發(fā)商帶來(lái)很大的經(jīng)濟(jì)利益，但是它的開(kāi)發(fā)成本大，風(fēng)險(xiǎn)性比較高。而小型的游戲恰巧避免了這些，它的開(kāi)發(fā)簡(jiǎn)單，風(fēng)險(xiǎn)相對(duì)大型游戲小多了。因此小型的游戲在游戲開(kāi)發(fā)中占據(jù)的地位也不容忽視。</p&g

5、t;<p>　　連連看是一個(gè)小型的游戲，不僅能夠考察一個(gè)人的觀察能力而且可以用來(lái)打發(fā)無(wú)聊的時(shí)間，也可以給上班族在工作之余用來(lái)娛樂(lè)，這樣就可以來(lái)減輕工作壓力。與此同時(shí)該游戲?qū)﹄娔X的配置無(wú)要求，相對(duì)于大型的網(wǎng)絡(luò)游戲來(lái)說(shuō)。所以這個(gè)游戲的開(kāi)發(fā)還是很有意義的。</p><p>　　該連連看游戲是使用Jscript實(shí)現(xiàn)，以DreamWeaver為開(kāi)發(fā)環(huán)境，玩家通過(guò)開(kāi)發(fā)者設(shè)置的游戲規(guī)則使得游戲區(qū)的所有圖片都消除，

6、這樣就勝利了。系統(tǒng)定義了一個(gè)時(shí)間進(jìn)度條為60秒，當(dāng)消除一對(duì)圖片則系統(tǒng)會(huì)自動(dòng)在原有的剩余時(shí)間上加上1秒。如果在規(guī)定的時(shí)間游戲區(qū)的圖片沒(méi)有消除完，則游戲結(jié)束。</p><p>　　關(guān)鍵詞：DreamWeaver，Dw, Jscript，連連看，游戲</p><p><b>　　目 錄</b></p><p>　　第1章 前 言1</p&

7、gt;<p><b>　　1.1簡(jiǎn)介說(shuō)明1</b></p><p>　　1.1.1 研究背景1</p><p>　　1.1.2 目的1</p><p>　　1.2 設(shè)計(jì)的目的及工作原理1</p><p>　　1.2.1工作原理1</p><p>　　1.2.2 設(shè)計(jì)流程2

8、</p><p>　　1.2.3 開(kāi)發(fā)的目的及意義3</p><p>　　1.2.4 關(guān)于Jscript3</p><p>　　第2章 游戲功能分析4</p><p>　　2.1 游戲總體功能分析4</p><p>　　2.2游戲區(qū)域的設(shè)計(jì)實(shí)現(xiàn)4</p><p>　　2.3初始化工作

9、5</p><p>　　2.4圖案方塊的連接消除判斷7</p><p>　　2.5 游戲的勝利13</p><p>　　2.6游戲的重置14</p><p>　　第3章 系統(tǒng)測(cè)試15</p><p>　　3.1程序運(yùn)行測(cè)試15</p><p>　　3.2 游戲失敗提示界面16<

10、/p><p>　　3.3 游戲成功提示界面17</p><p>　　第4章 總 結(jié)18</p><p>　　參 考 文 獻(xiàn)19</p><p><b>　　第1章 前 言</b></p><p><b>　　1.1簡(jiǎn)介說(shuō)明</b></p><p>

11、;　　1.1.1 研究背景</p><p>　　隨著電腦軟硬件技術(shù)和互聯(lián)網(wǎng)的飛速發(fā)展，電腦游戲也突飛猛進(jìn)，成功游戲不斷涌現(xiàn)。比較成熟的項(xiàng)目主要有：反恐精英（CS）、星際爭(zhēng)霸、魔獸爭(zhēng)霸2、FIFA2003、帝國(guó)時(shí)代、FIFA2004等等。這時(shí)也出現(xiàn)了越來(lái)越多的網(wǎng)絡(luò)小游戲，休閑類項(xiàng)目包括網(wǎng)絡(luò)圍棋、中國(guó)象棋、四國(guó)軍棋、橋牌、麻將、拱豬、斗地主、拖拉機(jī)、連連看等。</p><p><b>

12、;　　1.1.2 目的</b></p><p>　　網(wǎng)絡(luò)小游戲制作的目的是滿足了人們休閑的需要，在緊張工作之余休閑類的小游戲能夠給人帶來(lái)最大程度的放松，也可以增進(jìn)人們之間的交流，溝通，通過(guò)游戲還可以認(rèn)識(shí)更多的朋友，也可以到達(dá)跨省、跨市，甚至跨國(guó)間人們互相娛樂(lè)的目的。 </p><p>　　連連看游戲面向的對(duì)象對(duì)象很廣泛，男女老少通吃。但很奇怪的是，它也真的能吸引老人以及小孩。閑

13、下來(lái)的時(shí)候，這款游戲可以有意身心，促進(jìn)大腦運(yùn)轉(zhuǎn)，還可以消除心理焦慮，降低來(lái)自各方面的壓力。當(dāng)然，游戲嘛，總歸到底，有利也有弊，因?yàn)橄矚g玩，所以往往讓人愛(ài)上它，愛(ài)的很瘋狂。所以，我在此還是勸誡廣大玩家不要沉迷游戲，任何喜歡都得有個(gè)度。過(guò)了那個(gè)度，就適得其反了。</p><p>　　1.2 設(shè)計(jì)的目的及工作原理</p><p><b>　　1.2.1工作原理</b><

14、;/p><p>　　游戲一開(kāi)始便定義了一個(gè)時(shí)間進(jìn)度條，玩家必須在規(guī)定的時(shí)間內(nèi)消除游戲區(qū)的所有圖片方可取得勝利。任意兩張圖片相同的單元格在符合相應(yīng)的可消除的條件下進(jìn)行消除，轉(zhuǎn)一次彎或者不轉(zhuǎn)彎，或者轉(zhuǎn)兩次彎。當(dāng)消除一對(duì)圖片時(shí)時(shí)間進(jìn)度條會(huì)自動(dòng)增加10秒。一旦游戲定義的時(shí)間歸零，但是在游戲區(qū)域還有圖片存在時(shí)，游戲失敗，同時(shí)游戲結(jié)束。反之，游戲勝利，玩家可繼續(xù)挑戰(zhàn)更高級(jí)別的。</p><p>　　所有的

15、初始化時(shí)隨著頁(yè)面一開(kāi)始就被載入。其實(shí)現(xiàn)代碼為：</p><p>　　window.onload=function(){</p><p>　　SetTab();//繪制游戲區(qū)</p><p><b>　　}</b></p><p>　　游戲圖片是系統(tǒng)產(chǎn)生的webdings圖標(biāo)，接著就是設(shè)計(jì)游戲規(guī)則也就是判斷在什么情況下兩張

16、圖片才能消除，具體實(shí)現(xiàn)我們將會(huì)在后面一一介紹。</p><p>　　1.2.2 設(shè)計(jì)流程</p><p>　　流程規(guī)劃大致上可以分為三個(gè)部分，分別為：游戲初始化界面設(shè)計(jì)、游戲規(guī)則的設(shè)定，控制模塊。</p><p>　　在這其中最主要的就是游戲規(guī)則的設(shè)置，與游戲窗口的初始化。當(dāng)玩家雙擊該html頁(yè)面時(shí)，一開(kāi)始系統(tǒng)就會(huì)初始化游戲界面，這是該程序至關(guān)重要的一部分。初始化游

17、戲界面主要包括游戲區(qū)的圖片布局與顯示、進(jìn)度條的顯示與初始化。每次開(kāi)局的圖片布局都是隨機(jī)的。時(shí)間條的大小設(shè)計(jì)為1500毫秒。接著就是點(diǎn)擊消除圖片的規(guī)則設(shè)計(jì)了，看玩家點(diǎn)的兩張圖片是否能夠消除。 連連看游戲它的構(gòu)架圖如下圖所示：</p><p><b>　　圖1.1 總架構(gòu)圖</b></p><p>　　1.2.3 開(kāi)發(fā)的目的及意義</p><p>

18、　　大學(xué)以來(lái)各門(mén)專業(yè)課程的學(xué)習(xí)，讓我綜合知識(shí)全面提升了很多。為了提高自己的動(dòng)手能力，將知識(shí)靈活的運(yùn)用，此次我設(shè)計(jì)了一個(gè)連連看程序。希望將書(shū)本上所學(xué)的理論知識(shí)與實(shí)際相結(jié)合，通過(guò)本次的程序設(shè)計(jì)使自己在程序的開(kāi)發(fā)和設(shè)計(jì)上有新的認(rèn)識(shí)并能有所提高。也對(duì)于我們以后工作能力的培養(yǎng)具有重要意義。</p><p>　　1.2.4 關(guān)于Jscript</p><p>　　JScript 是 Microsoft

19、 公司對(duì) ECMA 262 語(yǔ)言規(guī)范（ECMAScript 編輯器 3）的一種實(shí)現(xiàn)。除了少數(shù)例外（為了保持向后兼容），JScript 完全實(shí)現(xiàn)了 ECMA 標(biāo)準(zhǔn)。本概述的目的就是引導(dǎo)您學(xué)習(xí)使用 JScript。</p><p>　　JScript 是一種解釋型的、基于對(duì)象的腳本語(yǔ)言。盡管與 C++ 這樣成熟的面向?qū)ο蟮恼Z(yǔ)言相比，JScript 的功能要弱一些，但對(duì)于它的預(yù)期用途而言，JScript 的功能已經(jīng)足夠

20、大了。</p><p>　　JScript 不是其他語(yǔ)言的精簡(jiǎn)版（例如，它只是與 Java 有點(diǎn)模糊而間接的關(guān)系），也不是任何事物的簡(jiǎn)化。不過(guò)，它有其局限性。例如，您不能使用該語(yǔ)言來(lái)編寫(xiě)?yīng)毩⑦\(yùn)行的應(yīng)用程序，并且沒(méi)有對(duì)讀寫(xiě)文件的內(nèi)置支持。此外，JScript 腳本只能在某個(gè)解釋器或“宿主”上運(yùn)行，如 Active Server Pages（ASP）、Internet 瀏覽器或者 Windows 腳本宿主。</

21、p><p>　　JScript 是一種寬松類型的語(yǔ)言。寬松類型意味著您不必顯式定義變量的數(shù)據(jù)類型。事實(shí)上 JScript 更進(jìn)一步。您無(wú)法在JScriot上明確地定義數(shù)據(jù)類型。此外，在大多數(shù)情況下，JScript 將根據(jù)需要自動(dòng)進(jìn)行轉(zhuǎn)換。例如，如果將一個(gè)數(shù)值添加到由文本組成的某項(xiàng)（一個(gè)字符串），該數(shù)值將被轉(zhuǎn)換為文本。</p><p>　　第2章 游戲功能分析</p><p&

22、gt;　　2.1 游戲總體功能分析</p><p>　　整個(gè)游戲區(qū)域是根據(jù)一開(kāi)始初始化時(shí)根據(jù)默認(rèn)的行數(shù)16和列數(shù)9來(lái)繪制表格的。使用系統(tǒng)圖標(biāo)webdings（從asc2的32開(kāi)始）填充其單元格。默認(rèn)時(shí)間是一分鐘。但是這些都可由玩家自行更改。游戲中，選取圖案相同兩張圖片并在條件成立的情況下進(jìn)行消除。在制定的時(shí)間下消除表格中所有圖案即可勝利。</p><p>　　2.2游戲區(qū)域的設(shè)計(jì)實(shí)現(xiàn)<

23、;/p><p>　　游戲區(qū)域是根據(jù)確定的行數(shù)和列數(shù)繪制好的表格。但它沒(méi)有占據(jù)整個(gè)網(wǎng)頁(yè)。</p><p>　　表格的行數(shù)和列數(shù)值越大代表著游戲的難度系數(shù)越大。每一個(gè)單元格放置著隨機(jī)產(chǎn)生的系統(tǒng)圖標(biāo)，這些圖案零散的分布在表格的任意單元格里，并且每一個(gè)圖案都一定會(huì)有與之對(duì)應(yīng)的完全一樣的另外一張圖片存在該表格中。避免了游戲發(fā)生不可能勝利的情況。</p><p>　　經(jīng)過(guò)前面的描述

24、和分析后，我們簡(jiǎn)要的概括開(kāi)始游戲的初始化過(guò)程。在js中把表格的行數(shù)列數(shù)圖片數(shù)以及時(shí)間都作為全局變量，以便在整個(gè)游戲過(guò)程中值都可以依據(jù)程序而變化：</p><p>　　var RowMax = 42;//列數(shù)</p><p>　　var ColMax = 22;//行數(shù)</p><p>　　var PicMax = 26;//總圖片數(shù)</p><p

25、>　　var TimeMax = 60;//總時(shí)間</p><p>　　var OffSet = 32;//使用系統(tǒng)圖標(biāo)webdings（從asc2的32開(kāi)始）</p><p>　　var PicAry = new Array(PicMax); </p><p>　　var Matrix = new Array(RowMax);</p><

26、p>　　時(shí)間的顯示是用的是一個(gè)div：</p><p>　　<DIV id="timebar" ></DIV></p><p>　　在頁(yè)面被載入的時(shí)候就進(jìn)行了初始化：</p><p>　　document.getElementById("timebar").style.width = 600;//

27、時(shí)間條 設(shè)置其寬度為600px.</p><p>　　document.getElementById("timebar").style.backgroundColor = "blue";//設(shè)置其一開(kāi)始的顏色為藍(lán)色。</p><p>　　當(dāng)隨著游戲的時(shí)間一秒一秒的逝去，類似進(jìn)度條的時(shí)間欄會(huì)顯示不同的顏色來(lái)提示玩家對(duì)應(yīng)花掉的時(shí)間。</p>

28、<p>　　如果玩家成功過(guò)關(guān)，進(jìn)度條會(huì)將其顏色恢復(fù)成白色。</p><p><b>　　2.3初始化工作</b></p><p>　　繪制表格并對(duì)表格各單元格放置的圖片數(shù)據(jù)空間內(nèi)的進(jìn)行成對(duì)性的隨機(jī)布局。這些功能都在頁(yè)面載入的setTab()函數(shù)里實(shí)現(xiàn)。其代碼如下：</p><p><b>　　//繪制表格</b>

29、;</p><p>　　TmpStr = "<table border=\"1\">";</p><p>　　for(j=0; j<ColMax; j++){</p><p>　　TmpStr += "<tr>";</p><p>　　for(i=0;

30、i<RowMax; i++){</p><p>　　//繪制單元格的同時(shí)給它加上onclick事件。調(diào)用CheckP()函數(shù)，當(dāng)用戶單擊該點(diǎn)時(shí)，對(duì)該點(diǎn)進(jìn)行檢測(cè)。 </p><p>　　TmpStr += "<td onclick=\"CheckP(this,"+i+","+j+");\" wid

31、th=\"32\" height=\"40\"><font face=\"webdings\" size=\"6\" "</p><p>　　if(0==i || 0==j || (RowMax-1)==i || (ColMax-1)==j){</p><p>　　Matrix[i][j]

32、 = 0;//邊界填充空單元格，連線用。</p><p>　　TmpStr += ">";</p><p><b>　　}</b></p><p><b>　　else{</b></p><p><b>　　TmpInt--;</b></p>

33、;<p>　　Matrix[i][j] = 1 + Math.floor( PicMax * Math.random() );</p><p>　　if(TmpInt<PicNum){//圖片配對(duì)</p><p>　　for(k=1; k<=PicMax; k++){</p><p>　　if(PicAry[k]){</p>

34、<p>　　Matrix[i][j] = k;</p><p><b>　　break;</b></p><p><b>　　}</b></p><p><b>　　}</b></p><p><b>　　}</b></p><

35、;p>　　//更新該類圖片的奇偶數(shù)數(shù)組，以及單張圖片總數(shù)</p><p>　　if(PicAry[Matrix[i][j]]){</p><p>　　PicAry[Matrix[i][j]] = 0;</p><p><b>　　PicNum--;</b></p><p><b>　　}</b>

36、;</p><p><b>　　else{</b></p><p>　　PicAry[Matrix[i][j]] = 1;</p><p><b>　　PicNum++;</b></p><p><b>　　}</b></p><p><b>

37、　　//填寫(xiě)顏色</b></p><p>　　var tmp_color = Math.floor(0xFFFF00*Matrix[i][j]/PicMax).toString(16);</p><p>　　TmpStr += "color=\"#";</p><p>　　for(k=tmp_color.length; k&

38、lt;6; k++) TmpStr += "0";</p><p>　　TmpStr += tmp_color;</p><p>　　TmpStr += "\">";</p><p>　　//添圖片（webdings圖標(biāo)）</p><p>　　TmpStr += String.fromC

39、harCode(Matrix[i][j] + OffSet);//不同的圖片</p><p><b>　　}</b></p><p>　　TmpStr += "</font></td>";</p><p><b>　　}</b></p><p>　　Tmp

40、Str += "</tr>";</p><p><b>　　}</b></p><p>　　TmpStr += "</table>";</p><p>　　游戲的初始化工作由函數(shù)setTab()實(shí)現(xiàn)，表格區(qū)域中的每一個(gè)放置圖片的單元格都由兩個(gè)個(gè)二維數(shù)組中的元素來(lái)定義。數(shù)組中X表示圖

41、片在游戲區(qū)域的橫坐標(biāo)Y表示圖片在游戲區(qū)域的縱坐標(biāo)。所以在游戲的初始化工作中也要對(duì)數(shù)組進(jìn)行初始化，如果在數(shù)組元素所表示的區(qū)域不可以存放圖片則負(fù)值為0，如果在該區(qū)域可以存放圖片則負(fù)值為-1。</p><p>　　2.4圖案方塊的連接消除判斷</p><p>　　在檢驗(yàn)玩家選擇的兩張圖片能被消除的時(shí)候，它們必須符合：</p><p>　　一：就是選中的兩個(gè)單元格的圖案必須

42、相同。</p><p>　　二：在選中的兩個(gè)單元格之間沒(méi)有障礙物阻礙的情況下，能用若干個(gè)平行或垂直垂直的直線線段連接起來(lái)。</p><p>　　三：將兩個(gè)單元格連接起來(lái)的直線線段的折點(diǎn)不能超過(guò)兩個(gè)(連接線由x軸和y軸的平行線組成)。</p><p>　　圖片可以消除的連接方式分為三種：</p><p>　　一：直連方式。該方式為三種消除圖片的

43、連接方式中最簡(jiǎn)單的一種。在直接連接方式中，必須要求所選定的兩個(gè)單元格在同一水平直線上或者在同一垂直線上，并且兩個(gè)單元格之間沒(méi)有任何其它圖案單元格。</p><p>　　二：一個(gè)折點(diǎn)的平行垂直線段連接。在該情況下，所選定的兩個(gè)方塊如果通過(guò)折點(diǎn)的方式連接，那么對(duì)折點(diǎn)來(lái)說(shuō)，每個(gè)折點(diǎn)必定有且至少有一個(gè)坐標(biāo)(x或y)是和其中一個(gè)目標(biāo)點(diǎn)相同的，即折點(diǎn)必定在兩個(gè)目標(biāo)點(diǎn)所在的x方向或y方向的直線上。此外，對(duì)于一個(gè)折點(diǎn)連接的情況，

44、折點(diǎn)應(yīng)該為第一個(gè)選中方塊的橫向線或縱向線與第二個(gè)選中方塊的縱向線和橫向線相交而得出。</p><p>　　三：兩個(gè)折點(diǎn)的平行垂直線段連接。在該情況下的兩個(gè)折點(diǎn)所連成的直線與兩物件的直接連線可以構(gòu)成平行線，因此可以根據(jù)這個(gè)規(guī)律，將這條水平線在游戲區(qū)域允許的條件上下移動(dòng)，然后通過(guò)判斷整條帶垂直折線點(diǎn)的曲線之間有無(wú)障礙物方式來(lái)確定是否可以連同。</p><p>　　它的具體消除圖片實(shí)例如圖2.1

45、所示。</p><p>　　圖2.1 消除圖片實(shí)例</p><p>　　它的設(shè)計(jì)流程圖如圖2.2所示。</p><p>　　圖2.2 判斷消除圖片流程圖</p><p>　　首先，對(duì)簡(jiǎn)單直接連的情況進(jìn)行判斷，看它是否符合條件，假如不能，再加深一個(gè)級(jí)別的復(fù)雜度，對(duì)一個(gè)折點(diǎn)的情況進(jìn)行判斷，依次類推。在函數(shù)LineX()、LineY()、Lin

46、kP()中分別對(duì)所有可能連線的情況采用枚舉法進(jìn)行判定。其三個(gè)函數(shù)的實(shí)現(xiàn)分別如下：</p><p>　　//X方向連線。（有起點(diǎn)，無(wú)終點(diǎn)）</p><p>　　function LineX(x, y, xt){</p><p>　　for( i=x; i!=xt; (x<xt? i++: i--) ){</p><p>　　if(Matr

47、ix[i][y]){</p><p>　　return false;</p><p><b>　　}</b></p><p><b>　　}</b></p><p>　　return true;</p><p><b>　　}</b></p>

48、<p>　　//Y方向連線。（有起點(diǎn)，無(wú)終點(diǎn)）</p><p>　　function LineY(x, y, yt){</p><p>　　for( i=y; i!=yt; (y<yt? i++: i--) ){</p><p>　　if(Matrix[x][i]){</p><p>　　return false;<

49、/p><p><b>　　}</b></p><p><b>　　} </b></p><p>　　return true;</p><p><b>　　}</b></p><p>　　//2個(gè)點(diǎn)被3條線連接</p><p>　　

50、function LinkP(P1,P2){ </p><p>　　//P1在P2下方，交換P1、P2</p><p>　　if(P1.y>P2.y){</p><p><b>　　P3=P1;</b></p><p><b>　　P1=P2;</b></p><p>

51、<b>　　P2=P3;</b></p><p><b>　　}</b></p><p>　　//P1下方1點(diǎn)（y+1）先縱向再橫向是否可連接。（因?yàn)槠瘘c(diǎn)P1不為空，所以檢測(cè)其下方一點(diǎn)）</p><p>　　if( LineY(P1.x, (P1.y+1), P2.y) && LineX(P1.x, P2.

52、y, P2.x) ) return true;</p><p>　　//P1先向左側(cè)連接，再檢測(cè)該點(diǎn)再縱向再橫向是否可連接P2。</p><p>　　for(j=(P1.x-1); j>=0; j--){</p><p>　　if(Matrix[j][P1.y]) break;</p><p>　　if( LineY(j, (P1.y+

53、1), P2.y) && LineX(j, P2.y, P2.x) ) return true;</p><p><b>　　}</b></p><p>　　//P1先向右側(cè)連接，再檢測(cè)該點(diǎn)再縱向再橫向是否可連接P2。</p><p>　　for(j=(P1.x+1); j<RowMax; j++){</p>

54、<p>　　if(Matrix[j][P1.y]) break;</p><p>　　if( LineY(j, (P1.y+1), P2.y) && LineX(j, P2.y, P2.x) ) return true;</p><p><b>　　}</b></p><p>　　//P1在P2右側(cè)，交換P1、P2&

55、lt;/p><p>　　if(P1.x>P2.x){</p><p><b>　　P3=P1;</b></p><p><b>　　P1=P2;</b></p><p><b>　　P2=P3;</b></p><p><b>　　}<

56、/b></p><p>　　if( LineX((P1.x+1), P1.y, P2.x) && LineY(P2.x, P1.y, P2.y) ) return true;</p><p>　　for(j=(P1.y-1); j>=0; j--){</p><p>　　if(Matrix[P1.x][j]) break;</p&g

57、t;<p>　　if( LineX((P1.x+1), j, P2.x) && LineY(P2.x, j, P2.y) ) return true;</p><p><b>　　}</b></p><p>　　for(j=(P1.y+1); j<ColMax; j++){</p><p>　　if(Matr

58、ix[P1.x][j]) break;</p><p>　　if( LineX((P1.x+1), j, P2.x) && LineY(P2.x, j, P2.y) ) return true;</p><p><b>　　}</b></p><p>　　return false;</p><p><

59、;b>　　}</b></p><p>　　當(dāng)玩家單機(jī)表格中的單元格時(shí)，產(chǎn)生鼠標(biāo)事件，調(diào)用函數(shù)checkP()檢測(cè)該點(diǎn)，函數(shù)代碼如下：</p><p><b>　　//單擊檢測(cè)該點(diǎn)</b></p><p>　　function CheckP(o,x,y){</p><p>　　if(Matrix[x][y

60、]){//非空</p><p>　　if(null==TmpObj){//之前無(wú)選中圖片</p><p>　　TmpObj = o;//選中該圖片</p><p>　　TmpObj.borderColor = "0000FF";//改變邊框顏色</p><p>　　P[0].x = x;//保存該點(diǎn)</p>

61、<p>　　P[0].y = y;</p><p><b>　　}</b></p><p>　　else if(o!=TmpObj){//非同一點(diǎn)</p><p>　　TmpObj.borderColor = "FFFFFF";//恢復(fù)邊框顏色</p><p>　　P[1].x = x;//

62、保存該點(diǎn)</p><p>　　P[1].y = y;</p><p>　　if(Matrix[P[0].x][P[0].y]==Matrix[P[1].x][P[1].y]){//同一類圖片</p><p>　　if(LinkP(P[0],P[1])){//可以連接</p><p>　　Matrix[P[0].x][P[0].y] = 0;/

63、/清零</p><p>　　Matrix[P[1].x][P[1].y] = 0;</p><p>　　TmpObj.innerHTML = "";//原圖片顯示為空</p><p>　　o.innerHTML = "";</p><p>　　TmpTime++;//獎(jiǎng)勵(lì)時(shí)間</p>&l

64、t;p>　　TmpInt--;//剩余圖片減1</p><p>　　if(!TmpInt){//剩余圖片為0</p><p>　　clearInterval(st);//清除倒計(jì)時(shí) document.getElementById("container").innerHTML = "";</p&

65、gt;<p>　　document.getElementById("timeleft").innerHTML = ""; document.getElementById("timebar").style.backgroundColor = "white";</p><p>　

66、　alert("恭喜您過(guò)關(guān)！");</p><p><b>　　}</b></p><p><b>　　}</b></p><p><b>　　}</b></p><p>　　TmpObj = null;//無(wú)選中圖片</p><p>

67、;<b>　　}</b></p><p><b>　　}</b></p><p><b>　　else{</b></p><p>　　if(TmpObj){TmpObj.borderColor = "FFFFFF";}//恢復(fù)邊框顏色</p><p>　　T

68、mpObj = null;//無(wú)選中圖片</p><p><b>　　}</b></p><p><b>　　}</b></p><p>　　在函數(shù)shoutime()中，用于更新時(shí)間，依據(jù)所剩下的時(shí)間控制時(shí)間進(jìn)度條的顏色等功能。其代碼如下所示：</p><p>　　function ShowTim

69、e(){</p><p>　　TmpTime--;//時(shí)間減1</p><p><b>　　//更新時(shí)間</b></p><p>　　document.getElementById("timeleft").innerHTML = +TmpTime;</p><p>　　document.getElem

70、entById("timebar").style.width = Math.floor(600*TmpTime/TimeMax);</p><p>　　if( (TimeMax/TmpTime)>4 ){</p><p>　　document.getElementById("timebar").style.backgroundColor = &

71、quot;red";</p><p><b>　　}</b></p><p>　　else if( (TimeMax/TmpTime)>2 ){</p><p>　　document.getElementById("timebar").style.backgroundColor = "yellow&

72、quot;;</p><p><b>　　}</b></p><p>　　if(!TmpTime){//剩余時(shí)間為0</p><p>　　clearInterval(st);//清除倒計(jì)時(shí)</p><p>　　document.getElementById("container").innerHTML

73、 = "";//清屏</p><p>　　document.getElementById("timeleft").innerHTML = "";</p><p>　　document.getElementById("timebar").style.backgroundColor = "white&qu

74、ot;;</p><p>　　alert("時(shí)間到!!!");</p><p><b>　　}</b></p><p><b>　　}</b></p><p><b>　　2.5 游戲的勝利</b></p><p>　　游戲的勝利主要

75、跟游戲區(qū)域的圖片和時(shí)間條相關(guān)。在規(guī)定的時(shí)間內(nèi)判斷游戲區(qū)域所剩的圖片張數(shù)，一旦剩下圖片的個(gè)數(shù)為0了，則彈出游戲勝利的窗口。規(guī)定的時(shí)間一秒一秒減少直至為0了，若剩余圖片數(shù)不為0則該局游戲是失敗了的。不過(guò)連連看不涉及到money,不會(huì)像其他游戲一樣還需金幣復(fù)活。但也因?yàn)檫@樣，有時(shí)候會(huì)覺(jué)得這個(gè)游戲沒(méi)挑戰(zhàn)性。</p><p><b>　　2.6游戲的重置</b></p><p>

76、;　　當(dāng)玩家覺(jué)得時(shí)間不夠，或者想加大游戲的難度級(jí)別時(shí)，輸入相應(yīng)的行列數(shù)，圖片數(shù)，以及時(shí)間后單擊“重置”按鈕就等同于載入用戶配置好的游戲。</p><p><b>　　第3章 系統(tǒng)測(cè)試</b></p><p><b>　　3.1程序運(yùn)行測(cè)試</b></p><p>　　當(dāng)用戶運(yùn)行程序時(shí)將會(huì)出現(xiàn)該界面。它的運(yùn)行后的結(jié)果如圖3.

77、1所示。</p><p>　　圖3.1 游戲運(yùn)行的主界面</p><p>　　用戶可自行輸入表格的行數(shù)，列數(shù)，圖片數(shù)，時(shí)間數(shù)，例如用戶自行輸入行數(shù)為25，列數(shù)為10，圖片數(shù)為12，時(shí)間為540秒后，點(diǎn)擊重置按鈕開(kāi)始游戲，其運(yùn)行界面如圖3.2所示：</p><p>　　圖3.2 重新繪制的游戲界面</p><p>　　3.2 游戲失敗提示界面&

78、lt;/p><p>　　當(dāng)玩家在游戲本身設(shè)置的規(guī)定時(shí)間內(nèi)沒(méi)有把游戲區(qū)域的所有圖片消除，則游戲失敗。它的界面如圖3.2所示。</p><p>　　圖3.2 游戲失敗提示界面</p><p>　　3.3 游戲成功提示界面</p><p>　　如果玩家在游戲規(guī)定的時(shí)間內(nèi)消除了游戲區(qū)域的所有圖片則游戲勝利,游戲成功時(shí)的提示界面如圖3.3所示。</p

79、><p>　　3.3游戲成功提示界面</p><p><b>　　總 結(jié)</b></p><p>　　此刻的課程設(shè)計(jì)讓我感觸頗多，過(guò)程曲折可謂一語(yǔ)難盡。在此期間我也失落過(guò)，也曾一度熱情高漲。從開(kāi)始時(shí)滿富盛激情到最后汗水背后的復(fù)雜心情，點(diǎn)點(diǎn)滴滴無(wú)不令我回味無(wú)長(zhǎng)。不僅僅是知識(shí)上的學(xué)習(xí)和掌握，同時(shí)也讓我明白了很多做人的道理。</p>&l

80、t;p>　　通過(guò)這次連連看游戲的設(shè)計(jì)使我懂得了理論與實(shí)際相結(jié)合是很重要的。只有把所學(xué)的理論知識(shí)和實(shí)踐相結(jié)合起來(lái)，從理論中得出得出結(jié)論，才能真正的提高自己的水平，從而提高自己的實(shí)際動(dòng)手能力和獨(dú)立思考的能力。在沒(méi)有做課程設(shè)計(jì)以前覺(jué)得課程設(shè)計(jì)知識(shí)對(duì)這幾年來(lái)所學(xué)知識(shí)的單純總結(jié)，但是通過(guò)這次做課程設(shè)計(jì)發(fā)現(xiàn)自己的看法有點(diǎn)太片面。課程設(shè)計(jì)不僅是對(duì)前面所學(xué)知識(shí)的一種檢驗(yàn)，而且也是對(duì)自己能力的一種提高。</p><p>　　

81、對(duì)我而言，知識(shí)上的收獲重要，精神上的豐收更加可喜。挫折是一份財(cái)富，經(jīng)歷是一份擁有。學(xué)習(xí)是一個(gè)長(zhǎng)期積累的過(guò)程，在以后的工作、生活中都應(yīng)該不斷的學(xué)習(xí)，努力提高自己知識(shí)和綜合素質(zhì)。</p><p>　　很感謝我們的指導(dǎo)老師XX老師對(duì)我們的悉心指導(dǎo)，還有同學(xué)的熱情幫助。在設(shè)計(jì)過(guò)程中，我通過(guò)查閱大量有關(guān)資料，與同學(xué)交流經(jīng)驗(yàn)和自學(xué)，并向老師請(qǐng)教等方式，使自己學(xué)到了不少知識(shí)，也經(jīng)歷了不少艱辛，但收獲同樣巨大。整個(gè)游戲的設(shè)計(jì)開(kāi)發(fā)

82、下來(lái)我懂得了許多東西，培養(yǎng)了我獨(dú)立工作的能力，樹(shù)立了對(duì)自己今后工作能力的信心，相信會(huì)對(duì)今后的學(xué)習(xí)工作生活有非常重要的影響。雖然這個(gè)設(shè)計(jì)做的不夠好，游戲功能遠(yuǎn)遠(yuǎn)不夠強(qiáng)大，但是我覺(jué)得我進(jìn)步了，在設(shè)計(jì)過(guò)程中所學(xué)習(xí)到的東西是這次課程設(shè)計(jì)的最大收獲和財(cái)富。成功是一場(chǎng)和自己的比賽，相對(duì)于我來(lái)說(shuō)，我認(rèn)為這次的課程設(shè)計(jì)我進(jìn)步了，成長(zhǎng)了，所以，我成功了。</p><p><b>　　參 考 文 獻(xiàn)</b>&l

83、t;/p><p>　　[1] David Flanagan著，張銘澤等譯 JavaScript權(quán)威指南（第四版），機(jī)械工業(yè)出版社，2002</p><p>　　[2] 戚文靜編，深入淺出JavaScript(中文版). 清華大學(xué)出版社,2006</p><p>　　[3] 徐功文編，JavaScript DOM高級(jí)程序設(shè)計(jì) 人民郵電出版社，2010</p>