学弟学妹看我文章顺利毕业，基于HTML+Javascript五子棋人机博弈系统设计与实现《记得收藏》

Posted 2021-07-25 苏州程序大白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学弟学妹看我文章顺利毕业，基于HTML+Javascript五子棋人机博弈系统设计与实现《记得收藏》相关的知识，希望对你有一定的参考价值。

学弟学妹看我文章顺利毕业，基于html+javascript五子棋人机博弈系统设计与实现《记得收藏》

目录
🏳️‍🌈1、需求分析
- 😀1.1.1、功能性需求分析
🏳️‍🌈1.2、技术方案
🏳️‍🌈1.3、系统设计
- 😀1.3.1、系统总体结构
- 😃1.3.2、子系统N的结构与功能
🏳️‍🌈1.4、代码设计与实现
- 😀1.4.1、产品界面如下方图
- 😃1.4.2、改名界面如下方图
关注苏州程序大白，持续更新技术分享。谢谢大家支持

🏳️‍🌈1、需求分析

😀1.1.1、功能性需求分析

本系统的主要功能是人机在线进行对弈，能统计下棋的棋数目以及输赢的总数。

能对用户名进行修改，使用vcsode开发，基于win10操作系统开发的在线人机对弈平台，阐述了系统的总体架构，逻辑，并且说明了系统的总体设计的策略。说明了本软件的需求规格。人机五子棋博弈项目，本项目范围。周边项目以及其子项目。包含了用户友好的界面，用户与机器的友好展示，用户下棋，机器人工ai只能应对，以及在线胜负判断功能，并且能有好的修改用户和机器的用户名，统计胜负的场次功能，同时能统计用户以及机器已走的步数。计算机能对棋局进行分析、判断。根据棋局状态来确定机器方的下棋行为。并且计算机能根据棋局状态实时的判断对弈双方的胜负，自动控制双方交替下棋，程序有一个友好的界面呈现给玩家。目前有很多人都在研究五子棋的算法，都希望能够设计出好的程序，使玩游戏的过程能够更加顺畅一些，不要频繁出现系统死机，当然，程序的实现方法有很多种算法，比如:递归算法，二叉树等，现在我所讨论的算法是最基本的算法，但是无论我们用什么样的算法来实现都要保证使我们的游戏更加顺畅,被大多数人群所接受,并且游戏的内容很丰富。

我们现在五子棋程序实现过程中面临的最大问题就是连五终局,连五终局与五局连胜不一样，连五的一方有可能因为违反长连原则而被判为负方。正是五子棋的这个特点使得五子棋的算法变的很难，在其他棋类游戏的设计过程中，很多棋子不用设计算法来限制他的权限和规则,而五子棋确要考虑到对方的活三和冲四而不得不思考自己下一步棋子到底应该放在哪。近些年来五子棋游戏成为了人们的最爱，游戏的下载量很高可以说一直排在前几位，也是人们日常生活中放松娱乐的最爱，特别是最近IT行业的发展，人工智能的实现移动客户端的发展和普及为我们五子棋游戏的发展带来了新的生机，新的高潮，人工智能与五子棋的完美结合是五子棋的又一项重要发展,而我们现在开发的人机对弈更是掀起了五子棋发展的新篇章，为五子棋的发展与传播提供了新的机会，但是机会与挑战并存，我们相信通过我们对五子棋程序的不断优化和完善，五子棋一定会越来越受到大家的欢迎。我国是从20世纪90年代引进五子棋世界流行规则的，此后的十多年的时间里，五子棋在民间迅速普及。北京是五子棋发展最早也最普及的地区，1992年就成立了我国第一个五子棋民间组织——京都五子棋社。在北京的带动下，其他地区也先后成立了五子棋组织，如天津成立了由天津市体育局群体处领导的天津市五子棋工作委员会，河北廊坊市、文安县和黑龙江省大庆市都成立了五子棋协会，河北秦皇岛市、上海市、江苏镇江等地正在成立五子棋协会，河北的石家庄、沧州等地和云南、浙江、辽宁、吉林、安徽等地也成立了五子棋组织等。这些五子棋组织成立后，在当地开展了形式多样的五子棋活动。经过十多年的发展，我国几乎所有的省、自治区和直辖市都有五子棋爱好者。目前，高水平的五子棋爱好者集中在北京、天津、上海、河北、浙江、江苏、辽宁等地，重庆、四川、云南、吉林、黑龙江等地的五子棋爱好者也有较高的水平。随着五子棋在世界范围内的普及，1988年8月8日，五子棋的国际民间组织——国际连珠联盟(Renju International Federation,简称为RIF）在瑞典成立，现在已经有日本、俄罗斯、爱沙尼亚等四十多个成员国加入。国际连珠联盟下设若干机构，负责网络、竞赛、技术、出版、青少年等工作。国际连珠联盟成立后，致力于五子棋在世界范围内的普及和发展，设立了一系列正式的国际比赛，如世界锦标赛、世界青少年锦标赛等，其中影响最大、水平最高的是世界锦标赛。世界锦标赛两年举办一届，有近20个国家的选手参加，每届参赛选手80人左右，这些选手大多是通过本国预选赛才获得参赛资格的。比赛分A组、B组和女子组，其中水平最高的A组只有12个名额，通过资格赛的才能参加A组比赛。世界锦标赛至今已经举办了7届，冠军多由日本和爱沙尼亚棋手获得。由于中国棋院与国际连珠联盟没有建立正式联系，在.2003年之前，我国的五子棋爱好者主要是通过民间组织——北京干禧连珠体育文化交流有限公司与国际连珠联盟进行联系的。该公司在我国五子棋的普及和发展过程中起过积极的推动作用。2003年10月在中国棋院主办的第二届全国五子棋邀请赛期间，中国棋院院长王汝南与国际连珠联盟主席彼得-约翰逊和副主席韩宁森等进行了会谈，双方就五子棋在中国和世界的发展等问题交流了各自的看法。

🏳️‍🌈1.2、技术方案

😀1.2.1、术语与缩写解释

缩写、术语	解释
Javascript	Javascript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。
Vscode	Vscode是一个轻量的编译器,
Html	Html的语言形式为尖括号包围的Html元素,浏览器使用Html标签和脚本来诠释网页内容,但不会将它们显示在页面上
Css	层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。
AI	在计算机科学中，人工智能有时被称为机器智能，是由机器展示的智能，与人类和动物展示的自然智能形成对比。

😃1.2.2、开发环境的配置

类别	标准配置	最低配置
计算机硬件	市场上大部分电脑均可	Cpu1.0GHZ以上内存1G以上
软件	Google Chrome vsCode	Google Chrome vsCode
网络通信	内网通 qq 微信	内网通 qq 微信
其它	适用软件开发的普通工具	适用软件开发的普通工具

😄1.2.3、测试环境的配置

测试环境：Google Chrome vsCode win10

辅助测试工具：WinRunner，WinRunner能够有效地帮助测试人员对复杂的企业级应用的不同发布版进行测试，提高测试人员的工作效率和质量，确保跨平台的、复杂的企业级应用无故障发布及长期稳定运行。

其余辅助测试工具:负载测试工具，健壮性测试工具。

测试驱动的程序设计：WinRunner，WinRunner能够有效地帮助测试人员对复杂的企业级应用的不同发布版进行测试，提高测试人员的工作效率和质量，确保跨平台的、复杂的企业级应用无故障发布及长期稳定运行。

测试机器：本机，win10，vsCod，Google Chrome

测试的目的：

验证本项目的可用性，通过测试了解各个接口的正确性，比如顾客能否顺利的进行下棋，用户能够顺利的与机器进行博弈，用户能否顺利的改名，用户能否顺利的修改机器的名字，机器能否顺利的进行ai下棋，软件能否顺利的进行在线判断胜负的功能，软件能否溶剂用户以及机器的下棋的数目，以及软件的可用性，并发性，安全性，以及其余各种功能的正确性，以及用户的友好界面的展示，等等。

🏳️‍🌈1.3、系统设计

😀1.3.1、系统总体结构

在这里插入图片描述
逻辑图：

1、用户进行下棋

1.1、机器判断并且寻找最优解
1.2、机器下棋
1.3、判断输赢如果不存在则继续下棋

2、改名

2.1、用户进行改名操作
2.2、机器进行改名操作

3、用户步数的统计

3.1、统计用户下棋的步数，

4、判断当前是否能够断定胜负

4.1、通过算法判断是否五子连
4.2 、如果五子连则完成
4.3 、如果没有五子连则继续游戏

😃1.3.2、子系统N的结构与功能

1、修改用户名

能修改用户的用户名并进行友好的展示。

2、修改机器用户名

能修改机器的用户名能进行友好的展示。

3、统计用户下棋的步数

能统计用户下棋的总共的步数，进行友好的展示。

4、人工智能ai算法自动下棋

通过人工只能的AI算法，进行人工只能在线下棋。

5、用户良好信息的展示

展示用户良好的个人的信息，具有良好的展示。

6、优美的UI界面

展示良好的UI界面，具有良好的显示效果。

🏳️‍🌈1.4、代码设计与实现

😀1.4.1、产品界面如下方图

在这里插入图片描述
用户进行下棋动作，能有良好的外观展示，能实现具体的细节功能，

机器做出正确的回应，机器根据ai算法进行具体的实现操作。

机器用过ai算法极大极小搜索来进行，通过用户下棋完，机器进行判断，先判断用户是否下完棋，接着判断当前是否已经定下了胜负，如果胜利则显示胜利，如果失败则显示失败，如果均没，则机器通过算法进行下棋，接着判断当前是否已经定下了胜负，如果胜利则显示胜利，如果失败则显示失败，如果均没，用户接着进行下棋操作，直到判定出来胜负。

代码试下如下：


/ 阳线纵向90°的赢法
for (var i = 0; i < 15; i++) {
    for (var j = 0; j < 11; j++) {
        for (var k = 0; k < 5; k++) {
            wins[i][j + k][count] = true;
        }
        count++;
    }
}

// 阳线横向0°的赢法
for (var i = 0; i < 15; i++) {
    for (var j = 0; j < 11; j++) {
        for (var k = 0; k < 5; k++) {
            wins[j + k][i][count] = true;
        }
        count++;
    }
}

// 阴线斜向135°的赢法
for (var i = 0; i < 11; i++) {
    for (var j = 0; j < 11; j++) {
        for (var k = 0; k < 5; k++) {
            wins[i + k][j + k][count] = true;
        }
        count++;
    }
}

// 阴线斜向45°的赢法
for (var i = 0; i < 11; i++) {
    for (var j = 14; j > 3; j--) {
        for (var k = 0; k < 5; k++) {
            wins[i + k][j - k][count] = true;
        }
        count++;
    }
}

😃1.4.2、改名界面如下方图

在这里插入图片描述
用户进行修改本人名称的操作，js判断名称是否进行修改，如果已经修改则会对名字进行修改操作，如果为其他的非法字符，则会进行限制，当用户确定完修改的操作之后，前端界面会修改用户名，将会有一个友好的前端界面的展示效果。

用户同时还可以进行修改机器人的名称的操作，js判断名称是否进行修改，如果已经修改则会对名字进行修改操作，如果为其他的非法字符，则会进行限制，当用户确定完修改的操作之后，前端界面会修机器人的用户名，将会有一个友好的前端界面的展示效果。

代码试下如下：

var name="无敌美少女";       //初始化用户的名字
var robName="地狱模式";        //初始化电脑的名字

/**
 * 用户重命名
 */
function changeName(){
    var str=prompt("请输入您的用户名",name);
    if(str){
        name=str;
        $("#userName").text(name);
    }
}
/**
 * 机器重命名
 */
function changeRobName(){
    var str=prompt("请输入电脑的用户名",robName);
    if(str){
        robName=str;
        $("#robName").text(robName);
    }
}