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程序设计有所帮助。