利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈
前言
本文主要介绍利用开源引擎 lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程。
游戏规则
玩过五子棋的都应该知道五子棋的规则，这里就简单介绍其规则。
1、传统五子棋的棋具与围棋大致相同，棋子分为黑白两色，棋盘为15×15，棋子放置于棋盘线交叉点上。两人对局，各执一色，轮流下一子，先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。
2、由于传统五子棋具有不公平性，而现代五子棋禁手规则令一部分棋手望而怯步。于是产生了职业制传统五子棋，职业制传统五子棋虽然准备麻烦，但胜在简单公平，而且难度增加，久而习之，思维活跃。
规则如下：
1、准备19×19棋盘两张。
2、黑白子数目必须满足。
3、第一回合先手只能下一手，其余回合可以下连续两手。
4、后手每回合均可以下连续两手。
5、每颗子所投的棋盘没有限制。
6、只要任意一方在两个棋盘上且同一个回合上连为五子为胜。
7、若任意一方在两个棋盘上且不同一个回合上连为五子为负。
8、若任意一方在不足两个棋盘上且同一个回合上连为五子为负。
综合效应
“禁手”思维+“交换”思维+“井字游戏”原理=连珠
如：RIF规则、Sakata规则、Yamaguchi规则Tarannikov规则等。
为了方面起见，这里只考虑传统打法，也是大多数人喜欢的打法。
用到的术语
活五：任意方向的相同颜色棋子连成5个棋子
活四：任意方向的相同颜色棋子连成4个棋子，且两边都没有其他棋子
冲四：任意方向的相同颜色棋子连成4个棋子，且一边没有其他棋子
活三：任意方向的相同颜色棋子连成3个棋子，且两边都没有其他棋子
死三：任意方向的相同颜色棋子连成3个棋子，且一边没有其他棋子
活二：任意方向的相同颜色棋子连成2个棋子，且两边都没有其他棋子
死二：任意方向的相同颜色棋子连成2个棋子，且一边没有其他棋子
单一：任意方向的相同颜色棋子连成1个棋子，且两边都没有其他棋子
开发思路
好了，废话不多说，接下来就介绍一下开发思路，首先要明确，当玩家每下一个棋子的时候，如何能教会电脑下棋，也就是如何让电脑知道往哪个地方下子。这里就需要让电脑扫描整个棋盘，分析整个棋型，通过计算得出哪个地方最有可能赢，或者最有可能阻止玩家赢。那么，就需要给每个棋型拟定一个分数，每次玩家下子的时候，就扫描棋盘，给定棋盘每个位置空子（即没有棋子的位置）的分值，然后就下分值最高的那个点。
比如：如果这个地方如果电脑下子，可能构成活四，那么分数+5000，如果玩家可能构成活四，分数+2000。
详细过程
我表达不是很好，说的很笼统，直接贴上代码吧。
初始化棋盘
//背景层、格子层、棋子层
var backLayer,cellLayer,chessLayer;
var BOARD_SIZE = 15;//棋盘格子数量(15*15);
var OFFSET = 40;//格子偏移量
var CELL_WIDTH = 40;//行宽
var CENTER = 8;
var array = new Array();//记录每个格子是否有棋子0表示空位1表示己方棋子2表示地方棋子
var isPlay = true;//是否该玩家下棋
var C_STEP = 0,P_STEP = 0;//AI和玩家走的棋数 function main(){
backLayer = new LSprite();
backLayer.graphics.drawRect(1,"darkorange",[0,0,LGlobal.width,LGlobal.height],true,"darkorange");
addChild(backLayer);
var textFiled;
//画棋盘周围的数字和字母
for(var i = 0;i<BOARD_SIZE;i++){
textField = new LTextField();
textField.color = "black";
textField.x = OFFSET >> 2;
textField.y = OFFSET+(CELL_WIDTH*(i));
textField.font="Arial";
textField.size = 8;
textField.text = BOARD_SIZE - i;
backLayer.addChild(textField);
textField = new LTextField();
textField.color = "black";
textField.x = OFFSET+(CELL_WIDTH*i);
textField.y = ((OFFSET*3) >> 2) + OFFSET + CELL_WIDTH * (BOARD_SIZE-1);
textField.font = "Arial";
textField.size = 8;
textField.text = String.fromCharCode(65+i);
backLayer.addChild(textField);
}
//AI初始化
AI.init(); //画出棋盘
drawBoard(); chessLayer = new LSprite();
backLayer.addChild(chessLayer); //按钮
//var resetButton = new LButtonSample1("重玩");
//resetButton.x = 10;
//resetButton.y = 500;
//backLayer.addChild(resetButton);
//resetButton.addEventListener(LMouseEvent.MOUSE_UP,reset); backLayer.addEventListener(LMouseEvent.MOUSE_MOVE,onmove);
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,ondown); }; //function reset(){ //}; //画棋盘
function drawBoard(){
//画竖线条
for(var i = 0;i < BOARD_SIZE;i++){
backLayer.graphics.drawLine(2,"#000000",[i*CELL_WIDTH+OFFSET,OFFSET,i*CELL_WIDTH+OFFSET,(BOARD_SIZE-1)*CELL_WIDTH+OFFSET]);
}
//画横线条
for(var i = 0;i < BOARD_SIZE;i++){
backLayer.graphics.drawLine(2,"#000000",[OFFSET,i*CELL_WIDTH+OFFSET,(BOARD_SIZE-1)*CELL_WIDTH+OFFSET,i*CELL_WIDTH+OFFSET]);
} //画棋盘上的小圆点
drawStar(CENTER,CENTER);
drawStar((BOARD_SIZE + 1) >> 2,(BOARD_SIZE + 1) >> 2);
drawStar((BOARD_SIZE + 1) >> 2,((BOARD_SIZE + 1) * 3) >> 2);
drawStar(((BOARD_SIZE + 1)*3) >> 2,(BOARD_SIZE + 1) >> 2);
drawStar(((BOARD_SIZE + 1)*3) >> 2,((BOARD_SIZE + 1) * 3) >> 2);
}; function drawStar(cx,cy){
var x = (cx - 1)*CELL_WIDTH+OFFSET;
var y = (cy - 1) * CELL_WIDTH+OFFSET;
backLayer.graphics.drawArc(0,"#000000",[x,y,4,0,Math.PI * 2],true,"#000000");
};
//在棋盘指定位置画出黑白棋子
function drawChess(cx,cy,color){
//棋子欲放入格子的中心坐标
var x = cx * CELL_WIDTH + OFFSET;
var y = cy * CELL_WIDTH + OFFSET;
var R = CELL_WIDTH >> 1;//棋子半径，为格子宽度/2
chessLayer.graphics.drawArc(0,color,[x,y,R,0,Math.PI * 2],true,color);
isPlay = false;
};
//画出鼠标点击后棋子欲落下的区域
function drawCell(cx,cy){
if(cx >= 0 && cx < BOARD_SIZE && cy >= 0 && cy < BOARD_SIZE){
if(cellLayer){
cellLayer.die();
cellLayer.removeAllChild();
backLayer.removeChild(cellLayer);
cellLayer = null;
}
cellLayer = new LSprite();
backLayer.addChild(cellLayer);
var length = CELL_WIDTH >> 1;
cx = cx * CELL_WIDTH + OFFSET;
cy = cy * CELL_WIDTH + OFFSET;
cellLayer.graphics.drawLine(2,"red",[cx-length,cy - length,cx-length/2,cy-length]);
cellLayer.graphics.drawLine(2,"red",[cx-length,cy - length,cx-length,cy-length/2]);
cellLayer.graphics.drawLine(2,"red",[cx+length,cy - length,cx+length/2,cy-length]);
cellLayer.graphics.drawLine(2,"red",[cx+length,cy - length,cx+length,cy-length/2]);
cellLayer.graphics.drawLine(2,"red",[cx+length,cy + length,cx+length,cy+length/2]);
cellLayer.graphics.drawLine(2,"red",[cx+length,cy + length,cx+length/2,cy+length]);
cellLayer.graphics.drawLine(2,"red",[cx-length,cy + length,cx-length/2,cy+length]);
cellLayer.graphics.drawLine(2,"red",[cx-length,cy + length,cx-length,cy+length/2]);
}
};
由于五子棋的核心算法就是AI部分，所以这部分初始化棋盘的代码大可不必深究，接下来就是AI算法。直接贴代码吧
var AI = AI || {};
//代表每个方向
AI.direction = {
TOP:1,
BOTTOM:2,
LEFT:3,
RIGHT:4,
LEFT_TOP:5,
LEFT_BOTTOM:6,
RIGHT_TOP:7,
RIGHT_BOTTOM:8
};
//初始化
AI.init = function(){
//初始化数组为0
for(var i = 0;i < BOARD_SIZE;i++){
array[i] = new Array();
for(var j = 0;j < BOARD_SIZE;j++){
array[i][j] = 0;
}
}
};
//AI棋型分析
AI.analysis = function(x,y){
//如果为第一步则，在玩家棋周围一格随机下棋，保证每一局棋第一步都不一样
if(P_STEP == 1){
return this.getFirstPoint(x,y);
}
var maxX = new Array(),
maxY = new Array(),
maxWeight = 0,
max = new Array(),
min = new Array(),
i, j, tem;
for (i = BOARD_SIZE - 1; i >= 0; i--) {
for (j = BOARD_SIZE; j >= 0; j--) {
if (array[i][j] !== 0) {
continue;
}
tem = this.computerWeight(i, j,2);
if (tem > maxWeight) {
maxWeight = tem;
maxX = i;
maxY = j;
}
}
}
return new Point(maxX,maxY);
};
//下子到i，j X方向 结果: 多少连子 两边是否截断
AI.putDirectX = function (i, j, chessColor) {
var m, n,
nums = 1,
side1 = false,//两边是否被截断
side2 = false;
for (m = j - 1; m >= 0; m--) {
if (array[i][m] === chessColor) {
nums++;
}
else {
if (array[i][m] === 0) {
side1 = true;//如果为空子，则没有截断
}
break;
}
}
for (m = j + 1; m < BOARD_SIZE; m++) {
if (array[i][m] === chessColor) {
nums++;
}
else {
if (array[i][m] === 0) {
side2 = true;
}
break;
}
}
return {"nums": nums, "side1": side1, "side2": side2};
},
//下子到i，j Y方向 结果
AI.putDirectY = function (i, j, chessColor) {
var m, n,
nums = 1,
side1 = false,
side2 = false;
for (m = i - 1; m >= 0; m--) {
if (array[m][j] === chessColor) {
nums++;
}
else {
if (array[m][j] === 0) {
side1 = true;
}
break;
}
}
for (m = i + 1; m < BOARD_SIZE; m++) {
if (array[m][j] === chessColor) {
nums++;
}
else {
if (array[m][j] === 0) {
side2 = true;
}
break;
}
}
return {"nums": nums, "side1": side1, "side2": side2};
},
//下子到i，j XY方向 结果
AI.putDirectXY = function (i, j, chessColor) {
var m, n,
nums = 1,
side1 = false,
side2 = false;
for (m = i - 1, n = j - 1; m >= 0 && n >= 0; m--, n--) {
if (array[m][n] === chessColor) {
nums++;
}
else {
if (array[m][n] === 0) {
side1 = true;
}
break;
}
}
for (m = i + 1, n = j + 1; m < BOARD_SIZE && n < BOARD_SIZE; m++, n++) {
if (array[m][n] === chessColor) {
nums++;
}
else {
if (array[m][n] === 0) {
side2 = true;
}
break;
}
}
return {"nums": nums, "side1": side1, "side2": side2};
},
AI.putDirectYX = function (i, j, chessColor) {
var m, n,
nums = 1,
side1 = false,
side2 = false;
for (m = i - 1, n = j + 1; m >= 0 && n < BOARD_SIZE; m--, n++) {
if (array[m][n] === chessColor) {
nums++;
}
else {
if (array[m][n] === 0) {
side1 = true;
}
break;
}
}
for (m = i + 1, n = j - 1; m < BOARD_SIZE && n >= 0; m++, n--) {
if (array[m][n] === chessColor) {
nums++;
}
else {
if (array[m][n] === 0) {
side2 = true;
}
break;
}
}
return {"nums": nums, "side1": side1, "side2": side2};
},
//计算AI下棋权重
AI.computerWeight = function(i,j,chessColor){
var weight = (BOARD_SIZE - 1) - (Math.abs(i - BOARD_SIZE >> 1) + Math.abs(j - BOARD_SIZE >> 1)), //基于棋盘位置权重（越靠近棋盘中心权重越大）
pointInfo = {}, //某点下子后连子信息
//x方向
pointInfo = this.putDirectX(i, j, chessColor);
weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重
pointInfo = this.putDirectX(i, j, chessColor-1);
weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重
//y方向
pointInfo = this.putDirectY(i, j, chessColor);
weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重
pointInfo = this.putDirectY(i, j, chessColor-1);
weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重
//左斜方向
pointInfo = this.putDirectXY(i, j, chessColor);
weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重
pointInfo = this.putDirectXY(i, j, chessColor-1);
weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重
//右斜方向
pointInfo = this.putDirectYX(i, j, chessColor);
weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);//AI下子权重
pointInfo = this.putDirectYX(i, j, chessColor-1);
weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);//player下子权重
return weight;
};
//权重方案 活：两边为空可下子，死：一边为空
AI.weightStatus = function (nums, side1, side2, isAI) {
var weight = 0;
switch (nums) {
case 1:
if (side1 && side2) {
weight = isAI ? 15 : 10; //一
}
break;
case 2:
if (side1 && side2) {
weight = isAI ? 100 : 50; //活二
}
else if (side1 || side2) {
weight = isAI ? 10 : 5; //死二
}
break;
case 3:
if (side1 && side2) {
weight = isAI ? 500 : 200; //活三
}
else if (side1 || side2) {
weight = isAI ? 30 : 20; //死三
}
break;
case 4:
if (side1 && side2) {
weight = isAI ? 5000 : 2000; //活四
}
else if (side1 || side2) {
weight = isAI ? 400 : 100; //死四
}
break;
case 5:
weight = isAI ? 100000 : 10000; //五
break;
default:
weight = isAI ? 500000 : 250000;
break;
}
return weight;
};
//判断是否胜出，胜返回true否则返回false
//思路：从下子的地方为中心朝4个方向判断，若连成五子，遇空子或敌方棋子则改变方向则胜出
//不用全盘遍历，因为只有下子的地方才会有胜出的可能
//flag标识AI还是玩家1为玩家2为AI
AI.isAIWin = function(x,y,flag){
var count1 = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
//左右判断
for(var i = x;i >= 0;i--){
if(array[i][y]!=flag){
break;
}
count1++;
}
for(var i = x+1;i<BOARD_SIZE;i++){
if(array[i][y] != flag){
break;
}
count1++;
}
//上下判断
for(var i = y;i>=0;i--){
if(array[x][i] != flag){
break;
}
count2++;
}
for(var i = y+1;i<BOARD_SIZE;i++){
if(array[x][i] != flag){
break;
}
count2++;
}
//左上右下判断
for(var i = x,j=y;i>=0&&j>=0;i--,j--){
if(array[i][j] != flag){
break;
}
count3++;
}
for(var i = x+1,j=y+1;i<BOARD_SIZE&&j<BOARD_SIZE;i++,j++){
if(array[i][j] != flag){
break;
}
count3++;
}
//右上左下判断
for(var i =x,j=y;i>=0&&j<BOARD_SIZE;i--,j++){
if(array[i][j] != flag){
break;
}
count4++;
}
for(var i =x+1,j=y-1;i<BOARD_SIZE&&j>=0;i++,j--){
if(array[i][j] != flag){
break;
}
count4++;
}
var win = 0;//AI是否赢了
if(count1>=5||count2>=5||count3>=5||count4>=5){
win = flag;
}
return win;
};
//AI第一步棋
//参数x,y为玩家第一步棋的坐标
AI.getFirstPoint = function(x,y){
var point = new Point(x,y);
if(x < 3 || x > BOARD_SIZE - 3 || y < 3 || y > BOARD_SIZE - 3){
point.x = BOARD_SIZE >> 1;
point.y = BOARD_SIZE >> 1;
}else{
var direction = random({
min:1,
max:8
});
switch(direction){
case this.direction.TOP:
point.y = y - 1;
break;
case this.direction.BOTTOM:
point.y = y + 1;
break;
case this.direction.LEFT:
point.x = x - 1;
break;
case this.direction.RIGHT:
point.x = x + 1;
break;
case this.direction.LEFT_TOP:
point.x = x - 1;
point.y = y - 1;
break;
case this.direction.LEFT_BOTTOM:
point.x = x - 1;
point.y = y + 1;
break;
case this.direction.RIGHT_TOP:
point.x = x + 1;
point.y = y - 1;
break;
case this.direction.RIGHT_BOTTOM:
point.x = x + 1;
point.y = y + 1;
break;
default:
point.x = x - 1;
point.y = y - 1;
break;
}
}
return point;
};
function Point(x,y){
var self = this;
self.x = x;
self.y = y;
};
最后的效果如下：
好了，整个五子棋就开发完成了，有任何疑问，我们可以交流交流
利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈的更多相关文章
- 如何在我们项目中利用开源的图表（js chart）
最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长! 这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一些开源的chart时候,是使 ...
- 如何利用开源解码项目开发js视频解码的web应用 系列
介绍web上开发视频业务相关程序的技术演变历程 https://www.cnblogs.com/maoliangwu/articles/12046495.html 介绍ffmpeg asm.js we ...
- 开源HTML5游戏引擎Kiwi.js 1.0正式发布
Kiwi.js是由GameLab开发的一款全新的开源HTML5 JavaScript游戏引擎.在经过一年多的开发和测试之后,终于在日前正式发布了Kiwi.js 1.0版本. 其创始人Dan Milwa ...
- 国内开源html5游戏引擎全收录
本文引自<国内开源html5游戏引擎全收录> 游戏开发这潭水太深,英文水平太差,不敢看国外的, 而且这几年国内技术水平也挺高了不少,特别是JS方面.(我个人感觉) 最近看了几个国产的js游 ...
- html5游戏引擎-Pharse.js学习笔记（一）
1.前言 前几天随着flappy bird这样的小游戏的火爆,使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发.研究过两个个比较成熟的html5游戏引擎,感觉用引擎还是要方便一些.所 ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- HTML5游戏开发引擎Pixi.js完全入门手册（一）框架简介及框架结构分析，作者思路剖析
前言: 最近无聊在淘宝弄了个小店,打算做一个兼职.遇到一个客户,要我帮忙拷贝一个html5游戏.. 我这人有一个习惯,拿到自己没见过的东西.都会去研究一番.去网上查了下发现,资料都是英文版.感觉极度不 ...
- HTML5游戏开发引擎Pixi.js新手入门讲解
在线演示 本地下载 这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
随机推荐
- [置顶] 63行代码完美实现html5 贪吃蛇游戏
以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下.就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好.估计需要先补习下js,这个只是个人的建议,不一 ...
- JSU省赛队员选拔赛个人赛1（Coin Change、Fibbonacci Number、Max Num、单词数、无限的路、叠筐）
JSU省赛队员选拔赛个人赛1 一.题目概述: A.Coin Change(暴力求解.动态规划) B.Fibbonacci Number(递推求解) C.Max Num(排序.比较) D.单词数 ...
- hibernate 配置文件 和一个 id生成类BaseEntity.java 和一个hibernate工具类 HibernatUtils.java
package com; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate ...
- CentOS 6.2 二进制安装apache2.4.3出现configure: error: APR-util not found. Please read the documentation的解决方
CentOS 6.2 二进制安装apache2.4.3出现configure: error: APR-util not found. Please read the documentation的解决方 ...
- Vbox视图热键
Vbox屏幕热键 在Vbox中一般host主键会默觉得"右Ctrl",例如以下图所看到的,在选择自己主动调整窗体后,"视图"选项栏会消失.这时若想更改视图设置能 ...
- Swift - 纯代码实现页面segue跳转，以及参数传递
下面通过一个例子说明如何在代码中进行segue页面的切换,以及参数的传递. 样例功能如下: 1,主界面中是一个列表(这个列表是在代码中实现) 2,点击列表项时,界面会切换到详情页面,同时传递改列表 ...
- javascript笔记整理（回调、递归、内置顶层函数）
1.回调函数(通过函数的指针来调用函数,把一个函数的指针做为另一个函数的参数,当调用这个参数的时候,这个函数就叫做回调函数) a.通过指针来调用 function aa(a,b,fun){ retur ...
- 使用ssh远程执行命令批量导出数据库到本地（转）
前天正在跟前端的同事调试功能.服务器开好,模拟的玩家登录好,就在倒计时.这时突然运营的同事跑过来说要统计几个服务器玩家的一些情况,也就是需要从几个服的数据库导出部分玩家的数据.好吧,我看了一下时间,1 ...
- json 模块
JSON: JSON-JSON (JavaScript 对象标记) 编码/解码 简介: use JSON; # imports encode_json, decode_json, to_json an ...
- 环保创业的可行之道——Leo鉴书上66
近2年,我一直在关注不同企业的发展历程,国内的国外的.看他们成功其中的共性与特性.<蚯蚓创业记>无疑给我开了扇窗--环保企业的怎样发展与壮大.读者还能从书里读出普通年轻人坚持自己梦想最终得 ...