用html5+制作一个象棋,如何用html5做出象棋的图表

2023-11-01 07:20

本文主要是介绍用html5+制作一个象棋,如何用html5做出象棋的图表,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

满意答案

02ae427d08e371d7e90d5b995e828d6d.png

changingin

2015.06.17

02ae427d08e371d7e90d5b995e828d6d.png

采纳率:47%    等级:10

已帮助:869人

AI.init = function(pace){

var bill = AI.historyBill || com.gambit; //开局库

if (bill.length){

var len=pace.length;

var arr=[];

//先搜索棋谱

for (var i=0;i< bill.length;i++){

if (bill[i].slice(0,len)==pace) {

arr.push(bill[i]);

}

}

if (arr.length){

var inx=Math.floor( Math.random() * arr.length );

AI.historyBill = arr ;

return arr[inx].slice(len,len+4).split("");

}else{

AI.historyBill = [] ;

}

}

//如果棋谱里面没有,人工智能开始运作

var initTime = new Date().getTime();

AI.treeDepth=play.depth;

//AI.treeDepth=4;

AI.number=0;

AI.setHistoryTable.lenght = 0

var val=AI.getAlphaBeta(-99999 ,99999, AI.treeDepth, com.arr2Clone(play.map),play.my);

//var val = AI.iterativeSearch(com.arr2Clone(play.map),play.my)

if (!val||val.value==-8888) {

AI.treeDepth=2;

val=AI.getAlphaBeta(-99999 ,99999, AI.treeDepth, com.arr2Clone(play.map),play.my);

}

//var val = AI.iterativeSearch(com.arr2Clone(play.map),play.my);

if (val&&val.value!=-8888) {

var man = play.mans[val.key];

var nowTime= new Date().getTime();

com.get("moveInfo").innerHTML='

AI搜索结果:

最佳着法:'+

com.createMove(com.arr2Clone(play.map),man.x,man.y,val.x,val.y)+

'
搜索深度:'+AI.treeDepth+'
搜索分支:'+

AI.number+'个
最佳着法评估:'+

val.value+'分'+

'
搜索用时:'+

(nowTime-initTime)+'毫秒'

return [man.x,man.y,val.x,val.y]

}else {

return false;

}

}

复制代码

//迭代加深搜索着法

AI.iterativeSearch = function (map, my){

var timeOut=100;

var initDepth = 1;

var maxDepth = 8;

AI.treeDepth=0;

var initTime = new Date().getTime();

var val = {};

for (var i=initDepth; i<=maxDepth; i++){

var nowTime= new Date().getTime();

AI.treeDepth=i;

AI.aotuDepth=i;

var val = AI.getAlphaBeta(-99999, 99999, AI.treeDepth , map ,my)

if (nowTime-initTime > timeOut){

return val;

}

}

return false;

}

//取得棋盘上所有棋子

AI.getMapAllMan = function (map, my){

var mans=[];

for (var i=0; i

for (var n=0; n

var key = map[i][n];

if (key && play.mans[key].my == my){

play.mans[key].x = n;

play.mans[key].y = i;

mans.push(play.mans[key])

}

}

}

return mans;

}

复制代码

复制代码

//取得棋谱所有己方棋子的着法

AI.getMoves = function (map, my){

var manArr = AI.getMapAllMan (map, my);

var moves = [];

var foul=play.isFoul;

for (var i=0; i

var man = manArr[i];

var val=man.bl(map);

for (var n=0; n

var x=man.x;

var y=man.y;

var newX=val[n][0];

var newY=val[n][1];

//如果不是长将着法

if (foul[0]!=x || foul[1]!=y || foul[2]!=newX || foul[3]!=newY ){

moves.push([x,y,newX,newY,man.key])

}

}

}

return moves;

}

//A:当前棋手value/B:对手value/depth:层级

AI.getAlphaBeta = function (A, B, depth, map ,my) {

//var txtMap= map.join();

//var history=AI.historyTable[txtMap];

// if (history && history.depth >= AI.treeDepth-depth+1){

// return history.value*my;

//}

if (depth == 0) {

return {"value":AI.evaluate(map , my)}; //局面评价函数;

}

var moves = AI.getMoves(map , my ); //生成全部走法;

//这里排序以后会增加效率

for (var i=0; i < moves.length; i++) {

//走这个走法;

var move= moves[i];

var key = move[4];

var oldX= move[0];

var oldY= move[1];

var newX= move[2];

var newY= move[3];

var clearKey = map[ newY ][ newX ]||"";

map[ newY ][ newX ] = key;

delete map[ oldY ][ oldX ];

play.mans[key].x = newX;

play.mans[key].y = newY;

if (clearKey=="j0"||clearKey=="J0") {//被吃老将,撤消这个走法;

play.mans[key] .x = oldX;

play.mans[key] .y = oldY;

map[ oldY ][ oldX ] = key;

delete map[ newY ][ newX ];

if (clearKey){

map[ newY ][ newX ] = clearKey;

// play.mans[ clearKey ].isShow = false;

}

return {"key":key,"x":newX,"y":newY,"value":8888};

//return rootKey;

}else {

var val = -AI.getAlphaBeta(-B, -A, depth - 1, map , -my).value;

//val = val || val.value;

//撤消这个走法;

play.mans[key] .x = oldX;

play.mans[key] .y = oldY;

map[ oldY ][ oldX ] = key;

delete map[ newY ][ newX ];

if (clearKey){

map[ newY ][ newX ] = clearKey;

//play.mans[ clearKey ].isShow = true;

}

if (val >= B) {

//将这个走法记录到历史表中;

//AI.setHistoryTable(txtMap,AI.treeDepth-depth+1,B,my);

return {"key":key,"x":newX,"y":newY,"value":B};

}

if (val > A) {

A = val; //设置最佳走法;

if (AI.treeDepth == depth) var rootKey={"key":key,"x":newX,"y":newY,"value":A};

}

}

}

//将这个走法记录到历史表中;

//AI.setHistoryTable(txtMap,AI.treeDepth-depth+1,A,my);

if (AI.treeDepth == depth) {//已经递归回根了

if (!rootKey){

//AI没有最佳走法,说明AI被将死了,返回false

return false;

}else{

//这个就是最佳走法;

return rootKey;

}

}

return {"key":key,"x":newX,"y":newY,"value":A};

}

//奖着法记录到历史表

AI.setHistoryTable = function (txtMap,depth,value,my){

AI.setHistoryTable.lenght ++;

AI.historyTable[txtMap] = {depth:depth,value:value}

}

//评估棋局 取得棋盘双方棋子价值差

AI.evaluate = function (map,my){

var val=0;

for (var i=0; i

for (var n=0; n

var key = map[i][n];

if (key){

val += play.mans[key].value[i][n] * play.mans[key].my;

}

}

}

//val+=Math.floor( Math.random() * 10); //让AI走棋增加随机元素

//com.show()

//z(val*my)

AI.number++;

return val*my;

}

//评估棋局 取得棋盘双方棋子价值差

AI.evaluate1 = function (map,my){

var val=0;

for (var i in play.mans){

var man=play.mans[i];

if (man.isShow){

val += man.value[man.y][man.x] * man.my;

}

}

//val+=Math.floor( Math.random() * 10); //让AI走棋增加随机元素

//com.show()

//z(val*my)

AI.number++;

return val*my;

00分享举报

这篇关于用html5+制作一个象棋,如何用html5做出象棋的图表的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/321402

相关文章

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F