《基于微信平台的棋牌类小程序开发.docx》由会员分享，可在线阅读，更多相关《基于微信平台的棋牌类小程序开发.docx（31页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、摘要随着科学技术的不断提高，人民的生活节奏越来越快。忙碌的人们很少有充足的空闲时间来娱乐休闲。开发中国象棋的微信小程序版本的主要目的也是为了给人们的闲暇时间里增加娱乐方式，其次是为了继承和发扬中华传统文化。此次毕业设计开发的是一款微信平台上的中国象棋小程序。开发工具使用的是微信官方提供的微信开发者工具。实现的编程语言是微信的WXML(WeiXin Mark Language，微信标记语言)、WXSS(WeiXin Style Sheet，微信样式表)、js。项目素材通过Adobe illustrator 和photoshop制作。项目素材上传至腾讯云，并在小程序加载时从中获取。游戏玩法主要是传
2、统的中国象棋玩法，在其中增加了人机对战并对UI界面做了美化。用户通过触碰屏幕控制棋子走动，电脑会进行相应的操作。由于微信小程序的轻便性，用户能在零碎的时间里进行娱乐，中国象棋小程序的推出能让更多人方便地体验到经典游戏的乐趣，从而起到传播中华文化的作用。关键词：中国象棋 微信小程序 人机对战 中华文化AbstractWith the continuous improvement of science and technology, peoples life rhythm becomes faster and faster. Busy people seldom have enough free
3、time to entertain. The main purpose of developing wechat applet is to increase the entertainment way in peoples leisure time, and then to inherit and develop the traditional Chinese culture.This graduation project is a Chinese chess program on wechat platform. The development tool for the programme
4、is the wechat developer tool provided by wechat. The programming languages implemented are wechat wxml (wechat mark language), wxss (wechat style sheet), JS. The project materials are produced by Adobe Illustrator and Photoshop. The project material is uploaded to Tencent cloud and obtained from it
5、when the applet is loaded. The games playing method is mainly the traditional Chinese chess playing method, the man-machine battle is added into the game and the UI interface is beautified. The user controls the movement of the chess pieces by touching the screen, and the computer will carry out cor
6、responding operations.Because of the portability of wechat app, users can have fun in the fragmentary time. The introduction of Chinese chess app can make more people easily experience the fun of classic games, thus playing a role in spreading Chinese culture.Key words: Chinese chess Wechat AI battl
7、e Chinese culture目录第一章 绪论11.1开发背景及意义11.2国内研究现状11.3研究的目的2第二章 微信小程序开发的技术支持32.1微信开发者工具32.2小程序与网页开发的区别32.3小程序代码构成32.4 HTML介绍32.5 CSS介绍42.6 JavaScript介绍42.7其他技术支持5第三章 小程序制作规划和分析63.1小程序可行性分析63.2小程序制作规划63.3小程序的功能说明7第四章 小程序的实现过程84.1制作UI素材84.1.1设计思路与过程简述84.1.2具体制作过程842编写代码124.2.1Loading页面：124.2.2Begin页面：124.
8、2.3Css display：flex134.2.4Index页面15第五章 小程序的功能测试225.1 测试环境225.2 登入测试225.2 游戏测试225.3 问题总结235.4 测试结果24第六章 论文总结25参考文献26致谢27第一章 绪论1.1开发背景及意义在当今时代，智能手机已成为我们生活中不可或缺的一部分。对于大部分当代年轻人而言，假如离开了手机或是离开了网络，他们的生活就会变得很不方便，也使得他们的生活少了许多乐趣。据工信部发布的2018年5月份通信业经济运行情况，我国三大运营商移动电话用户总数有14.3亿，在1-7月里净增用户9150万户。由此可见智能手机发展迅速且对我们生
9、活影响深刻。其中，微信是中国排名第一的社交软件，排在第二第三的社交应用根本动摇不了它的地位。根据2019微信数据报告发布得知，2019年微信月活跃已经超过11亿，达11.51亿，可以说是，在中国，一个拥有智能手机的人，那么他极大可能是一名微信用户。面对微信如此庞大的用户数量，我们开发和推广中国象棋游戏当然是可借助微信这一途径。在2017年，微信低调上线了首批小程序，紧接着，又推出了风靡一时的“跳一跳”小程序，并在微信启动页面进行了推荐，一瞬间让广大微信用户了解到了微信小程序这一新功能。个人或者用户能够制作自己的小程序并上线，这对许多开发者来说无疑是一个新的机会。1.2国内研究现状中国象棋是起源
10、于中国的一种棋戏，由于其用具简单，趣味性强，在民间流行极为广泛。【1】中国象棋是中华民族的文化瑰宝，具有悠久的历史。其玩法模仿的是古代战争，旨在考验双方玩家的军事策略。玩家若想获胜，首先得熟悉象棋规则，其次得预判对手的下一步走法并做出应对。在国内，中国象棋深受老百姓喜爱，大街小巷中常常能够看见一群人围在一起研究象棋。当然，这部分人大多是老年人，我也经常在公园或是广场看见他们的身影。国内的年轻人对中国象棋的喜爱不如老一辈人，因为他们的生长环境不同，现在的娱乐游戏确实有许多玩法新颖、趣味性更强的游戏供年轻人们选择。所以，中国象棋很可能就被当代年轻人所遗忘，因此，开发一款下载轻松，界面简洁的中国象棋
11、小程序供大家娱乐就显得尤为重要。1.3研究的目的研究微信小程序的目的是让自己熟悉微信小程序的开发流程，了解微信小程序的开发环境以及微信小程序提供的API。这对以后开发微信小程序都很有帮助，由于微信在国内的普及性，许多企业为了宣传和推广，都会制作自己的小程序。预先熟悉微信小程序也是给自己增添一些额外的技能。而以中国象棋作为开发项目是为了弘扬中华民族传统文化，继承中国象棋传统玩法并加以创新，肯定能让它重现光芒。开发中国象棋小程序同时也是给人们增添一点乐趣，在无聊的时候可以与电脑对战一局，玩法轻松，不会让人过度激动，还能开发智能，启迪思维。1.3结构总览文章中先是介绍项目使用到的技术，包括编程语言、
12、平面设计软件等。然后开始介绍制作项目的思路与规划，主要的实现的逻辑是怎样的。第四章开始是具体的制作流程，素材制作部分包含了每一个UI素材的制作方法。代码编写部分，从小程序的几个页面入手，分别介绍这几个页面的功能是什么，代码又是如何实现小程序里的功能的。小程序制作完成后是测试阶段，这里用表格记录了测试的过程和结果，项目制作过程遇到的问题也一并写在了这里。之后是对论文的总结，说一下项目完成后的一些心得体会。再下一页是参考文献的列举，文章中有标注引用的出处都写在了这里。最后是致谢，表达自己对老师们、同学们的感谢，说说四年大学生活的感谢。第二章 微信小程序开发的技术支持2.1微信开发者工具微信开发者工
13、具是微信官方提供给开发者的开发工具。微信开发者工具集合了开发调试、代码编辑、小程序的预览及发布等一站式功能。跟大多数办公软件一样，微信开发者工具有启动页、菜单栏、工具栏等，结构与功能也是大同小异。对于有使用电脑经验的人来说，操作微信开发者工具并不是一件难事。2.2小程序与网页开发的区别小程序开发与普通的网页开发非常相似，这使得以前的前端工程师能够很容易转型到微信小程序开发。虽然二者非常相似，但它们之间还是有些许区别的。在网页开发中，渲染线程和脚本线程是互斥的，在小程序中则是分开的。网页开发能使用DOM对象对DOM中的元素选择和操作，而由于小程序逻辑层和渲染层是分开的，相比较而言就会少了相关的D
14、OM API。【2】2.3小程序代码构成一个小程序项目由4种不同类型的文件构成，分别是JSON配置文件、WXML模板文件、WXSS样式文件和JS脚本逻辑文件。其中JSON并不是编程语言而是一种数据格式，用于配置工具、项目或者是页面的属性。WXML则跟网页编程中的HTML非常相似，它们都是用于描述当前页面的结构的。稍有不同的是WXML中标签名字于HTML中的不一样以及WXML中增加了一下wx:属性。WXSS跟CSS同为样式文件，WXSS拥有CSS大部分的特性，同时也进行了一些扩充和改变。最后一个文件，JS文件，一个页面想要实现动态响应用户操作靠的就是它了。JS文件能够动态地改变数据变量、样式属性
15、等等。在JS文件中有一个Page对象，它作为一个页面构造器，将其中的data数据和WXML一起渲染出页面，就得到了我们使用的小程序的每一个页面。2.4 HTML介绍HTML是一种标记性语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly创立于1990年，英文全称是Hyper Text Marked Language，中文翻译为超文本标记语言。【3】HTML使用标签来描述一个页面，浏览器通过解释HTML文档渲染成我们浏览的页面。HTML其实就是一种文本格式，我们可以使用任何的文本编辑器来修改其中的代码。以下引用的一段文字能够很清楚的说明万维网（wor
16、ld wide web）上的一些概念，便于我们更好地使用HTML。万维网（world wide web）上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级
17、文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。【4】小程序中的WXML跟HTML非常接近，同为描述页面结构的标记语言，进行过网页前端开发的我来设计小程序的页面不会很难。2.5 CSS介绍CSS,英文全称：Cascading Style Sheets,是一种用来表现HTML等文件的样式的计算机语言。假如把HTML比喻成骨架，那么CSS就像是骨架之外的皮肤。CSS能够HTML元素的外观，包括颜色、边框、边距等等。通过一种“选择器属性:属性值”的格式即可实现元素外观的改变，有了CSS，我们的页面才不再单调，更具个性。小程序中，WXSS在CSS基
18、础上进行了扩充，例如尺寸单位等，其余基本上直接使用CSS编写小程序的样式文件即可。2.6 JavaScript介绍JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。【5】JavaScript由下图1三部分组成：图2-1 JavaScript的组成部分ECMAScript,描述了该语言的语法和基本对象。文档对象模型（DOM），描述处理网页内容的方法和接口。浏览
19、器对象模型（BOM），描述与浏览器进行交互的方法和接口。【6】通过JavaScript，我们能够对用户事件作出相应，能够动态改变网页浏览效果。在小程序中，我们通过JS文件来添加事件的相应方法，还可以在其中调用小程序提供的API，来丰富用户的页面操控感。2.7其他技术支持本次的中国象棋小程序开发，需要用到许多图片素材，像是棋子图片、棋盘图片、背景、UI图标等等。这些素材是由Abobe illustrator 和 Photoshop制作而成的。音乐和音效素材是从网上搜集的。第三章 小程序制作规划和分析3.1小程序可行性分析（1）技术可行性制作小程序需要掌握HTML、CSS、JS三种语言，我在大二时
20、学习过web前端开发，所以对这三种语言都算熟悉，开发小程序应该是不成问题的。不过考虑到制作的是中国象棋，难点在于走棋规则的实现和电脑对战代码的编写，这个方面要预先构思好。（2）经济可行性制作一款小程序需要一台PC，一台移动电话，服务器采用的是腾讯云提供的云开发服务，可从云下载图片和上传数据。目前来说这些设备都齐全，对于开发应该没什么问题。3.2小程序制作规划（1）制作前设想制作前首先要查找现有的小程序例子，了解当前行业环境如何，也可以从他人的作品中得到灵感。我这里找到的有天天象棋和途游五子棋两个小程序参考案例。首先，在小程序启动时要有一个加载页面，在这页面上标有“正在加载中”类似字样。加载完成
21、后，用户进入的是主页面，主页面配备三个或以上的按钮，按钮主要实现开始游戏和设置等功能。点击开始游戏进入二级界面，选择对战模式，暂定默认为人机对战。点击人机对战进入游戏，进入此页面时出现有棋盘，玩家需再次点击“开始对局”方可布置上棋子并开始游戏。此页面配备的按钮有悔棋键和后退键。（2）具体制作思路具体的游戏玩法通过小程序里的canvas组件来完成。在canvas上绑定点击事件，当用户点击时，判断点击的位置处于画布中的哪个位置。然后判断此位置上是否有棋子，有棋子：表示用户可能是想选中棋子或是在选中棋子的状态下进行吃子的操作；无棋子：表示用户可能是想在选中棋子的状态下进行移动棋子或是点空（乱点）。分
22、布对以上两种情况进行处理，选中棋子：改变被选中棋子的透明度并绘制出提示点，然后重绘canvas上下文内容。吃子：删除被吃棋子在数组中的位置，移动选中棋子的位置，然后重绘canvas上下文内容。移动：跟上述操作类似。点空：提示用户不能将棋子移动到当前点击的位置。以上说明了玩法的实现思路，即整个游戏的核心，具体的实现过程会在下面的章节详细叙述。3.3小程序的功能说明1、小程序每个功能都要描述清楚人机对战功能，玩家对战功能，单人模式，难度选择等2、对弈数据怎么存储的，数据库的设计中国象棋小程序要实现获取用户信息、人机对弈、静音、悔棋等功能。当前棋局的数据存储在一个二维数组里面。图3-1 小程序界面导
23、航图人机对战功能：通过alphabeta算法让程序扮演玩家来操作棋子，实现人机对战功能人机对战的难度选择：通过改变alphabeta算法的搜索深度实现悔棋：实现下棋的悔棋功能。静音：点击可切换音乐播放与否的状态。后退：点击后可返回至主页面（弹框让用户确认）。第四章 小程序的实现过程实现过程前加一章：小程序系统设计每个功能的算法流程图制作包括：1、艺术制作，技术制作4.1制作UI素材使用Adobe illustrator和Photoshop制作小程序的LOGO，用于加载页面的显示4.1.1设计思路与过程简述小程序的设计主题是中国象棋，LOGO就要有代表中国象棋的元素，让玩家一目了然。刚开始的思路
24、是制作一枚很精致、立体感很强的“象”棋子。可是由于绘制技术有限，绘制效果并不理想，于是改变思路制作了一枚平面化、简约的棋子作为LOGO。LOGO制作完成后，开始小程序背景制作。制作的背景是一种扁平化的插画风景图，虽然细节不多，不过给人的视觉效果很不错。接下来就是棋盘的制作了，棋盘的制作比较讲究，做出的效果也非常逼真，细看会观察到它具有真实棋盘所有的纹理和光影。完成棋盘后，就到了棋子的制作了。棋子的制作风格同样是偏向平面的，棋子配色采用黑白两种颜色，为了增强棋子立体感也给它们添加了投影效果。最后到了小程序中UI图标的制作，为了保持整体，UI图标配色采用的是同类配色，而为了丰富效果，使用的是渐变填
25、充色。4.1.2具体制作过程棋盘的制作：首先在AI中绘制出棋盘格，10行9列，注意间隔距离要保持相等，而且楚河汉界的位置也要注意留出。利用AI中的直线工具将皇宫格的两条斜线拉出来，将皇宫格区域作出区分。同样是利用直线工具或是矩形工具，标记出兵位和炮位，制作方法很多，能做出效果即可，需要注意的一点的标志跟棋盘的比例是否美观。棋格绘制完成后，再给它加一个粗一点的外边框。接着在楚河汉界位置用行楷字体写上“楚河 汉界”，位置调整到合适。然后是棋盘的纹理制作，此步骤利用Photoshop完成，在网上找一张木头质感的纹理素材，在PS中用涂抹工具将其弱化，使其木纹不要太显眼。然后使用调整图层调整一下色调和亮
26、度等等，然后是做出光效，用画笔工具，选择颜色为白色，笔尖选择柔边，透明度和流量自行调整合适，在素材上点上几笔，效果完成。纹理素材完成后导入到AI继续其他步骤，在AI中绘制一个矩形边框作为棋盘的高光，使用图层模式将高光框叠加在棋盘上面。然后给棋盘添加一个描边以突出棋盘，最后给棋盘加个厚度（画个矩形移动至底层实现），添加投影效果，棋盘制作完成，成品如下图。图4-1 棋盘成品图棋子的制作：在AI中，将两个圆形叠在一起（一大一小，一个填充，另一个仅填充描边），然后将文字转曲并添加外发光效果，其他类型的棋子也是同样的制作方法。棋子素材制作完成。UI图标制作：“设置”图标：跟大多数的游戏的设置图标一样，我
27、想制作的设置图标是一个齿轮的形状。在AI中，创建一个圆形，仅填充描边，描边大小调整至合适，将此图形轮廓化描边。创建一个矩形，比例调整合适，移动到圆边上面，使用旋转工具，移动旋转中心到圆边中点，复制，旋转角度为30，Ctrl+D 重复以上步骤，设置图标就制作好了。“分享”图标：用一个矩形和三角形并凑成一个箭头的形状，再利用转换的工具将一些线拉成弯的，同时将一些锚点去除，再给箭头加上一点圆角，分享图标制作完成。“客服”图标：目标样子是一个带着耳机的人形头像。在AI中绘制一个圆，使用选择工具通过调整锚点使得整个圆变椭一点，让它整体看起来像个头形。接下来同样的方法绘制另一个圆作为身体上半部分。然后是耳
28、机部分，用矩形加圆角制作耳机的耳垫，圆形减半加描边用作耳机带，加制作的元素拼凑在一起，此时，客服图标已制作完成。其余素材像是按钮、小程序LOGO等皆是通过AI变换相应的形状加渐变填充制作而成的，在此就不做过多的赘述了。以下是所有素材的集合图。图4-2 UI素材总览背景制作：背景制作是UI素材制作中比较重要的一环，一个游戏的背景直接影响整个游戏的风格和对玩家的感觉。目前大多数中国象棋类的游戏使用的是中国传统文化作为游戏的风格，像是书法、水墨之类的。可是我的制作水平有限，制作水墨风格没什么经验，所以背景的制作选择的是平面的插画风格，参考了网上的一些教程，根据自己的思想进行了一些改进制作成的。制作过
29、程主要是选区偏紫和偏蓝两种颜色作为主要的渐变色，调整渐变的不透明度和渐变程度，绘制一个矩形，用此颜色作为填充，此矩形即为我们的背景，看上去会有一种太阳快下山了的感觉。然后绘制几棵树，树绘制方法是用圆形和矩形完成，具体按照个人喜好调整，没有过多限制，不过颜色方面选择同类色，整个画面看上去会比较整体。紧接着绘制一个月亮，月亮在画面中就是一个白色渐变填充的圆形，调整一下不透明度，为其添加外发光效果使其更像一个月亮。为了搭配月亮，也为了丰富我们的天空，给天空增加一些星星。星星通过散点画笔完成，而不是一个一个的圆复制而成的，给星星添加叠加的图层模式使其融入星空。再画几颗流星增加画面氛围，直线工具绘制直线
30、，改一下宽度配置为头大尾小的类型，渐变填充（白色到透明度为10%的白色），同样是叠加的图层模式，流星绘制完成。大地的绘制是两个椭圆，自行调整形状，使用剪贴蒙版遮盖不必要的部分，调整好颜色，整体的画面就制作完成了。下面是背景的完成图。【7】图4-3 背景素材UI素材部分制作就差不多了，项目需要用到的图片素材都齐全了，有特殊需要时可再继续制作，接下来就是编程部分了。42编写代码上文中有提到过，html是我们页面的骨架，那么我们就先把我们的骨架搭建好，这里我们先是制作一个loading页面，也就是加载页面，有了这个页面能够给用户一种等候时的期待感。4.2.1Loading页面：编写一个，为其分类为c
31、ontainer，即作为此页面的容器。在wxss中添加样式height: 100vh; width: 100vw; background：#faf8ee；实现加载页面的动画效果的思路是：在container中分别有四个，在中加入属性class=current=0?sct:，current总共有四个值，假如current为0，则第一个的类为sct，否则为空。如果类为sct，那么当前拥有属性background-color:#ccc，显示为深灰色。静态配置就设置完成了，核心在于小程序提供的数据绑定功能，在wxjs中定义一个计时器，每0.4秒执行一种回调函数，回调函数中的setData可以定时将cu
32、rrent值+1，从而实现动态改变渲染层上current的值，loading页面的动画效果就实现了。然后在其中加入一个组件放置我之前做好的LOGO图标素材，最后，在定时器定够足够时间后就调用小程序的接口页面跳转以实现转换页面，这样基本的loading页面制作完成。4.2.2Begin页面：Begin页面是用户等待加载完成后进入的页面，也就是我们玩游戏时的主界面。在此页面中有4个按钮和4个功能选项，点击“开始游戏”按钮进入游戏页面。同样的在此页面加入一个container类的用作装载页面的元素，注意这个处于最外面的容器要用display：flex属性来布局，这样的布局会顺利许多。再写一个小用于承
33、载一个组件，这个就是Begin页面的背景图。然后是添加四个组件，为了实现按钮的美化，在中加入,用到的是之前制作的素材。这里需要注意一下默认是加载一张原像素的图片文件，这里要设置一下宽度属性并且组件也要加上属性widthFix，以保持宽度并自动调整高度。按钮制作完成后我发现了一个问题，就是按钮受到用户点击时没什么变化，这里我想实现一个按钮被按下时会缩小的效果。参考了网上的一些资料，得知实现此效果也是要用的小程序中的数据绑定。首先，给按钮绑定一个点击事件并给事件加一个事件处理函数，然后，按钮的大小属性需要写成是数据绑定格式的，也就是这种“”。于是，在事件处理函数中我们就可以改变按钮的属性了，那么，
34、按下按钮的效果也就完成了。不过此时会出现一个问题，按钮被按下时，大小是改变了，不过紧跟在后面的块级元素也跟着动了位置。思考了一下，想出了解决方案，在外加一个固定大小的就可以了，此问题也得到了解决，按钮制作算是告一段落。然后是UI选项的制作，这项制作起来不算难，不过在html布局上面倒是走了不少弯路，比如元素不居中、元素重叠在一起等等。而这些问题后来通过使用display:flex布局也算是解决了。总的来说，Begin页面也制作完成了，下面想着重介绍一个知识点，display:flex，个人心得，这个属性真的挺重要的。4.2.3Css display：flex在这个属性中，flex是flexib
35、le的缩写，意思是灵活的，这种布局也被叫作弹性布局。下面引用一张图（图4-4）来帮助我说明这种容器属性。图4-4上图说明了，在flex布局中有一条水平主轴和一条垂直主轴，图中也标记了主轴开始的位置与结束的位置，都是处在容器的边界。flex item即为容器中的元素。flex有六个属性，配合使用这些属性就能很灵活地给页面进行布局。接下来介绍一下这些属性。【8】1.flex-direction从字面上理解这个属性就是设置方向的意思，通过设置这个属性能够调整容器内元素沿着哪一条主轴排列。比如flex-direction:row，就是让容器内元素沿着水平主轴来排列，如下图。图4-5 flex-cont
36、ainer同样的，flex-direction:column即是让容器内的元素沿着水平主轴排列。而flex:direction:row/column-reverse则是将元素的排列顺序调转。有了这个属性，我们就可以随心所欲而又有规律地布局我们的页面了。2.flex-wrap控制弹性布局容器内的元素换行与否，默认值为不换行，即我写两个div，它们会在同一行内。3.flex-flow是以上两种属性的综合，也就是简写属性，比如写成“row nowrap”4.justify-content从英文译为中文就是对齐内容的意思。当此属性值为center，元素在主轴上居中排列；当属性值为flex：start，
37、那么就是从图中的start点开始排列；当属性值为flex：end则是从end点开始排列。当属性值为space-between,元素时从主轴的两端往中间排列。属性值space-around使得每个元素两侧的间隔相等。5.align-itemsalign-items用于元素在当前页面上横轴或是纵轴方向的对齐。如下图即是元素在纵轴上低=底对齐。图4-66.align-content该属性定义的是容器内有多根轴线时的对齐方式，在我上图的图例都是只有一根轴线的，所以该属性在上面的情况是不起作用的。4.2.4Index页面index页面是我定义为进行游戏的页面，由begin页面转入。这个页面的js代码是整
38、个游戏的核心，一共有1100多行。当然，这些代码也不是我自己凭空而写的，参考了一个html5的象棋游戏，再将其代码转化成小程序并进行改进的。在这个js文件里面有三个大类，分别是com类、play类和AI类。Com类控制一些基本的走棋规则，资源路径等。play类用于控制棋子的走动。AI类是与电脑对战时的人工智能算法。主要的实现逻辑是，在棋盘上建立一个二维坐标系，左上角的“車”位为（0,0），往右走，x轴坐标增加，外下走，y轴坐标增加。这样，棋盘上的每一个可走的位置就都定义好了，然后是将这些坐标存在一个二维数组里面。当用户点击画布时，给事件绑定一个判断点击位置的方法，再将点击的位置转化为棋子的坐标
39、位置（x,y）,如此一来就可以让用户控制到棋子了。Canvas要在用户每次点击时更新画布内容，这样才能让整个游戏“动”起来。下图的二维数组就是用来记录每个棋子的位置的。其中的首写字母是棋子类型的缩写，比如大写的C0代表的是敌方的第一个車，而c1代表的是我方的第二个車。图4-7 存储棋子位置的二维数组当棋子位置变动时，就改变其在二维数组中的位置。走棋规则的实现：走棋规则，就是要限制棋子可以走的位置。比如“車”，这类棋子能走x轴或y轴上的空位和非友方位。实现这种限制的写法就是，先判断棋子类型和阵营，然后往其可走的方向检索，如果是空或是有敌方棋子在此位置，则可将此位置的坐标加入要返回的数组当中，这个
40、数组就是棋子可走位置的集合。以下是“車”的左方向检测是否可走的写法，其它方向也是以此类推。图4-8“马”的走棋规则：首先，马在象棋中能走上、下、左、右四个方向每个方向各两个点的位置，前提是其所走的方向的第一个直线位置不能有棋子阻挡着。如下面我制作的解释图，在“馬”所要走的前方，红色的叉处不能有棋子，它才可以走到该方向的绿色点出。图 4-9 马的走棋规则实现的写法同样是对各个方向进行检查，它比“車”要多一个阻挡棋子的判断，然后还是要走的位置上为空或为敌方棋子则可以将该位置存入可走的数组，返回给我们的棋子。“相”的走棋规则：相跟马的走棋规则写法上比较相似，同样是所走方向上不能有棋子阻挡。“相”走的
41、是45方向，不过“相”只能在己方阵地走，不能过河进攻，这是跟“馬”的一个区别。“士”的走棋规则：士只能在皇宫格能移动，移动也只能按45方向移，这里写法上就要给士的x、y范围做一个限制，限制在皇宫区域即可，同样，还是要所走的位置要是空或是有敌方棋子才可走动。“将”的走棋规则：将跟士又很类似了，它们都只能在皇宫格内移动，士是用来保护将的。将能走的方向是上、下、左、右，这点跟“車”很像，不过“将”是每次只能够移动一格的。“炮”的走棋规则：炮在走棋规则上的写法就要难一点了。玩过中国象棋的人都知道，炮是隔着一个棋子进行吃子的，无其他棋子阻隔时能像“車”一样移动。“炮”的移动方向也是十字方向，在写法上面加
42、入一个变量n来记录“炮”在当前方向上阻挡的棋子数。当n不为0了，在此也就是n为1且此方向上有一个敌方棋子，那么将此位置加入到可走的数组里，然后break跳出循环。假如n = 1（阻挡位已有棋子），但此方向上先是有一个己方棋子再有敌方棋子，这种情况是不会影响的，因为在n=1时，只判断一次，有可吃子的位置就加入数组，没有则跳出循环，以下是单个方向上的判断代码,其他方向也是同样的实现原理。图 4-10 “炮”的走棋规则代码“卒”的走棋规则：“卒”的写法就比较简单，在中国象棋中，“卒”是在过河前只能往前走，不能往后退，在过河之后能往前、往左、往右三个方向走，而且每次移动只能移动一个格子。那么，我们只需
43、要在写法上“卒”的往右或往左走写上一个y的限制即可实现。Play对象是用于给用户操作棋子的，操作棋子的方法都写在这里面。下面是用户点击了画布的一个处理流程图。图 4-11 用户点击事件处理流程图要改变棋子位置需要做两个操作，一是改变棋子集合中棋子的坐标属性，二是改变当前的地图数组（上文提到过的二维数组）。悔棋功能的实现：悔棋功能在许多棋类游戏都是带有的，这功能够提升到玩家的体验。实现的逻辑是，在初始化时，定义一个用于存储走棋记录的数组。那么走棋记录是如何被记录进去的呢？这里涉及到了棋盘坐标，比如说，“車”从（0,0）位移动到了（0,1）位，也就是向前走了一个，那么我们将走棋记录为0001，前两
44、个数字代表着旧位置的坐标，后两个数字代表新位置的坐标。点击悔棋按钮时，将数组最外的两个值移出去，即己方最新的走棋记录与敌方最新的走棋记录。移出去之后，初始化一下棋子地图，然后按走棋记录数组重新走一遍棋子，从而实现悔棋。当然这种算法可能越到后面计算越复杂，但这也是我目前的实现方法。以下是悔棋功能的部分代码。图 4-12 实现悔棋功能的部分代码人工智能实现：人机对战是在这整个项目中最具难度的代码，我也是参照着一个html的象棋游戏写出的代码。刚开始看这部分的代码时看得一头雾水，加上自己本身逻辑思维较差，上网查了许多资料才勉强弄懂。在查资料的过程中还见识到了一个新概念：极大极小算法。这是一种许多人机
45、对战都会涉及到的子算法，我的理解不够透彻，但用我的话语来说就是预测棋局的下几步，并选择对自己最有利的走法，也是对对手最不利的走法。比如，在一场“井字棋”对战中，刚开始我面对的是空棋盘（也是根节点），然后下一步是对手走棋（第一层），我们要在对手走棋后进行应对（第二层），如此循环下去直至到叶子节点。因为是“井字棋”，所以能将预测图都列出来，如果是每一步大概有35种着法的国际象棋，那么在层数大于6后计算量将会变得非常庞大，以至于计算时间变长。具体实现：AI走棋，我们先要获取到当前己方的所有棋子，然后获取这些棋子所有合理的着法。接着是将这些着法都走一遍，此时，对手也递归调用以上方法，调用到层数为0时（
46、递归到根），则执行局面评价函数，评价当前局面并给出数值，取数值最高作为最佳着法。然后让AI调用下子方法完成走棋操作。下面是AI类执行的一个流程图，交换双方的过程为搜索深度。图4-13 AI类运行流程图第五章 小程序的功能测试5.1 测试环境CPU：Intel Core i7-4720HQGPU：Nivida GTX950MRAM：8GROM：WD10JUCTOS：Windows 10 64bit5.2 登入测试测试界面输入预期结果实测结果状态Loading通过Begin开始游戏跳转页面跳转页面通过Index开始对局棋子展示棋子展示通过5.2 游戏测试游戏功能测试输入预期结果实测结果状态选择棋子
47、正常正常通过移动棋子正常正常通过吃子操作正常正常通过将军判断正常正常通过5.3 问题总结遇到的问题影响解决办法完成结果状态Canvas绘图时出现了异步绘图造成用户点击后棋子位置还未更新的问题转换绘图顺序完成通过Js文件整合问题导致一个文件内容过多，更改工作变得繁琐利用微信小程序的模块化导出未完成保持一个Js文件图片路径书写错误导致小程序控制台报错，模拟器无显示更改为正确的图片路径格式完成通过走棋规则的实现棋子可以无视规则在棋盘上任意走动参考网络上的代码并在草稿上自己走一遍完成通过小程序中页面的布局问题布局上出现排版错乱，影响美观利用display：flex进行布局完成通过获取不了用户信息无法在游戏中设置用户头像、昵称等利用小程序的新接口：通过按钮获取用户信息完成通过