jQuery實現的五子棋游戲實例

2024-05-06 16:22:26

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery實現的五子棋游戲,以完整實例形式分析了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>