微信小程序五子棋设计源码与报告等资料下载

微信小程序是腾讯微信团队推出的基于微信生态的应用号，是一种跨平台，媲美原生App操作体验的web应用，它拥有，即用即走、离线存储、跨平台等特点。

微信小程序的定义：小程序是一个可以帮助用户高效解决问题的工具，用完即走；其优质的用户体验会推动用户走了再回来。同时微信给小程序开放了多个入口帮助用户能够找到自己使用过或者想要使用的小程序。

最大的优势就是：很多App在微信打开后需要跳转，而小程序依靠月活10亿的微信用户，可以直接在微信中打开运行。购物类小程序打开后界面类似其他商城App，让用户购物体验更好。也可以直接在微信群分享，熟人分享转化率更高。

微信群里的小游戏像病毒一样刷屏，虽然腾讯表示会阻止这样的病毒式分享，但是依然无法阻挡小游戏的火爆。这是一条很好的变现方式。

碎片化时间的利用充分展示了小程序的优越性，用完就走，无需安装和留存，腾讯给小程序开放了很多入口，首页下拉可以看到小程序的使用记录。

借助小程序数据助手对用户特征消费行为特征数据的采集和处理，可进行多维度的用户消费特征分析、产品策略分析和销售策略指导分析，通过准确把握用户需求，增加用户互动的方式推动营销策略的策划和执行。

本次微信小程序—双人对战五子棋游戏，能够在微信中实现好友与好友之间的双人对战游戏，能够加强好友之间的联系，加强互动。如今微信在即时通信领域发挥着越来越重要的作用，而作为在微信上运行的小程序将会变得更加重要，也会被使用的越来越频繁，所以此次设计将会在微信web开发平台上制作微信小程序。

小程序是微信内的云端应用（所以无需安装），不是原生App，通过WebSocket 双向通信（保证无需刷新即时通信）、本地缓存（图片与UI 本地缓存降低与服务器交互延时）以及微信底层技术优化实现了接近原生APP 的体验。

本质上就是JS+CSS+HTML5，不过不能直接用HTML标签，微信提供一个组件库，没有DOM和其他浏览器上的API；网络、Canvas等也重新包装过。

Java是由Sun Microsystems公司推出的Java面向对象程序设计语言和Java平台的总称。Java是由James Gosling和同事们共同研发，并在1995年正式推出。Java最初被称为Oak，是1991年为消费类电子产品的嵌入式芯片而设计的。1995年正式更名为Java，并重新设计用于开发Intern et应用程序。用Java实现的HotJava浏览器（支持Java applet）显示了Java的魅力：跨平台、动态Web、Internet计算。从此，Java被广泛接受并推动了Web的迅速发展，常用的浏览器均支持Java applet。另一方面，Java技术也不断更新。Java自面世后就非常流行，发展迅速，对C++语言形成有力冲击。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。2010年Oracle公司收购Sun Microsystems[2]。

XML语言是一种可扩展标记语言，标准通用语言的子集，是一种标记电子文件使其具有结构性的标记语言。它非常适合万维网的传输，提供统一的方法来描述和交换独立于应用程序或提供商的结构化数据。是Internet环境中跨平台的、依赖于内容的技术，也是当今处理分布式结构信息的有效工具。早在1998年，W3C就发布了XML1.0规范，使用它来简化Internet的文档信息传输。

为帮助开发者更方便、更安全地开发和调试基于微信的网页，我们推出了 web 开发者工具。它是一个桌面应用，通过模拟微信客户端的表现，使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。

小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序。

就像 HTML 的 div, p 等标签一样，在小程序里边，你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上，

为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。

要获取用户的地理位置时，只需要：

调用微信扫一扫能力，只需要：

需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。

更多的 API 能力见 小程序的API 。

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

此外 WXSS 仅支持部分 CSS 选择器

本微信小程序是一款界面简洁的游戏类小程序。该小程序是五子棋游戏，拥有五子棋的基本功能，黑白双方，下棋、悔棋、判断胜负、重新开局的功能。此小程序能够在微信中实现好友与好友之间的双人对战游戏，能够加强好友之间的联系，加强互动。

绘制棋盘—通过棋盘宽高和格数计算间距，根据一定的间距绘制格子相同的棋盘，同时保存坐标点。相关代码如下：

drawLine(arr){

arr.forEach(current => {

this.ctx.setFillStyle(this.lineColor);

this.ctx.beginPath();

this.ctx.lineWidth = 1;

this.ctx.moveTo(current[0].x, current[0].y);

for (var i = 1; i < current.length; i++) { this.ctx.lineTo(current.x, current.y);

}

this.ctx.stroke();

this.ctx.closePath();

this.ctx.draw(true); });

}

drawChessboard(){

// 每个格子的宽高

var everyLen = this.everyLen;

// 标记坐标的个数

var count = 0;

// 从纵向保存坐标

var arrY = [];

// 双循环计算每个坐标的横纵坐标

for(var i = 0;i <= this.type; i++){

var arr = [],arr0 = [];

for(var j = 0;j <= this.type; j++){

count++;

arr.push({

y: this.margin + i * everyLen,

x: this.margin + j * everyLen,

pointX: j,

pointY: i,

index: count

});

arr0.push({

x: this.margin + i * everyLen,

y: this.margin + j * everyLen }) } // 清空canvas

this.ctx.clearRect(0, 0, this.width, this.height);

// 保存横线坐标和竖线坐标

this.everyPoint.push(arr); arrY.push(arr0); } // 绘制横向线 this.drawLine(this.everyPoint); // 绘制竖向线

this.drawLine(arrY);

}            

对棋子的位置坐标进行相关定义，各种相关代码如下：

在每局结束后将可以手动进行重置棋盘，相关代码如下：

在本次微信小程序的制作中，实现了五子棋小游戏的各种基本的功能，能够成功运行并进行双人对弈、悔棋、重置棋盘等功能。

通过此次小程序制作，了解了微信小程序的制作过程、运行环境、开发环境、脚本语言等，为以后软件的学习打下了一定的基础。

在制作过程中，绘制棋盘前必须清空canvas，方便最后的重新开始和重置棋盘；对当前棋子的坐标四个方向的判断，采用的原始坐标而不是计算后的绘制坐标；在判断持棋人时，各自采用一个值，方便添加悔棋功能。

在这次微信小程序-五子棋的开发过程中，虽然困难重重，但我始终坚持不放弃，积极请教同学。在开发过程中，无论我出现多么简单的错误，同学们都耐心地指导我一步一步去改正，并最终从中吸取经验，防止下次再犯。所以在项目基本完成之际，我要感谢许新华老师给我们这次成长的机会，也要感谢给予我帮助的同学们。

0.png (46.18 KB, 下载次数: 73)

下载附件

2018-7-3 00:24 上传

0.png (9.1 KB, 下载次数: 78)

下载附件

2018-7-3 00:24 上传

五子棋程序加文档.zip (252.86 KB, 下载次数: 66)

2018-7-2 22:22 上传

点击文件名下载附件
微信小程序五子棋
下载积分: 黑币 -5