JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版的五子棋游戲
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版五子棋游戲的具體代碼,供大家參考,具體內(nèi)容如下
根據(jù)畢老師的HTML+CSS+JavaScript教程和下載的一些文檔介紹自己在手機(jī)上寫出來的一個(gè)簡(jiǎn)單五子棋,很簡(jiǎn)單的功能,許多功能都沒有實(shí)現(xiàn),寫的過程中也遇到很多問題,現(xiàn)在的代碼中也存在一些問題,比如電腦下棋時(shí)沒有下到最右邊和最下邊,改來改去也還沒試出電腦下最右邊和最下邊一排的情況,但每一個(gè)字符都是自己敲出來的,清楚他們的功能,還是很有成就感的!先看下概貌吧!
上代碼
<html> ? <head><!--頭部標(biāo)簽開始--> ? <title> New Document </title> ?? ??? ? <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> ?? ? <style type="text/css"> ?? ?/*CSS區(qū)域*/ table{ ?? ??? ?border: red 2px solid; ?? ??? ?border-collapse: collapse; ?? ??? ?text-align: center; ?? ?} td,th{ ?? ??? ?border: red 1px solid; ?? ??? ?padding: 5, 10, 5, 10; ?? ?} </style> ? <script type="text/javascript"> ?? ?/*javascript區(qū)域*/ var BOARD_SIZE = 9; var board = new Array(); var s = ""; ? function play() { ?? ?if (board.length != 0) ?? ?{ ?? ??? ?alert("游戲已經(jīng)開始了,點(diǎn)擊“重新開始”開始新游戲"); ?? ??? ?return; ?? ?} ?? ?init(); ?? ?show(); } ? function init() { //?? ?s = ""; ?? ?board = new Array() ?? ?for (var i=0; i<BOARD_SIZE; i++) ?? ?{ //?? ??? ?s += ((i+1)+' '); ?? ??? ?board[i] = new Array(); ?? ??? ?for (var j=0; j<BOARD_SIZE; j++) ?? ??? ?{ ?? ??? ??? ?board[i][j] = "┼"; //?? ??? ??? ?s += board[i][j]; ?? ??? ?} //?? ??? ?s += "<br />"; ?? ?} //?? ?s += " "; //?? ?for (var k=1; k<10; k++) ?? ?{ //?? ??? ?s += " "+k;?? ? ?? ?} ?? ?//alert(s); } ? function getBoard() { ?? ?return board; } ? //var flag = false;?? ?//電腦沒下呢 ?電腦調(diào)用setChess又執(zhí)行了computerDo ? function setChess(pos, chessMan) { ?? ?if (!pos) ?? ?{ ?? ??? ?return; ?? ?} ?? ?board[pos[0]][pos[1]] = chessMan; ?? ?show(); ?? ? ?? ?if (chessMan=='●') ?? ?{ ?? ??? ?computerDo(); ?? ?} ?? ?/* ?? ?if (flag) ?? ?{ ?? ??? ?return; ?? ?} ?? ?flag = false; ?? ??? ?if (!flag) ?? ?{ ?? ??? ?computerDo();?? ? ?? ?} ?? ?else ?? ??? ?flag = false; ?? ?*/ } ? function computerDo() { ?? ?var x = parseInt(Math.random()*(BOARD_SIZE)); ?? ?var y = parseInt(Math.random()*(BOARD_SIZE)); ?? ?alert("Computer:"+x+"---"+y); ?? ?while (!checkPos(x+"", y+"") || hasChess(x-1,y-1)) ?? ?{ ?? ??? ?x = parseInt(Math.random()*(BOARD_SIZE)); ?? ??? ?y = parseInt(Math.random()*(BOARD_SIZE)); ?? ??? ?alert("Computer:"+x+"---"+y); ?? ?} ?? ?var pos = [x-1, y-1]; ?? ?setChess(pos, "○"); } ? function show() { ?? ?s = ""; ?? ?var node = document.getElementById("boardspan"); ?? ?for (var i=0; i<BOARD_SIZE; i++) ?? ?{ ?? ??? ?s += ((i+1)+' '); ?? ??? ?for (var j=0; j<BOARD_SIZE; j++) ?? ??? ?{ ?? ??? ??? ?s += board[i][j]; ?? ??? ?} ?? ??? ?s += "<br />"; ?? ?} ?? ?s += " "; ?? ?for (var k=1; k<10; k++) ?? ?{ ?? ??? ?s += " "+k;?? ? ?? ?} ?? ?node.innerHTML = s; } ? function rePlay() { ?? ?init(); ?? ?show(); } ? ? function getPos() { ?? ?var pos = new Array(); ?? ?var x = document.getElementById("posx").value; ?? ?var y = document.getElementById("posy").value; ?? ? ?? ?if (!checkPos(x, y)) ?? ?{ ?? ??? ?alert("輸入位置有誤,請(qǐng)重新輸入!"); ?? ??? ?return; ?? ?} ? ?? ?pos[0] = x - 1; ?? ?pos[1] = y - 1; ? ?? ?if (hasChess(pos[0], pos[1])) ?? ?{ ?? ??? ?alert("該位置已有棋子,請(qǐng)重新輸入!"); ?? ??? ?return; ?? ?} ?? ?/*/防止電腦調(diào)用setChess時(shí)自動(dòng)調(diào)用 ?? ?document.getElementById("posx").value = ""; ?? ?document.getElementById("posy").value = ""; ?? ?*/ ?? ?//alert(pos[0] + "::" + pos[1]); ?? ?return pos; } ? function hasChess(x, y) { ?? ?return (board[x][y]!='┼')?true:false; } ? function checkPos(x, y) {?? ? ?? ?var reg = "^[1-9]{1}$"; ?? ?return (x.match(reg)&&y.match(reg))?true:false; } </script> ? </head><!--頭部標(biāo)簽結(jié)束--> ? <body><!--主體標(biāo)簽開始--> ?? ?<!--注釋區(qū)域--> <table> <th colspan=3 style="font-size:24; color:green">五子棋</th> <tr> ?? ?<td colspan=3> ?? ?<span id="boardspan"> ?? ?棋盤顯示區(qū) ?? ?</span> ?? ?</td> </tr> <tr> ?? ?<td rowspan=2>落子位置</td> ?? ?<td>橫向:<input type="text" id="posx" size=4 /></td> ?? ?<td rowspan=2><input type="button" value="確定" οnclick="setChess(getPos(), '●')"</td> ?? ?<tr> ?? ??? ?<td>豎向:<input type="text" id="posy" size=4 /></td> ?? ?</tr> </tr> <tr> ?? ?<th><input type="button" value="開始游戲" οnclick="play()" /></th> ?? ?<th colspan=2><input type="button" value="重新開始" οnclick="rePlay()" /></th> </tr> ? </table> ? ? </body><!--主體標(biāo)簽結(jié)束--> ? </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
如何通過js實(shí)現(xiàn)圖片預(yù)覽功能【附實(shí)例代碼】
如何通過js實(shí)現(xiàn)圖片預(yù)覽功能呢?下面小編就為大家?guī)硪黄胘s實(shí)現(xiàn)圖片預(yù)覽功能。給大家做個(gè)參考吧,一起跟隨小編過來看看2016-03-03根據(jù)服務(wù)器時(shí)間作為起始,顯示時(shí)鐘的小程序
一般的網(wǎng)頁(yè)都有這種功能:在頁(yè)面上動(dòng)態(tài)顯示當(dāng)前時(shí)間,這個(gè)的實(shí)現(xiàn)也很簡(jiǎn)單,基本上一行代碼就實(shí)現(xiàn)了2009-06-06javascript與webservice的通信實(shí)現(xiàn)代碼
關(guān)于javascript與webservice的通信,從理論上來說實(shí)現(xiàn)應(yīng)該不難,主要是將服務(wù)器端的xml數(shù)據(jù)進(jìn)行一個(gè)簡(jiǎn)單的處理然后以一種適當(dāng)?shù)男问秸宫F(xiàn)成來。2010-12-12微信小程序?qū)崿F(xiàn)簡(jiǎn)單購(gòu)物車小功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單購(gòu)物車小功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理
這篇文章主要為大家介紹了JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12javascript中的prototype屬性實(shí)例分析說明
一說到prototype很多人可能第一個(gè)想到的是著名的prototype.js框架,當(dāng)然我們今天說的不是它,而是Javascript中的prototype屬性,一般都被翻譯為“原型”。這是一個(gè)比較特殊的屬性,Javascript中的繼承一般都依賴這屬性實(shí)現(xiàn)。2010-08-08