jQuery實作的五子棋遊戲實例_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作的五子棋遊戲實例_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:55 PM

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7751

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1293

PHP教程

1234

Related knowledge

Nvgpucomp64.dll導致Windows PC遊戲崩潰; Mar 26, 2024 am 08:20 AM

如果Nvgpucomp64.dll導致遊戲經常崩潰，這裡提供的解決方案可能會對您有所幫助。這種問題通常是由於過時或損壞的顯示卡驅動程式、遊戲檔案損壞等原因引起的。修復這些問題可以幫助您解決遊戲崩潰的困擾。 Nvgpucomp64.dll檔案與NVIDIA顯示卡關聯。當這個檔案崩潰時，你的遊戲也會崩潰。這通常發生在《LordsoftheFallen》、《LiesofP》、《RocketLeague》和《ApexLegends》等遊戲中。 Nvgpucomp64.dll使WindowsPC上的遊戲崩潰如果N

超級人類（superpeople）遊戲下載安裝方法介紹 Mar 30, 2024 pm 04:01 PM

超級人類（superpeople）遊戲可以透過steam客戶端下載遊戲，這款遊戲的大小在28G左右，下載到安裝通常需要一個半小時，以下為大家帶來具體的下載安裝教學！新的申請全球封閉測試方法1)在Steam商店（steam客戶端下載）搜尋“SUPERPEOPLE”2)點擊“SUPERPEOPLE”商店頁面下方的“請求SUPERPEOPLE封閉測試訪問權限”3)點擊請求訪問權限按鈕後，將在Steam庫中可確認「SUPERPEOPLECBT」遊戲4)在「SUPERPEOPLECBT」中點選安裝按鈕並下

win11蜘蛛紙牌在哪 win11玩蜘蛛紙牌遊戲的方法 Mar 01, 2024 am 11:37 AM

在玩夠3A大作以及手遊的小夥伴們，是不是想重溫一下兒時的電腦遊戲呀？那我們一起在windows11中尋找蜘蛛紙牌吧！點選介面上的開始選單，點選「所有應用」按鈕；點選「所有應用」。找到並選擇“MicrosoftSolitaireCollection”，這是微軟的紙牌系列遊戲應用程式；紙牌系列遊戲選擇。載入完成後，進入選擇介面，找到“蜘蛛紙牌”；選擇“蜘蛛紙牌”。雖然介面有些許變化，但還是以前的

華碩發表 BIOS 更新，提升英特爾第 13/14 代處理器遊戲穩定性 Apr 20, 2024 pm 05:01 PM

本站4月20日消息，華碩公司近日發布了BIOS更新，改善了英特爾第13/14代處理器運行遊戲時崩潰等不穩定情況。本站先前報導，玩家回饋的問題包括運行萬代南夢宮格鬥遊戲《鐵拳8》PC演示版時，即便電腦擁有充足的記憶體和顯存，也會出現系統崩潰並提示記憶體不足的錯誤訊息。類似的崩潰問題也出現在《戰地風雲2042》、《遺跡2》、《要塞英雄》、《墮落之主》、《霍格華茲之遺》以及《TheFinals》等多款遊戲中。 RAD公司今年2月發布長文，解釋遊戲崩潰問題是BIOS設定、英特爾處理器的高時脈頻率和高功耗共同

Win11玩遊戲怎麼停用輸入法 Mar 15, 2024 pm 02:40 PM

最近有一些小夥伴反映自己在打遊戲的過程中，常常會把輸入法按出來，非常的影響遊戲體驗，這裡小編就給大家詳細介紹一下Win11玩遊戲禁用輸入法的方法，有需要的小夥伴可以來看看。停用方法：1、右鍵右下角工作列中的輸入法圖標，選擇清單中的"語言首選項"。 2、進入到新的介面後，點擊其中的"新增首選的語言"選項。 3.在彈出的視窗中，選擇"英文(美國)"。 4、再點擊"下一步"。 5、隨後根據需求選擇是否安裝一些可選項。 6、然後點選"安裝"，等待安裝完成。 7.然後點選右下角的輸入法狀態欄，選擇剛安裝的"英文(

為 PS5 Pro 鋪路，《無人深空》更新代碼「驚現」遊戲機開發代號「Trinity」及畫質設定檔 Jul 22, 2024 pm 01:10 PM

本站7月22日消息，外媒twistedvoxel在《無人深空》最新的「世界第一部分」更新代碼中發現了傳聞中PS5的開發代號「Trinity」及相關畫質配置文件，佐證了索尼有望近期推出PS5Pro機種。雖然《無人深空》在近期的更新中已為遊戲加強了畫質表現，但仍有不少玩家認為這可能是HelloGames為新機型所提前鋪路，根據最新的圖形預設，在PS5Pro下這款遊戲的動態解析度縮放從0.6增加到0.8，這代表遊戲平均解析度更高，一些圖形細節從「High」級別升級到「Ultra」級別，不過由於每款遊戲

絕地求生FPS最佳化設定,吃雞PUBG遊戲幀率最佳化 Jun 19, 2024 am 10:35 AM

絕地求生遊戲幀率優化，提升遊戲的流暢度和效能方法：更新顯示卡驅動程式：確保您的電腦上安裝了最新的顯示卡驅動程式。這有助於優化遊戲效能並修復可能存在的兼容性問題。降低遊戲設定：將遊戲中的圖形設定調整為較低的水平，例如降低解析度、減少特效和陰影等。這會減輕計算機的負擔並提高幀率。關閉不必要的後台程式：在遊戲運行時，關閉其他不必要的後台程式和進程，以釋放系統資源並提高遊戲效能。清理硬碟空間：確保您的硬碟有足夠的可用空間。刪除不需要的文件和程序，清理臨時文件和回收站等。關閉垂直同步（V-Sync）：在遊戲