jQuery实现的五子棋游戏实例

本文实例讲述了jQuery实现的五子棋游戏。分享给大家供大家参考。具体如下：
这是一款非常不错的代码，就是人工智能方面差了一点
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>五子棋</title><style type="text/css">div{margin:0;padding:0;}div.board{width:561px; height:561px; border:1px solid #ccc; margin:0 auto;}div.board div{ width:31px; height:31px; border:1px solid #ccc; float:left; cursor:pointer; background-repeat:no-repeat; }div.board .person { background-image:url（"images/1/files/demo/white.jpg"）}div.board .machine{ background-image:url（"images/1/files/demo/black.jpg"）}div.board .person_star{background-image:url（"images/1/files/demo/white_star.jpg"）}div.board .machine_star{background-image:url（"images/1/files/demo/black_star.jpg"）}input.ipt{ display:block; margin:0 auto; margin-top:8px;width:70px}</style></head><body><div class="board" id="board"></div><input type="button" value="开始游戏" onclick="initGame（）;this.value="重新开始"" class="ipt"/><script type="text/javascript">var TRANSVERSE = 16;var VERTICAL = 16;var LEFT = 1;var RIGHT = 2;var TOP = 3;var BOTTOM = 4;var LEFT_TOP = 5;var LEFT_BOTTOM = 6;var RIGHT_TOP = 7;var RIGHT_BOTTOM = 8;var Chess = function（）{ var owner = ""; var victory = false; this.getOwner = function（）{return owner;}; this.setOwner = function（value）{owner = value;}; this.getVictory = function（）{ return victory;} this.setVictory = function（value）{ victory = value; } }var Board = function（）{ var chessBoard = []; var isGameOver = false; this.getChess = function（point） {var x = point.x , y = point.y;return chessBoard[y][x]; } this.setChess = function（chess , point） {var x = point.x , y = point.y;chessBoard[y][x] = chess; } this.setVictory = function（points） {for（var i = 0 ; i < points.length ; i ++）{ for（var j = 0 ; j < points[i].length; j ++） {var chess = this.getChess（points[i][j]）;chess.setVictory（true）; }} } this.getAvaiablePoints = function（） {var avaiable = new Array;for（var y = 0 ; y <= VERTICAL ; y ++）{ for（var x = 0 ; x <= TRANSVERSE ; x ++） {if（chessBoard[y][x]） continue;var point = {x : x , y : y};avaiable.push（point）; }}return avaiable; } this.getMap = function（） {var map = {}; for（var y = 0 ; y <= VERTICAL ; y ++） { for（var x = 0 ; x <= TRANSVERSE ; x++）{var chess = chessBoard[y][x]; var value = ""; if（chess） { value = chess.getOwner（）; if（chess.getVictory（）） value += "_star"; } else{ value = ""; } map[ x + "," + y ] = value;} } return map; } this.gameOver = function（） {return isGameOver = true; } this.isGameOver = function（） {return isGameOver; } this.getNextPoint = function（point , direction） {var next = {x : point.x , y : point.y};switch（direction）{ case LEFT :next.x -= 1;break; case RIGHT:next.x += 1;break; case TOP:next.y -= 1;break; case BOTTOM:next.y += 1;break; case LEFT_TOP:next.x-= 1 , next.y-= 1;break; case RIGHT_TOP:next.x += 1 , next.y -= 1;break; case LEFT_BOTTOM:next.x -= 1 , next.y += 1;break; case RIGHT_BOTTOM:next.x += 1 , next.y += 1;break; default :alert（"方向错误"）;}return next; } var initialize = function（） {for（var i = 0 ; i <= VERTICAL ; i++ ） chessBoard.push（[]）; }initialize（）;}var Compute = function（role）{ var directions = [LEFT , TOP , RIGHT , BOTTOM , LEFT_TOP , LEFT_BOTTOM , RIGHT_TOP , RIGHT_BOTTOM]; var score = 0; var self = this; this._computeScore = function（direction） {throw new Error（"未实现"）; } this._convertToPattern = function（chesslist） {return role.convertToPattern（chesslist） } this.compute = function（point） {score = 0;for（var i = 0, direction ; direction = directions[i++];）{ score += this._computeScore（point , direction）;}} this.getScore = function（refPoint） {return score ; }}var Five = function（role）{ Compute.call（this, role）; var computeScore1 = function（refPoint , direction） {var predefined = "IIII";var chesslist = role.find（refPoint , direction , 4）;var pattern = role.convertToPattern（chesslist）;if（predefined == pattern） return true;return false ; } var computeScore2 = function（refPoint , direction） {var prev = role.find（refPoint , direction , 2）;var next = role.find（refPoint , role.reverseDirection（direction） , 2）;var prevPattern = role.convertToPattern（prev）;var nextPattern = role.convertToPattern（next）;if（prevPattern == "II" && nextPattern == "II"） return true;return false; } var computeScore3 = function（refPoint , direction） {var prev = role.find（refPoint , direction , 3）;var next = role.find（refPoint , role.reverseDirection（direction） , 1）;var prevPattern = role.convertToPattern（prev）;var nextPattern = role.convertToPattern（next）; if（prevPattern == "III" && nextPattern == "I"） return true; return false; } this._computeScore = function（refPoint , direction） {if（computeScore1（refPoint , direction） || computeScore2（refPoint , direction） || computeScore3（refPoint , direction）） return 100000;else return 0; }}var Four_Live = function（role）{ Compute.call（this, role）; this._computeScore = function（refPoint , direction） {var score = 0;var prev = role.find（refPoint , direction , 4）;var next = role.find（refPoint , role.reverseDirection（direction）, 1）;var prevPattern = this._convertToPattern（prev）;var nextPattern = this._convertToPattern（next）;if（prevPattern == "III0" && nextPattern == "0"） score = 10000; return score; }}var Four_Live1 = function（role）{ Compute.call（this, role）; this._computeScore = function（refPoint , direction） {var prev = role.find（refPoint , direction , 3）;var next = role.find（refPoint , role.reverseDirection（direction） , 2）;var prevPattern = this._convertToPattern（prev）;var nextPattern = this._convertToPattern（next）;if（prevPattern == "II0" && nextPattern == "I0"） return 10000;else return 0; }}var Tree_Live = function（role）{ Compute.call（this, role）; this._computeScore = function（refPoint , direction） {var score = 0;var prev = role.find（refPoint , direction , 3）;var next = role.find（refPoint , role.reverseDirection（direction）, 2）;var prevPattern = this._convertToPattern（prev）;var nextPattern = this._convertToPattern（next）;if（prevPattern == "II0" && nextPattern == "00"） score += 1000;return score; }}var Tree_Live1 = function（role）{ Compute.call（this, role）; this._computeScore = function（refPoint , direction） {var prev = role.find（refPoint , direction , 2）;var next = role.find（refPoint , role.reverseDirection（direction）, 3）;var prevPattern = this._convertToPattern（prev）;var nextPattern = this._convertToPattern（next）; if（prevPattern == "I0" && nextPattern == "I00"）return 1000 else return 0;}}var Two_Live = function（role）{ Compute.call（this, role）; this._computeScore = function（refPoint , direction） {var prev = role.find（refPoint , direction , 3）;var next = role.find（refPoint , role.reverseDirection（direction）, 2）; var prevPattern = this._convertToPattern（prev）;var nextPattern = this._convertToPattern（next）; if（prevPattern == "I00" && nextPattern == "00"） return 100; else return 0; }}var One_Live = function（role）{ Compute.call（this, role）; this._computeScore = function（refPoint , direction） {var prev = role.find（refPoint , direction , 3）;var next = role.find（refPoint , role.reverseDirection（direction）, 3）; var prevPattern = this._convertToPattern（prev）;var nextPattern = this._convertToPattern（next）; if（prevPattern == "000" && nextPattern == "000"） return 10; else return 0; }}var Four_End = function（role）{ Compute.call（this, role）; this._computeScore = function（refPoint , direction） {var prev = role.find（refPoint , direction , 3）;var next = role.find（refPoint , role.reverseDirection（direction）, 1）; var prevPattern = this._convertToPattern（prev）;var nextPattern = this._convertToPattern（next）; if（prevPattern == "III" && nextPattern == "0"） return 150; else return 0; }}var Role = function（board）{ var computers = []; var self = this; var isVictory = false; this.isVictory = function（） {return isVictory; } var getScore = function（point） {var score = 0;for（var i = 0 , computer; computer = computers[i++];）{ computer.compute（point）; score += computer.getScore（）;}var result = {score: score , point : point};return result; } var getScoreList = function（） {var result = [];var avaiablePoints = board.getAvaiablePoints（）;for（var i = 0 , point; point = avaiablePoints[i++];） { result.push（getScore（point））;}return result; } this.getCode = function（） {throw new Error（"未实现"）; } this.getPeak = function（） {var scoreInfo = getScoreList（）;scoreInfo.sort（function（a,b）{ return b.score - a.score ;}）;return scoreInfo[0]; }this.convertToPattern = function（chesslist） {var pattern = "";if（！chesslist） return "";for（var i = 0 ; i < chesslist.length ; i ++）{ var chess = chesslist[i]; if（chess == undefined） pattern += "0"; else if（chess.getOwner（） == this.getCode（）） pattern += "I"; else pattern += "Y";}return pattern ; } this.reverseDirection = function（direction） {switch（direction）{ case LEFT : return RIGHT; case RIGHT : return LEFT; case TOP : return BOTTOM; case BOTTOM : return TOP; case LEFT_TOP : return RIGHT_BOTTOM; case RIGHT_BOTTOM : return LEFT_TOP; case RIGHT_TOP : return LEFT_BOTTOM; case LEFT_BOTTOM : return RIGHT_TOP; default : alert（"方向错误"）;} }this._checkGameOver = function（point） {var leftRight = findVictory（point , LEFT）;var topBottom = findVictory（point , TOP）;var leftTopRightBottom = findVictory（point , LEFT_TOP）;var rightTopLeftBottom = findVictory（point , RIGHT_TOP）;var array = [leftRight , topBottom , leftTopRightBottom , rightTopLeftBottom];var victory = [];for（var i = 0 ; i < array.length ; i ++）{ if（array[i].length >= 5） victory.push（array[i]）;}if（victory.length > 0）{ board.gameOver（）; board.setVictory（victory）; isVictory = true;}if（board.getAvaiablePoints（）.length ==0） board.gameOver（）; } var isLicitPoint = function（point） {return point.x >= 0 && point.y >= 0 && point.x <= TRANSVERSE && point.y <= VERTICAL&& board.getChess（point） && board.getChess（point）.getOwner（） == self.getCode（） } var findVictory = function（refPoint , direction） {var reverse = self.reverseDirection（direction）;var result = [];var nextPoint ;var currPoint = {x: refPoint.x , y: refPoint.y};while（true）{ nextPoint = board.getNextPoint（currPoint, direction）; if（！isLicitPoint（nextPoint）） break; currPoint = {x :nextPoint.x , y:nextPoint.y};}while（true）{result.push（currPoint）;nextPoint = board.getNextPoint（currPoint , reverse）; if（！isLicitPoint（nextPoint）） break; currPoint = { x: nextPoint.x , y: nextPoint.y };}return result; } this.find = function（point , direction , deep） {var refPoint = {x: point.x , y : point.y};var result = new Array; var index = 1; var nextPoint; while（index <= deep） { nextPoint = board.getNextPoint（refPoint, direction）;if（nextPoint.x < 0 || nextPoint.y < 0 || nextPoint.x > TRANSVERSE || nextPoint.y > VERTICAL） return null;var chess = board.getChess（nextPoint）;if（chess） chess.point = {x:nextPoint.x , y:nextPoint.y};result.push（chess）;refPoint = nextPoint;index ++; } return result; }var initialize = function（） {computers.push（new Five（self））;computers.push（new Four_Live（self））;computers.push（new Tree_Live（self））;computers.push（new Four_Live1（self））;computers.push（new Tree_Live1（self））;computers.push（new Two_Live（self））;computers.push（new One_Live（self））;computers.push（new Four_End（self））; } initialize（）;}var Machine = function（board, rival）{ Role.call（this, board）; this.setChess = function（） {if（board.isGameOver（）） return;var myPeak = this.getPeak（）;var rivalPeak = rival.getPeak（）;var peak ;if（myPeak.score >= rivalPeak.score） peak = myPeak;else peak = rivalPeak;var chess = new Chess（）;chess.setOwner（this.getCode（））;board.setChess（chess, peak.point）;this._checkGameOver（peak.point）; } this.getCode = function（）{return "machine";}}var Person = function（board , rival）{ Role.call（this, board）; this.setChess = function（x,y） {if（board.isGameOver（）） return;var point = new Object;point.x = x;point.y = y;var chess = new Chess（）chess.setOwner（this.getCode（））;board.setChess（chess, point）;this._checkGameOver（point）; } this.getCode = function（）{ return "person"; }}var UIBase = function（）{ var self = this; this._id = "$UI" + （++ UIBase.index）; this._globalKey = ""; this.getHTML = function（） {return ""; } var setGlobalKey = function（） {var magic = "$UI_Items";self._globalKey = "window."+magic+"."+self._id;window[magic] = window[magic] || {};window[magic][self._id] = self; } var formatHTML = function（html） {html = html.replace（/$$/g, self._globalKey）;html = html.replace（/&&/g,self._id）;return html; }var initUIBase = function（） {setGlobalKey（）; } this.renderHTML = function（） {return formatHTML（this.getHTML（））; } this.getDOM = function（） { var dom = document.getElementById（this._id）return dom; } initUIBase（）;}UIBase.index = 0;var ChessUI = function（board, placeholder）{ UIBase.call（this）; this.setChess = function（）{} this.getHTML = function（） {var html = "";var map = board.getMap（）;for（var key in map）{ var onclick = ""; var className = map[key]; if（className == ""） onclick="$$._setChess（"+ key +"）";html += "<div onclick=""+ onclick +"" class=""+ className +""></div>";}return html; } this.draw = function（） {var html = this.renderHTML（）;document.getElementById（placeholder）.innerHTML = html; } this._setChess = function（x,y） {this.setChess（x,y）; } this.draw（）;}function getMSIEVersion（）{ var regex = /MSIE（[^;]+）/; var userAgent = navigator.userAgent; var result = regex.exec（userAgent）; if（result） return parseInt（result[1]）;}function initGame（）{ var version = getMSIEVersion（）; if（version && version <= 8） {alert（"请使用非IE浏览器（ie9、10除外）进行游戏（google chrome 、firefox等 ）"）;return; } var board = new Board（）; var person = new Person（board）; var machine = new Machine（board, person）; var chessUI = new ChessUI（board, "board"）; chessUI.setChess = function（x,y） {person.setChess（x,y）;machine.setChess（）;chessUI.draw（）;if（board.isGameOver（））{ if（person.isVictory（）） alert（"您获得了胜利"）; else if（machine.isVictory（）） alert（"机器获得了胜利"）; else alert（"游戏结束，胜负未分"）;} } if（Math.floor（Math.random（） * 10） % 2） {alert（"机器执棋"）;machine.setChess（）;chessUI.draw（）; } else {alert（"您执棋"）; }}</script></body></html>
希望本文所述对大家的jQuery程序设计有所帮助。