基于微信平台的棋牌类小程序开发

摘要随着科学技术的不断提高，人民的生活节奏越来越快。忙碌的人们很少有充足的空闲时间来娱乐休闲。开发中国象棋的微信小程序版本的主要目的也是为了给人们的闲暇时间里增加娱乐方式，其次是为了继承和发扬中华传统文化。此次毕业设计开发的是一款微信平台上的中国象棋小程序。开发工具使用的是微信官方提供的微信开发者工具。实现的编程语言是微信的WXML(WeiXinMarkLanguage，微信标记语言)、WXSS(WeiXinStyleSheet，微信样式表)、js。项目素材通过Adobeillustrator和photoshop制作。项目素材上传至腾讯云，并在小程序加载时从中获取。游戏玩法主要是传统的中国象棋玩法，在其中增加了人机对战并对UI界面做了美化。用户通过触碰屏幕控制棋子走动，电脑会进行相应的操作。由于微信小程序的轻便性，用户能在零碎的时间里进行娱乐，中国象棋小程序的推出能让更多人方便地体验到经典游戏的乐趣，从而起到传播中华文化的作用。关键词：中国象棋微信小程序人机对战中华文化

AbstractWiththecontinuousimprovementofscienceandtechnology,people'sliferhythmbecomesfasterandfaster.Busypeopleseldomhaveenoughfreetimetoentertain.Themainpurposeofdevelopingwechatappletistoincreasetheentertainmentwayinpeople'sleisuretime,andthentoinheritanddevelopthetraditionalChineseculture.ThisgraduationprojectisaChinesechessprogramonwechatplatform.Thedevelopmenttoolfortheprogrammeisthewechatdevelopertoolprovidedbywechat.Theprogramminglanguagesimplementedarewechatwxml(wechatmarklanguage),wxss(wechatstylesheet),JS.TheprojectmaterialsareproducedbyAdobeIllustratorandPhotoshop.TheprojectmaterialisuploadedtoTencentcloudandobtainedfromitwhentheappletisloaded.Thegame’splayingmethodismainlythetraditionalChinesechessplayingmethod,theman-machinebattleisaddedintothegameandtheUIinterfaceisbeautified.Theusercontrolsthemovementofthechesspiecesbytouchingthescreen,andthecomputerwillcarryoutcorrespondingoperations.Becauseoftheportabilityofwechatapp,userscanhavefuninthefragmentarytime.TheintroductionofChinesechessappcanmakemorepeopleeasilyexperiencethefunofclassicgames,thusplayingaroleinspreadingChineseculture.Keywords:ChinesechessWechatAIbattleChineseculture目录第一章绪论 第一章绪论1.1开发背景及意义在当今时代，智能手机已成为我们生活中不可或缺的一部分。对于大部分当代年轻人而言，假如离开了手机或是离开了网络，他们的生活就会变得很不方便，也使得他们的生活少了许多乐趣。据工信部发布的《2018年5月份通信业经济运行情况》，我国三大运营商移动电话用户总数有14.3亿，在1-7月里净增用户9150万户。由此可见智能手机发展迅速且对我们生活影响深刻。其中，微信是中国排名第一的社交软件，排在第二第三的社交应用根本动摇不了它的地位。根据2019微信数据报告发布得知，2019年微信月活跃已经超过11亿，达11.51亿，可以说是，在中国，一个拥有智能手机的人，那么他极大可能是一名微信用户。面对微信如此庞大的用户数量，我们开发和推广中国象棋游戏当然是可借助微信这一途径。在2017年，微信低调上线了首批小程序，紧接着，又推出了风靡一时的“跳一跳”小程序，并在微信启动页面进行了推荐，一瞬间让广大微信用户了解到了微信小程序这一新功能。个人或者用户能够制作自己的小程序并上线，这对许多开发者来说无疑是一个新的机会。1.2国内研究现状中国象棋是起源于中国的一种棋戏，由于其用具简单，趣味性强，在民间流行极为广泛。【1】中国象棋是中华民族的文化瑰宝，具有悠久的历史。其玩法模仿的是古代战争，旨在考验双方玩家的军事策略。玩家若想获胜，首先得熟悉象棋规则，其次得预判对手的下一步走法并做出应对。在国内，中国象棋深受老百姓喜爱，大街小巷中常常能够看见一群人围在一起研究象棋。当然，这部分人大多是老年人，我也经常在公园或是广场看见他们的身影。国内的年轻人对中国象棋的喜爱不如老一辈人，因为他们的生长环境不同，现在的娱乐游戏确实有许多玩法新颖、趣味性更强的游戏供年轻人们选择。所以，中国象棋很可能就被当代年轻人所遗忘，因此，开发一款下载轻松，界面简洁的中国象棋小程序供大家娱乐就显得尤为重要。1.3研究的目的研究微信小程序的目的是让自己熟悉微信小程序的开发流程，了解微信小程序的开发环境以及微信小程序提供的API。这对以后开发微信小程序都很有帮助，由于微信在国内的普及性，许多企业为了宣传和推广，都会制作自己的小程序。预先熟悉微信小程序也是给自己增添一些额外的技能。而以中国象棋作为开发项目是为了弘扬中华民族传统文化，继承中国象棋传统玩法并加以创新，肯定能让它重现光芒。开发中国象棋小程序同时也是给人们增添一点乐趣，在无聊的时候可以与电脑对战一局，玩法轻松，不会让人过度激动，还能开发智能，启迪思维。1.3结构总览文章中先是介绍项目使用到的技术，包括编程语言、平面设计软件等。然后开始介绍制作项目的思路与规划，主要的实现的逻辑是怎样的。第四章开始是具体的制作流程，素材制作部分包含了每一个UI素材的制作方法。代码编写部分，从小程序的几个页面入手，分别介绍这几个页面的功能是什么，代码又是如何实现小程序里的功能的。小程序制作完成后是测试阶段，这里用表格记录了测试的过程和结果，项目制作过程遇到的问题也一并写在了这里。之后是对论文的总结，说一下项目完成后的一些心得体会。再下一页是参考文献的列举，文章中有标注引用的出处都写在了这里。最后是致谢，表达自己对老师们、同学们的感谢，说说四年大学生活的感谢。

第二章微信小程序开发的技术支持2.1微信开发者工具微信开发者工具是微信官方提供给开发者的开发工具。微信开发者工具集合了开发调试、代码编辑、小程序的预览及发布等一站式功能。跟大多数办公软件一样，微信开发者工具有启动页、菜单栏、工具栏等，结构与功能也是大同小异。对于有使用电脑经验的人来说，操作微信开发者工具并不是一件难事。2.2小程序与网页开发的区别小程序开发与普通的网页开发非常相似，这使得以前的前端工程师能够很容易转型到微信小程序开发。虽然二者非常相似，但它们之间还是有些许区别的。在网页开发中，渲染线程和脚本线程是互斥的，在小程序中则是分开的。网页开发能使用DOM对象对DOM中的元素选择和操作，而由于小程序逻辑层和渲染层是分开的，相比较而言就会少了相关的DOMAPI。【2】2.3小程序代码构成一个小程序项目由4种不同类型的文件构成，分别是JSON配置文件、WXML模板文件、WXSS样式文件和JS脚本逻辑文件。其中JSON并不是编程语言而是一种数据格式，用于配置工具、项目或者是页面的属性。WXML则跟网页编程中的HTML非常相似，它们都是用于描述当前页面的结构的。稍有不同的是WXML中标签名字于HTML中的不一样以及WXML中增加了一下wx:属性。WXSS跟CSS同为样式文件，WXSS拥有CSS大部分的特性，同时也进行了一些扩充和改变。最后一个文件，JS文件，一个页面想要实现动态响应用户操作靠的就是它了。JS文件能够动态地改变数据变量、样式属性等等。在JS文件中有一个Page对象，它作为一个页面构造器，将其中的data数据和WXML一起渲染出页面，就得到了我们使用的小程序的每一个页面。2.4HTML介绍HTML是一种标记性语言，由Web的发明者TimBerners-Lee和同事DanielW.Connolly创立于1990年，英文全称是HyperTextMarkedLanguage，中文翻译为超文本标记语言。【3】HTML使用标签来描述一个页面，浏览器通过解释HTML文档渲染成我们浏览的页面。HTML其实就是一种文本格式，我们可以使用任何的文本编辑器来修改其中的代码。以下引用的一段文字能够很清楚的说明万维网（worldwideweb）上的一些概念，便于我们更好地使用HTML。万维网（worldwideweb）上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（UniformResourceLocator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。【4】小程序中的WXML跟HTML非常接近，同为描述页面结构的标记语言，进行过网页前端开发的我来设计小程序的页面不会很难。2.5CSS介绍CSS,英文全称：CascadingStyleSheets,是一种用来表现HTML等文件的样式的计算机语言。假如把HTML比喻成骨架，那么CSS就像是骨架之外的皮肤。CSS能够HTML元素的外观，包括颜色、边框、边距等等。通过一种“选择器{属性:属性值}”的格式即可实现元素外观的改变，有了CSS，我们的页面才不再单调，更具个性。小程序中，WXSS在CSS基础上进行了扩充，例如尺寸单位等，其余基本上直接使用CSS编写小程序的样式文件即可。2.6JavaScript介绍JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。【5】JavaScript由下图1三部分组成：图2-1JavaScript的组成部分ECMAScript,描述了该语言的语法和基本对象。文档对象模型（DOM），描述处理网页内容的方法和接口。浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。【6】通过JavaScript，我们能够对用户事件作出相应，能够动态改变网页浏览效果。在小程序中，我们通过JS文件来添加事件的相应方法，还可以在其中调用小程序提供的API，来丰富用户的页面操控感。2.7其他技术支持本次的中国象棋小程序开发，需要用到许多图片素材，像是棋子图片、棋盘图片、背景、UI图标等等。这些素材是由Abobeillustrator和Photoshop制作而成的。音乐和音效素材是从网上搜集的。

第三章小程序制作规划和分析3.1小程序可行性分析（1）技术可行性制作小程序需要掌握HTML、CSS、JS三种语言，我在大二时学习过web前端开发，所以对这三种语言都算熟悉，开发小程序应该是不成问题的。不过考虑到制作的是中国象棋，难点在于走棋规则的实现和电脑对战代码的编写，这个方面要预先构思好。（2）经济可行性制作一款小程序需要一台PC，一台移动电话，服务器采用的是腾讯云提供的云开发服务，可从云下载图片和上传数据。目前来说这些设备都齐全，对于开发应该没什么问题。3.2小程序制作规划（1）制作前设想制作前首先要查找现有的小程序例子，了解当前行业环境如何，也可以从他人的作品中得到灵感。我这里找到的有天天象棋和途游五子棋两个小程序参考案例。首先，在小程序启动时要有一个加载页面，在这页面上标有“正在加载中……”类似字样。加载完成后，用户进入的是主页面，主页面配备三个或以上的按钮，按钮主要实现开始游戏和设置等功能。点击开始游戏进入二级界面，选择对战模式，暂定默认为人机对战。点击人机对战进入游戏，进入此页面时出现有棋盘，玩家需再次点击“开始对局”方可布置上棋子并开始游戏。此页面配备的按钮有悔棋键和后退键。（2）具体制作思路具体的游戏玩法通过小程序里的canvas组件来完成。在canvas上绑定点击事件，当用户点击时，判断点击的位置处于画布中的哪个位置。然后判断此位置上是否有棋子，有棋子：表示用户可能是想选中棋子或是在选中棋子的状态下进行吃子的操作；无棋子：表示用户可能是想在选中棋子的状态下进行移动棋子或是点空（乱点）。分布对以上两种情况进行处理，选中棋子：改变被选中棋子的透明度并绘制出提示点，然后重绘canvas上下文内容。吃子：删除被吃棋子在数组中的位置，移动选中棋子的位置，然后重绘canvas上下文内容。移动：跟上述操作类似。点空：提示用户不能将棋子移动到当前点击的位置。以上说明了玩法的实现思路，即整个游戏的核心，具体的实现过程会在下面的章节详细叙述。3.3小程序的功能说明1、小程序每个功能都要描述清楚人机对战功能，玩家对战功能，单人模式，难度选择等2、对弈数据怎么存储的，数据库的设计1、小程序每个功能都要描述清楚人机对战功能，玩家对战功能，单人模式，难度选择等2、对弈数据怎么存储的，数据库的设计中国象棋小程序要实现获取用户信息、人机对弈、静音、悔棋等功能。当前棋局的数据存储在一个二维数组里面。图3-1小程序界面导航图人机对战功能：通过alphabeta算法让程序扮演玩家来操作棋子，实现人机对战功能人机对战的难度选择：通过改变alphabeta算法的搜索深度实现悔棋：实现下棋的悔棋功能。静音：点击可切换音乐播放与否的状态。后退：点击后可返回至主页面（弹框让用户确认）。

第四章小程序的实现过程实现过程前加一章：小程序系统设计每个功能的算法流程图制作包括：1、艺术制作，技术制作实现过程前加一章：小程序系统设计每个功能的算法流程图制作包括：1、艺术制作，技术制作4.1制作UI素材使用Adobeillustrator和Photoshop制作小程序的LOGO，用于加载页面的显示4.1.1设计思路与过程简述小程序的设计主题是中国象棋，LOGO就要有代表中国象棋的元素，让玩家一目了然。刚开始的思路是制作一枚很精致、立体感很强的“象”棋子。可是由于绘制技术有限，绘制效果并不理想，于是改变思路制作了一枚平面化、简约的棋子作为LOGO。LOGO制作完成后，开始小程序背景制作。制作的背景是一种扁平化的插画风景图，虽然细节不多，不过给人的视觉效果很不错。接下来就是棋盘的制作了，棋盘的制作比较讲究，做出的效果也非常逼真，细看会观察到它具有真实棋盘所有的纹理和光影。完成棋盘后，就到了棋子的制作了。棋子的制作风格同样是偏向平面的，棋子配色采用黑白两种颜色，为了增强棋子立体感也给它们添加了投影效果。最后到了小程序中UI图标的制作，为了保持整体，UI图标配色采用的是同类配色，而为了丰富效果，使用的是渐变填充色。4.1.2具体制作过程棋盘的制作：首先在AI中绘制出棋盘格，10行9列，注意间隔距离要保持相等，而且楚河汉界的位置也要注意留出。利用AI中的直线工具将皇宫格的两条斜线拉出来，将皇宫格区域作出区分。同样是利用直线工具或是矩形工具，标记出兵位和炮位，制作方法很多，能做出效果即可，需要注意的一点的标志跟棋盘的比例是否美观。棋格绘制完成后，再给它加一个粗一点的外边框。接着在楚河汉界位置用行楷字体写上“楚河汉界”，位置调整到合适。然后是棋盘的纹理制作，此步骤利用Photoshop完成，在网上找一张木头质感的纹理素材，在PS中用涂抹工具将其弱化，使其木纹不要太显眼。然后使用调整图层调整一下色调和亮度等等，然后是做出光效，用画笔工具，选择颜色为白色，笔尖选择柔边，透明度和流量自行调整合适，在素材上点上几笔，效果完成。纹理素材完成后导入到AI继续其他步骤，在AI中绘制一个矩形边框作为棋盘的高光，使用图层模式将高光框叠加在棋盘上面。然后给棋盘添加一个描边以突出棋盘，最后给棋盘加个厚度（画个矩形移动至底层实现），添加投影效果，棋盘制作完成，成品如下图。图4-1棋盘成品图棋子的制作：在AI中，将两个圆形叠在一起（一大一小，一个填充，另一个仅填充描边），然后将文字转曲并添加外发光效果，其他类型的棋子也是同样的制作方法。棋子素材制作完成。UI图标制作：“设置”图标：跟大多数的游戏的设置图标一样，我想制作的设置图标是一个齿轮的形状。在AI中，创建一个圆形，仅填充描边，描边大小调整至合适，将此图形轮廓化描边。创建一个矩形，比例调整合适，移动到圆边上面，使用旋转工具，移动旋转中心到圆边中点，复制，旋转角度为30°，Ctrl+D重复以上步骤，设置图标就制作好了。“分享”图标：用一个矩形和三角形并凑成一个箭头的形状，再利用转换的工具将一些线拉成弯的，同时将一些锚点去除，再给箭头加上一点圆角，分享图标制作完成。“客服”图标：目标样子是一个带着耳机的人形头像。在AI中绘制一个圆，使用选择工具通过调整锚点使得整个圆变椭一点，让它整体看起来像个头形。接下来同样的方法绘制另一个圆作为身体上半部分。然后是耳机部分，用矩形加圆角制作耳机的耳垫，圆形减半加描边用作耳机带，加制作的元素拼凑在一起，此时，客服图标已制作完成。其余素材像是按钮、小程序LOGO等皆是通过AI变换相应的形状加渐变填充制作而成的，在此就不做过多的赘述了。以下是所有素材的集合图。图4-2UI素材总览背景制作：背景制作是UI素材制作中比较重要的一环，一个游戏的背景直接影响整个游戏的风格和对玩家的感觉。目前大多数中国象棋类的游戏使用的是中国传统文化作为游戏的风格，像是书法、水墨之类的。可是我的制作水平有限，制作水墨风格没什么经验，所以背景的制作选择的是平面的插画风格，参考了网上的一些教程[]，根据自己的思想进行了一些改进制作成的。制作过程主要是选区偏紫和偏蓝两种颜色作为主要的渐变色，调整渐变的不透明度和渐变程度，绘制一个矩形，用此颜色作为填充，此矩形即为我们的背景，看上去会有一种太阳快下山了的感觉。然后绘制几棵树，树绘制方法是用圆形和矩形完成，具体按照个人喜好调整，没有过多限制，不过颜色方面选择同类色，整个画面看上去会比较整体。紧接着绘制一个月亮，月亮在画面中就是一个白色渐变填充的圆形，调整一下不透明度，为其添加外发光效果使其更像一个月亮。为了搭配月亮，也为了丰富我们的天空，给天空增加一些星星。星星通过散点画笔完成，而不是一个一个的圆复制而成的，给星星添加叠加的图层模式使其融入星空。再画几颗流星增加画面氛围，直线工具绘制直线，改一下宽度配置为头大尾小的类型，渐变填充（白色到透明度为10%的白色），同样是叠加的图层模式，流星绘制完成。大地的绘制是两个椭圆，自行调整形状，使用剪贴蒙版遮盖不必要的部分，调整好颜色，整体的画面就制作完成了。下面是背景的完成图。【7】图4-3背景素材UI素材部分制作就差不多了，项目需要用到的图片素材都齐全了，有特殊需要时可再继续制作，接下来就是编程部分了。4．2编写代码上文中有提到过，html是我们页面的骨架，那么我们就先把我们的骨架搭建好，这里我们先是制作一个loading页面，也就是加载页面，有了这个页面能够给用户一种等候时的期待感。4.2.1Loading页面：编写一个<view>，为其分类为container，即作为此页面的容器。在wxss中添加样式——height:100vh;width:100vw;background：#faf8ee；实现加载页面的动画效果的思路是：在container中分别有四个<text>，在<text>中加入属性class='{{current

==

0

?

"sct":

""}}'，current总共有四个值，假如current为0，则第一个<text>的类为"sct"，否则为空。如果类为"sct"，那么当前<text>拥有属性background-color:

#ccc，显示为深灰色。静态配置就设置完成了，核心在于小程序提供的数据绑定功能，在wxjs中定义一个计时器，每0.4秒执行一种回调函数，回调函数中的setData可以定时将current值+1，从而实现动态改变渲染层上current的值，loading页面的动画效果就实现了。然后在其中加入一个<image>组件放置我之前做好的LOGO图标素材，最后，在定时器定够足够时间后就调用小程序的接口页面跳转以实现转换页面，这样基本的loading页面制作完成。4.2.2Begin页面：Begin页面是用户等待加载完成后进入的页面，也就是我们玩游戏时的主界面。在此页面中有4个按钮和4个功能选项，点击“开始游戏”按钮进入游戏页面。同样的在此页面加入一个container类的<view>用作装载页面的元素，注意这个处于最外面的容器要用display：flex属性来布局，这样的布局会顺利许多。再写一个小<view>用于承载一个<image>组件，这个<image>就是Begin页面的背景图。然后是添加四个<button>组件，为了实现按钮的美化，在<button>中加入<image>,用到的是之前制作的素材。这里需要注意一下<image>默认是加载一张原像素的图片文件，这里要设置一下宽度属性并且<image>组件也要加上属性widthFix，以保持宽度并自动调整高度。按钮制作完成后我发现了一个问题，就是按钮受到用户点击时没什么变化，这里我想实现一个按钮被按下时会缩小的效果。参考了网上的一些资料，得知实现此效果也是要用的小程序中的数据绑定。首先，给按钮绑定一个点击事件并给事件加一个事件处理函数，然后，按钮的大小属性需要写成是数据绑定格式的，也就是这种——“{{}}”。于是，在事件处理函数中我们就可以改变按钮的属性了，那么，按下按钮的效果也就完成了。不过此时会出现一个问题，按钮被按下时，大小是改变了，不过紧跟在后面的块级元素也跟着动了位置。思考了一下，想出了解决方案，在<button>外加一个固定大小的<view>就可以了，此问题也得到了解决，按钮制作算是告一段落。然后是UI选项的制作，这项制作起来不算难，不过在html布局上面倒是走了不少弯路，比如元素不居中、元素重叠在一起等等。而这些问题后来通过使用display:flex布局也算是解决了。总的来说，Begin页面也制作完成了，下面想着重介绍一个知识点，display:flex，个人心得，这个属性真的挺重要的。4.2.3Cssdisplay：flex在这个属性中，flex是flexible的缩写，意思是灵活的，这种布局也被叫作弹性布局。下面引用一张图（图4-4）来帮助我说明这种容器属性。[]图4-4上图说明了，在flex布局中有一条水平主轴和一条垂直主轴，图中也标记了主轴开始的位置与结束的位置，都是处在容器的边界。flexitem即为容器中的元素。flex有六个属性，配合使用这些属性就能很灵活地给页面进行布局。接下来介绍一下这些属性。【8】1.flex-direction从字面上理解这个属性就是设置方向的意思，通过设置这个属性能够调整容器内元素沿着哪一条主轴排列。比如flex-direction:row，就是让容器内元素沿着水平主轴来排列，如下图。图4-5flex-container同样的，flex-direction:column即是让容器内的元素沿着水平主轴排列。而flex:direction:row/column-reverse则是将元素的排列顺序调转。有了这个属性，我们就可以随心所欲而又有规律地布局我们的页面了。2.flex-wrap控制弹性布局容器内的元素换行与否，默认值为不换行，即我写两个div，它们会在同一行内。3.flex-flow是以上两种属性的综合，也就是简写属性，比如写成“rownowrap”4.justify-content从英文译为中文就是对齐内容的意思。当此属性值为center，元素在主轴上居中排列；当属性值为flex：start，那么就是从图中的start点开始排列；当属性值为flex：end则是从end点开始排列。当属性值为space-between,元素时从主轴的两端往中间排列。属性值space-around使得每个元素两侧的间隔相等。

5.align-itemsalign-items用于元素在当前页面上横轴或是纵轴方向的对齐。如下图即是元素在纵轴上低=底对齐。图4-66.align-content该属性定义的是容器内有多根轴线时的对齐方式，在我上图的图例都是只有一根轴线的，所以该属性在上面的情况是不起作用的。4.2.4Index页面index页面是我定义为进行游戏的页面，由begin页面转入。这个页面的js代码是整个游戏的核心，一共有1100多行。当然，这些代码也不是我自己凭空而写的，参考了一个html5的象棋游戏，再将其代码转化成小程序并进行改进的。在这个js文件里面有三个大类，分别是com类、play类和AI类。Com类控制一些基本的走棋规则，资源路径等。play类用于控制棋子的走动。AI类是与电脑对战时的人工智能算法。主要的实现逻辑是，在棋盘上建立一个二维坐标系，左上角的“車”位为（0,0），往右走，x轴坐标增加，外下走，y轴坐标增加。这样，棋盘上的每一个可走的位置就都定义好了，然后是将这些坐标存在一个二维数组里面。当用户点击画布时，给事件绑定一个判断点击位置的方法，再将点击的位置转化为棋子的坐标位置（x,y）,如此一来就可以让用户控制到棋子了。Canvas要在用户每次点击时更新画布内容，这样才能让整个游戏“动”起来。下图的二维数组就是用来记录每个棋子的位置的。其中的首写字母是棋子类型的缩写，比如大写的’C0’代表的是敌方的第一个車，而‘c1’代表的是我方的第二个車。图4-7存储棋子位置的二维数组当棋子位置变动时，就改变其在二维数组中的位置。走棋规则的实现：走棋规则，就是要限制棋子可以走的位置。比如“車”，这类棋子能走x轴或y轴上的空位和非友方位。实现这种限制的写法就是，先判断棋子类型和阵营，然后往其可走的方向检索，如果是空或是有敌方棋子在此位置，则可将此位置的坐标加入要返回的数组当中，这个数组就是棋子可走位置的集合。以下是“車”的左方向检测是否可走的写法，其它方向也是以此类推。图4-8“马”的走棋规则：首先，马在象棋中能走上、下、左、右四个方向每个方向各两个点的位置，前提是其所走的方向的第一个直线位置不能有棋子阻挡着。如下面我制作的解释图，在“馬”所要走的前方，红色的叉处不能有棋子，它才可以走到该方向的绿色点出。图4-9马的走棋规则实现的写法同样是对各个方向进行检查，它比“車”要多一个阻挡棋子的判断，然后还是要走的位置上为空或为敌方棋子则可以将该位置存入可走的数组，返回给我们的棋子。“相”的走棋规则：相跟马的走棋规则写法上比较相似，同样是所走方向上不能有棋子阻挡。“相”走的是45°方向，不过“相”只能在己方阵地走，不能过河进攻，这是跟“馬”的一个区别。“士”的走棋规则：士只能在皇宫格能移动，移动也只能按45°方向移，这里写法上就要给士的x、y范围做一个限制，限制在皇宫区域即可，同样，还是要所走的位置要是空或是有敌方棋子才可走动。“将”的走棋规则：将跟士又很类似了，它们都只能在皇宫格内移动，士是用来保护将的。将能走的方向是上、下、左、右，这点跟“車”很像，不过“将”是每次只能够移动一格的。“炮”的走棋规则：炮在走棋规则上的写法就要难一点了。玩过中国象棋的人都知道，炮是隔着一个棋子进行吃子的，无其他棋子阻隔时能像“車”一样移动。“炮”的移动方向也是十字方向，在写法上面加入一个变量n来记录“炮”在当前方向上阻挡的棋子数。当n不为0了，在此也就是n为1且此方向上有一个敌方棋子，那么将此位置加入到可走的数组里，然后break跳出循环。假如n=1（阻挡位已有棋子），但此方向上先是有一个己方棋子再有敌方棋子，这种情况是不会影响的，因为在n=1时，只判断一次，有可吃子的位置就加入数组，没有则跳出循环，以下是单个方向上的判断代码,其他方向也是同样的实现原理。图4-10“炮”的走棋规则代码

“卒”的走棋规则：“卒”的写法就比较简单，在中国象棋中，“卒”是在过河前只能往前走，不能往后退，在过河之后能往前、往左、往右三个方向走，而且每次移动只能移动一个格子。那么，我们只需要在写法上“卒”的往右或往左走写上一个y的限制即可实现。Play对象是用于给用户操作棋子的，操作棋子的方法都写在这里面。下面是用户点击了画布的一个处理流程图。图4-11用户点击事件处理流程图要改变棋子位置需要做两个操作，一是改变棋子集合中棋子的坐标属性，二是改变当前的地图数组（上文提到过的二维数组）。悔棋功能的实现：悔棋功能在许多棋类游戏都是带有的，这功能够提升到玩家的体验。实现的逻辑是，在初始化时，定义一个用于存储走棋记录的数组。那么走棋记录是如何被记录进去的呢？这里涉及到了棋盘坐标，比如说，“車”从（0,0）位移动到了（0,1）位，也就是向前走了一个，那么我们将走棋记录为0001，前两个数字代表着旧位置的坐标，后两个数字代表新位置的坐标。点击悔棋按钮时，将数组最外的两个值移出去，即己方最新的走棋记录与敌方最新的走棋记录。移出去之后，初始化一下棋子地图，然后按走棋记录数组重新走一遍棋子，从而实现悔棋。当然这种算法可能越到后面计算越复杂，但这也是我目前的实现方法。以下是悔棋功能的部分代码。

图4-12实现悔棋功能的部分代码人工智能实现：人机对战是在这整个项目中最具难度的代码，我也是参照着一个html的象棋游戏写出的代码。刚开始看这部分的代码时看得一头雾水，加上自己本身逻辑思维较差，上网查了许多资料才勉强弄懂。在查资料的过程中还见识到了一个新概念：极大极小算法。这是一种许多人机对战都会涉及到的子算法，我的理解不够透彻，但用我的话语来说就是预测棋局的下几步，并选择对自己最有利的走法，也是对对手最不利的走法。比如，在一场“井字棋”对战中，刚开始我面对的是空棋盘（也是根节点），然后下一步是对手走棋（第一层），我们要在对手走棋后进行应对（第二层），如此循环下去直至到叶子节点。因为是“井字棋”，所以能将预测图都列出来，如果是每一步大概有35种着法的国际象棋，那么在层数大于6后计算量将会变得非常庞大，以至于计算时间变长。具体实现：AI走棋，我们先要获取到当前己方的所有棋子，然后获取这些棋子所有合理的着法。接着是将这些着法都走一遍，此时，对手也递归调用以上方法，调用到层数为0时（递归到根），则执行局面评价函数，评价当前局面并给出数值，取数值最高作为最佳着法。然后让AI调用下子方法完成走棋操作。下面是AI类执行的一个流程图，交换双方的过程为搜索深度。图4-13AI类运行流程图

第五章小程序的功能测试5.1测试环境CPU：IntelCorei7-4720HQGPU：NividaGTX950MRAM：8GROM：WD10JUCTOS：Windows1064bit5.2登入测试测试界面输入预期结果实测结果状态Loading通过Begin开始游戏跳转页面跳转页面通过Index开始对局棋子展示棋子展示通过5.2游戏测试游戏功能测试输入预期结果实测结果状态选择棋子正常正常通过移动棋子正常正常通过吃子操作正常正常通过将军判断正常正常通过

5.3问题总结遇到的问题影响解决办法完成结果状态Canvas绘图时出现了异步绘图造成用户点击后棋子位置还未更新的问题转换绘图顺序完成通过Js文件整合问题导致一个文件内容过多，更改工作变得繁琐利用微信小程序的模块化导出未完成保持一个Js文件图片路径书写错误导致小程序控制台报错，模拟器无显示更改为正确的图片路径格式完成通过走棋规则的实现棋子可以无视规则在棋盘上任意走动参考网络上的代码并在草稿上自己走一遍完成通过小程序中页面的布局问题布局上出现排版错乱，影响美观利用display：flex进行布局完成通过获取不了用户信息无法在游戏中设置用户头像、昵称等利用小程序的新接口：通过按钮获取用户信息完成通过在不同设备上出现页面变形致使整个页面变形，布局错乱使用小程序里的rpx自适应单位调整完成通过上面所列举的是在实现项目的过程中遇到比较有代表性的一些问题，在制作过程中其实有很多问题在网上是很难找到合适的答案的，这也让我认识到能力不足去独立开发的弊端。假如有老师带领去完整地去完成一个项目会让学生更明白一点，我们专业好像就是缺少了一门整合所有知识的课程。5.4测试结果图4-14小程序运行结果图上图是小程序的完成结果，能够看到棋子能在棋盘上摆开，游戏经过测试证明也能够正常运行，选中棋子也会有选中状态和走棋提示，总的来说正常运行。第六章论文总结这次的项目花了断断续续两个多月的时间去完成，在这段时间里我不断地在网上查找与项目有关的各种各样的内容，重新学习了一次JavaScript，也对微信开发有了新的认识。通过这次完整程序的代码编写，我才知道，我们平时所用的软件、玩的游戏，是由多少个逻辑才能完成的，这其中真的需要一个团队很大的工作量。在这其中，我对项目中最满意的部分就是自己制作的素材了，通过对素材的制作，我对平面软件的熟练度有了新的提升，而且这也是自己感兴趣的部分。另一方面，在编程上，我的技术就稍有欠缺，因为编程会涉及到很多概念，你必须将每一个概念弄懂才能独立编出你自己的程序。不过，当你能用代码编出自己想要的效果时，那也是很让人高兴的。在毕业设计完成的过程中也经常感觉到迷茫，不知道自己未来该往哪个方向走，因为在大学里学的知识实在是太少了。在大一大二期间就应该有一个对未来的规划但我那时却跟大多数同学一样都在享受着大学生活。现在只能抓紧时间去提升自己的专业技能了。这期间碰上了国内发生疫情，长时间居家的生活也让人十分懒散，对生活也会很迷茫，不过也是在这段时间里，我也学到了很多的知识，提升到了自我的综合能力。最后，这次毕业项目的完成让我的专业能力变得更扎实，在此过程中也锻炼了自己的实践能力，当然，还有许多不足的地方需要在以后的学习中慢慢改进。

参考文献论文结束需要总结论文结束需要总结小小钰.中国象棋的起源（二）[Z].,2006-07.微信官方.小程序与普通网页开发的区别[Z].,2016.张季谦，仲志平，王再见编著．网页设计与制作第2版[M],2017-01.CameronBarrows.TheconstructionofaqueerrhizomatichermeneuticsthroughanexplorationofDennisCooper'sHTMLnovels[J]，2019.Mozilla官网．2018-6-20希赛网.JS学习之三[Z],2014-07.紫儿妖姬.夜景插画教程[Z],2018.青春时光.前端布局神器display：flex[Z]./qingchunshiguang/p/8011103.html,2017-12JulianMBucknall.UnderstandingTheMinimaxAlgorithm[Z],/blog/univasity-1170222,2011-09

致谢首先感谢在广东东软学院用心教导过我的老师们，到现在为止还让我印象深刻的有几位老师：李晶老师、魏菊霞老师和吴志达老师，这几位老师教授学生时非常用心，课程内容也很充分，在轻松的课堂氛围下也让我学到了很多东西。然后要感谢我的指导老师对我论文的指导，有您的指导我才能发现我项目的不足之处。大学四年的时间过得非常快，以至于我感觉现在还只是停留在大二、大三的阶段。在大一进入校园时满心欢喜、充满期待的感觉到现在还记忆犹新。我的专业是数字媒体技术，四年学习下来发现这是一门比较杂的学科，学的技能很多，但学的不精。由于我本身的逻辑思维并不强，所以写代码能力也比较薄弱，写一些前端的代码倒是还可以，尽管写代码对我来说有点困难也有点枯燥，但我也并不后悔选择了这个专业。因为这个专业，我才知道程序、网络、电子设备等并不那么神秘，也逐渐知道了它们运行原理，像是认识了一个新世界。也因为这个专业，我知道了自己擅长做什么、喜欢做什么，在之后的时光里，我也会往这个方向去努力。同样也是在这四年里，我的一些思想和一些观念也发生了改变。像是慢慢的喜欢上了思考，喜欢上了学习，因为这是让人充实的一个过程。假如有机会，真的很想再次进入校园里去很认真很认真地学习一样东西。我也慢慢地开始从外在上面去改变自己，变成自己喜欢的模样，让自己更自信。也懂得了：每个人做一件事情都可以做得很好，只是看你有没有用心去做，而区别在于擅长和不擅长去做。最后，谢谢陪伴我一起学习的同学们，有你们，课堂才会变得轻松活跃，也是因为有你们，我的大学生活才会丰富多彩，谢谢。

捷键与一些电脑小技巧HYPERLINKwinkey+d:

这是高手最常用的第一快捷组合键。这个快捷键组合可以将桌面上的所有窗口瞬间最小化，无论是聊天的窗口还是游戏的窗口……只要再次按下这个组合键，刚才的所有窗口都回来了，而且激活的也正是你最小化之前在使用的窗口！

--这个就是winkeywinkey+f:

不用再去移动鼠标点“开始→搜索→文件和文件夹”了，在任何状态下，只要一按winkey+f就会弹出搜索窗口。

winkey+r:

在我们的文章中，你经常会看到这样的操作提示:“点击‘开始→运行’，打开‘运行’对话框……”。其实，还有一个更简单的办法，就是按winkey+r！

alt+tab:

如果打开的窗口太多，这个组合键就非常有用了，它可以在一个窗口中显示当前打开的所有窗口的名称和图标●，选中自己希望要打开的窗口，松开这个组合键就可以了。而alt+tab+shift键则可以反向显示当前打开的窗口。

winkey+e:

当你需要打开资源管理器找文件的时候，这个快捷键会让你感觉非常“爽”！再也不用腾出一只手去摸鼠标了！

小提示:

winkey指的是键盘上刻有windows徽标的键●。winkey主要出现在104键和107键的键盘中。104键盘又称win95键盘，这种键盘在原来101键盘的左右两边、ctrl和alt键之间增加了两个windwos键和一个属性关联键。107键盘又称为win98键盘，比104键多了睡眠、唤醒、开机等电源管理键，这3个键大部分位于键盘的右上方。

再补充点

F1显示当前程序或者windows的帮助内容。

F2当你选中一个文件的话，这意味着“重命名”

F3当你在桌面上的时候是打开“查找：所有文件”对话框

F10或ALT激活当前程序的菜单栏

windows键或CTRL+ESC打开开始菜单

CTRL+ALT+DELETE在win9x中打开关闭程序对话框

DELETE删除被选择的选择项目，如果是文件，将被放入回收站

SHIFT+DELETE删除被选择的选择项目，如果是文件，将被直接删除而不是

放入回收站

CTRL+N新建一个新的文件

CTRL+O打开“打开文件”对话框

CTRL+P打开“打印”对话框

CTRL+S保存当前操作的文件

CTRL+X剪切被选择的项目到剪贴板

CTRL+INSERT或CTRL+C复制被选择的项目到剪贴板

SHIFT+INSERT或CTRL+V粘贴剪贴板中的内容到当前位置

ALT+BACKSPACE或CTRL+Z撤销上一步的操作

ALT+SHIFT+BACKSPACE重做上一步被撤销的操作

Windows键+D：最小化或恢复windows窗口

Windows键+U：打开“辅助工具管理器”

Windows键+CTRL+M重新将恢复上一项操作前窗口的大小和位置

Windows键+E打开资源管理器

Windows键+F打开“查找：所有文件”对话框

Windows键+R打开“运行”对话框

Windows键+BREAK打开“系统属性”对话框

Windows键+CTRL+F打开“查找：计算机”对话框

SHIFT+F10或鼠标右击打开当前活动项目的快捷菜单

SHIFT在放入CD的时候按下不放，可以跳过自动播放CD。在打开wo

rd的时候按下不放，可以跳过自启动的宏

ALT+F4关闭当前应用程序

ALT+SPACEBAR打开程序最左上角的菜单

ALT+TAB切换当前程序

ALT+ESC切换当前程序

ALT+ENTER将windows下运行的MSDOS窗口在窗口和全屏幕状态间切换

PRINTSCREEN将当前屏幕以图象方式拷贝到剪贴板

ALT+PRINTSCREEN将当前活动程序窗口以图象方式拷贝到剪贴板

CTRL+F4关闭当前应用程序中的当前文本（如word中）

CTRL+F6切换到当前应用程序中的下一个文本（加shift可以跳到前

一个窗口）

在IE中：

ALT+RIGHTARROW显示前一页（前进键）

ALT+LEFTARROW显示后一页（后退键）

CTRL+TAB在页面上的各框架中切换（加shift反向）

F5刷新

CTRL+F5强行刷新1.打开“我的电脑”-“工具”-“文件夹选项”-“查看”-在“显示所有文件和文件夹”选项前打勾-“确定”

2.删除以下文件夹中的内容：

x:\DocumentsandSettings\用户名\Cookies\下的所有文件(保留index文件)

x:\DocumentsandSettings\用户名\LocalSettings\Temp\下的所有文件(用户临时文件)

x:\DocumentsandSettings\用户名\LocalSettings\TemporaryInternetFiles\下的所有文件(页面文件)

x:\DocumentsandSettings\用户名\LocalSettings\History\下的所有文件(历史纪录)

x:\DocumentsandSettings\用户名\Recent\下的所有文件(最近浏览文件的快捷方式)

x:\WINDOWS\Temp\下的所有文件(临时文件)

x:\WINDOWS\ServicePackFiles(升级sp1或sp2后的备份文件)

x:\WINDOWS\DriverCache\i386下的压缩文件(驱动程序的备份文件)

x:\WINDOWS\SoftwareDistribution\download下的所有文件

3.如果对系统进行过windoesupdade升级，则删除以下文件：x:\windows\下以$u...开头的隐藏文件

4.然后对磁盘进行碎片整理，整理过程中请退出一切正在运行的程序

5.碎片整理后打开“开始”-“程序”-“附件”-“系统工具”-“系统还原”-“创建一个还原点”(最好以当时的日期作为还原点的名字)

6.打开“我的电脑”-右键点系统盘-“属性”-“磁盘清理”-“其他选项”-单击系统还原一栏里的“清理”-选择“是”-ok了

7、在各种软硬件安装妥当之后，其实XP需要更新文件的时候就很少了。删除系统备份文件吧：开始→运行→sfc.exe/purgecache近3xxM。(该命令的作用是立即清除"Windows文件保护"文件高速缓存，释放出其所占据的空间)

8、删掉\windows\system32\dllcache下dll档(减去200——300mb),这是备用的dll档，只要你已拷贝了安装文件，完全可以这样做。

9、XP会自动备份硬件的驱动程序，但在硬件的驱动安装正确后，一般变动硬件的可能性不大，所以也可以考虑将这个备份删除，文件位于\windows\drivercache\i386目录下，名称为driver.cab，你直接将它删除就可以了，通常这个文件是74M。

10、删除不用的输入法：对很多网友来说，WindowsXPt系统自带的输入法并不全部都合适自己的使用，比如IMJP8_1日文输入法、IMKR6_1韩文输入法这些输入法，如果用不着，我们可以将其删除。输入法位于\windows\ime\文件夹中，全部占用了88M的空间。

11、升级完成发现windows\多了许多类似$NtUninstallQ311889$这些目录，都干掉吧，1x-3xM

12、另外，保留着\windows\help目录下的东西对我来说是一种伤害，呵呵。。。都干掉！

13、关闭系统还原：系统还原功能使用的时间一长，就会占用大量的硬盘空间。因此有必要对其进行手工设置，以减少硬盘占用量。打开"系统属性"对话框，选择"系统还原"选项，选择"在所有驱动器上关闭系统还原"复选框以关闭系统还原。也可仅对系统所在的磁盘或分区设置还原。先选择系统所在的分区，单击"配置"按钮，在弹出的对话框中取消"关闭这个驱动器的系统还原"选项，并可设置用于系统还原的磁盘空间大小。

14、休眠功能会占用不少的硬盘空间，如果使用得少不妨将共关闭，关闭的方法是的：打开"控制面板"，双击"电源选项"，在弹出的"电源选项属性"对话框中选择"休眠"选项卡，取消"启用休眠"复选框。

15、卸载不常用组件：XP默认给操作系统安装了一些系统组件，而这些组件有很大一部分是你根本不可能用到的，可以在"添加/删除Windows组件"中将它们卸载。但其中有一些组件XP默认是隐藏的，在"添加/删除Windows组件"中找不到它们，这时可以这样操作：用记事本打开\windows\inf\sysoc.inf这个文件，用查找/替换功能把文件中的"hide"字符全部替换为空。这样，就把所有组件的隐藏属性都去掉了，存盘退出后再运行"添加-删除程序"，就会看见多出不少你原来看不见的选项，把其中那些你用不到的组件删掉（记住存盘的时候