Maison > Article > interface Web > Exemple de jeu de backgammon implémenté par jQuery_jquery
Exemple de jeu de backgammon implémenté par jQuery_jquery
- WBOYoriginal
- 2016-05-16 15:55:111468parcourir
本文实例讲述了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程序设计有所帮助。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：implémentation jquery d'un simple effet de menu accordéon example_jqueryArticle suivant：implémentation jquery d'un simple effet de menu accordéon example_jquery
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript