找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 4775|回复: 6
收起左侧

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

  [复制链接]
c时光 发表于 2018-7-2 22:24 | 显示全部楼层 |阅读模式
微信小程序五子棋游戏,有悔棋,清屏等功能。
     项 目 名称:    微信小程序-五子棋
目录
1 系统概述
2 系统技术基础
2.1 开发语言
2.1.1 Java简介
2.1.2 XML简介
2.2 开发工具
2.2.1 微信web开发者工具
2.3 开发环境
2.4.1 Android
2.4.2 MySQL
3 系统设计
3.1 功能模块设计
3.1.1 会话列表
3.1.2 文件夹
3.1.3五子棋胜利方判断
3.1.4 悔棋
3.2 五子棋页面示意图
4 结语
5 致谢
参考文献


1 系统概述

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

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

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

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

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

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

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

2 系统技术基础

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

2.1 开发语言

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

2.1.1 Java简介

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]。

2.1.2 XML简介

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

2.2 开发工具
2.2.1 微信web开发者工具

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

2.3 开发环境

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

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

2.3.1 API

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

要获取用户的地理位置时,只需要:

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 经度
    var longitude = res.longitude // 纬度
  }
})

调用微信扫一扫能力,只需要:

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

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

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

2.3.2 WXSS

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

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

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

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

3 系统设计

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

3.1 功能模块设计
3.1.1 绘制棋盘

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

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);

}            

3.1.2 定义棋子位置

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

3.1.3 五子棋胜利方判断
3.1.4 重置棋盘

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

3.2 五子棋页面示意图
4 结语

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

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

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

5 致谢

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


0.png 0.png

全部资料51hei下载地址:

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

评分

参与人数 1黑币 +50 收起 理由
admin + 50 共享资料的黑币奖励!

查看全部评分

回复

使用道具 举报

小白.小白 发表于 2018-7-17 09:30 | 显示全部楼层
厉害厉害
回复

使用道具 举报

errtfd 发表于 2018-7-31 12:43 | 显示全部楼层
基础知识贴,感谢分享
回复

使用道具 举报

嗷嗷嗷嗷 发表于 2018-10-23 11:09 | 显示全部楼层
可以的
回复

使用道具 举报

zyswht 发表于 2019-4-24 09:27 | 显示全部楼层
这个可以来学习一下
回复

使用道具 举报

princers 发表于 2019-6-5 14:21 | 显示全部楼层

这个可以来学习一下
回复

使用道具 举报

玩天星光 发表于 2020-11-21 11:56 | 显示全部楼层
学到东西了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|51黑电子论坛 |51黑电子论坛6群 QQ 管理员QQ:125739409;技术交流QQ群281945664

Powered by 单片机教程网

快速回复 返回顶部 返回列表