用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

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Python实现数据可视化图表生成(适合新手入门)

《Python实现数据可视化图表生成(适合新手入门)》在数据科学和数据分析的新时代,高效、直观的数据可视化工具显得尤为重要,下面:本文主要介绍Python实现数据可视化图表生成的相关资料,文中通过... 目录前言为什么需要数据可视化准备工作基本图表绘制折线图柱状图散点图使用Seaborn创建高级图表箱线图热

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

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)三、社交媒体集成四、移动