首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现的五子棋游戏实例

Posted in Javascript onJune 13, 2015

本文实例讲述了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程序设计有所帮助。

jQuery实现的五子棋游戏实例

- Author -

不吃皮蛋

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
取选中的radio的值
Jan 11 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
JavaScript模拟push
Mar 06 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
使用javascript解析二维码的三种方式
Nov 11 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 #Javascript
JQuery自动触发事件的方法
Jun 13 #Javascript
JQuery中DOM实现事件移除的方法
Jun 13 #Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 #Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 #Javascript
JQuery中DOM事件绑定用法详解
Jun 13 #Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 #Javascript
介绍信(57) 欢迎词(65) 表扬信(62) 演讲稿(869) 邀请函(127) 事迹材料(636) 辞职信(98) 道歉信(39) 检讨书(456) 证婚词(21)
You might like
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
在Z-Blog中运行代码[html][/html]（纯JS版）
2007/03/25 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
python 编码规范整理
2018/05/05 Python
如何在Cloud Studio上执行Python代码？
2019/08/09 Python
python文件排序的方法总结
2020/09/13 Python
css3中transition属性详解
2014/09/02 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
美国美妆网站：B-Glowing
2016/10/12 全球购物
玩具反斗城西班牙网上商城：ToysRUs西班牙
2017/01/19 全球购物
Tiqets荷兰：出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
STAY JAPAN台湾：预订日本民宿
2018/07/22 全球购物
车间班组长岗位职责
2013/11/13 职场文书
初中生自我鉴定
2014/02/04 职场文书
优秀医生事迹材料
2014/02/12 职场文书
品牌服务方案
2014/06/03 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python