本文实例讲述了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程序设计有所帮助。
新闻热点
疑难解答
