本文實例講述了JavaScript實現五子棋游戲的方法。分享給大家供大家參考，具體如下：
最近半個月一直在看深入的學習JavaScript，里面有很多重點和難點，比如閉包、詞法分析、面向對象等。今天給大家分享一個由JavaScript編寫的五子棋游戲，主要用到JavaScript的面向對象、事件委托、閉包等知識，還是挺有分量的，正好可以檢測學習的成果。
老規矩，先上圖，再說話。
效果圖：
五子棋素材圖：
代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>HTML五子棋游戲</title> <link rel="stylesheet" href=""> <script> //五子棋的構造函數 function Game(){ this.isWin = false;//游戲是否結束標志 } //閉包計棋器 Game.cnt = (function(){ var curr = 'black'; return function(){ var tmp = curr; if(curr == 'black'){ curr = 'white'; }else{ curr = 'black'; } return tmp; } })(); //下棋函數 Game.xiaQi = function(g){ //判斷選擇的位置是否已經下過棋了 if(this.style.backgroundImage.indexOf('gif') >= 0){ alert('這里已經下過棋了'); return ; } var color = Game.cnt(); this.style.backgroundImage = "url(./images/"+color+".gif)"; Game.judge.call(this,color,g);//判定函數 } //判定游戲是否結束 Game.judge = function(color,g){ var tds = document.getElementsByTagName('td'); //獲取當前棋子所下的位置 var curr = {x:this.cellIndex,y:this.parentElement.rowIndex,color:color}; var line = ['','','',''];//表示當前棋子的橫、豎、左斜、右斜方向的棋子 //遍歷255個棋格，看看是否能贏 for(var i=0,tmp={};i<tds.length;i++){ tmp = {x:tds[i].cellIndex,y:tds[i].parentElement.rowIndex,color:'0'}; if(tds[i].style.backgroundImage.indexOf('black') >= 0){ tmp.color = 'b'; }else if(tds[i].style.backgroundImage.indexOf('white') >= 0){ tmp.color = 'w'; } //獲取當前棋子的橫向其他棋子的坐落情況 if(curr.y == tmp.y){ line[0] += tmp.color; } //獲取當前棋子的豎向其他棋子的坐落情況 if(curr.x == tmp.x){ line[1] += tmp.color; } //獲取當前棋子的左斜方向其他棋子的坐落情況 if(curr.x+curr.y == tmp.x+tmp.y){ line[2] += tmp.color; } //獲取當前棋子的右斜方向其他棋子的坐落情況 if(curr.x-tmp.x == curr.y-tmp.y){ line[3] += tmp.color; } } color = color == 'black'?'bbbbb':'wwwww'; //判斷是否五子連珠 for(var i=0;i<line.length;i++){ if(line[i].indexOf(color) >=0){ alert('你贏了'); g.isWin = true; break; } } } //頁面加載完成 window.onload = function(){ var g = new Game(); document.getElementsByTagName('table')[0].onclick = function(ev){ //判斷是否已經贏得游戲 if(g.isWin){ alert('此局已結束，請重新開始'); return; } Game.xiaQi.call(ev.srcElement,g);//下棋 } } </script></head><style> table{ border-collapse:collapse; width:540px; height:540px; border:solid 1px blue; margin:auto; background-image: url('./images/background.gif');}</style><body><table> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table></body></html>今天不知道怎么搞的，寫博客的時候上傳不了圖片，還好我機智，把圖片存到GitHub上，好了，來講代碼。首先，我必須先說明一下，我覺得代碼還有很大的優化空間，感興趣的同學可以繼續研究。
實現思路：首先創建一個表格，共15行，15列，把背景改成棋盤的圖片，給這個table添加onclick事件，這里使用到了事件委托，事件委托我在之前的文章有介紹過，感興趣的同學可以去看看。去調用xiaQi函數，在下棋函數中，先判斷選擇的位置是否已經下過棋了，使用閉包獲取下一個棋子的顏色，然后調用judge函數，在函數中先獲取當前棋子所下的位置，遍歷255個棋格，看看是否能贏，判斷是否五子連珠，如果有則游戲結束。
PS：這里再為大家推薦另一款本站的js版五子棋游戲供大家參考（其AI相對簡單一些）
在線五子棋游戲：
http://tools.VeVB.COm/games/wuziqi
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數據結構與算法技巧總結》、《JavaScript數學運算用法總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》及《JavaScript遍歷算法與技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
