jQuery实现的五子棋游戏实例
编程学习 2021-07-04 21:48www.dzhlxh.cn编程入门
这篇文章主要介绍了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>
希望本文所述对大家的jQuery程序设计有所帮助。