我正在参加掘金社区游戏创意投稿大赛团队赛，详情请看：游戏创意投稿大赛
简介
Wordle是一款网页猜字谜游戏，玩法是尝试填入字母根据提示组成正确的单词。
汉兜是由Vue核心团队一位大佬：Antfu 开发的中文版wordle，字母改为汉字，单词改为成语，每天更新一个成语。
盘点游戏规则、需求
需求：实现一个无限模式双简版本wordle(简体中文&简单化)。 原版的汉兜是每天凌晨更新一题，这里为了增加游戏的可玩性我们打算实现一个可无限猜题版
- 游戏分享
- 记分板
- 游戏简单化
使用技术
uniapp：是一个使用vue.js开发所有前端应用的框架。 wordle这款游戏交互不是很多，所以我们打算使用uniapp。 因为前不久刚跟着大帅老师使用uniapp搞了一个壁纸小程序，而且uniapp有云开发平台：uniCloud可以使用。
pinyin-pro
依赖：pinyin-pro 一款 “专业的汉字拼音转换工具”！
开发流程
uniapp官方推荐的开发工具为 HBuilderX，但是我平时习惯用vscode工具，不想更换编辑器，然后看到了这篇教程：使用vscode工具开发，教程比较详尽 我这里不在赘述。
拼音匹配规则
拼音匹配规则详见我队友的文章：汉林：使用uniapp来实现wordle，来看看成语你能猜对几分
分享模块
分享有复制文本和下载图片两种方式： 1、复制文本
// 使用uni提供API
uni.setClipboardData({
data: "some text...",
success: () => uni.showToast({
title: '复制成功',
duration: 2000
}),
fail: () => console.warn("复制失败");
})
复制代码2、图片分享
看了几个uniapp生成分享海报的插件感觉 不是很好用的样子，生成海报也不是很难的样子，于是干脆自己动手写一下吧：
- 使用canvas 绘制图片。
- 使用uni.canvasToTempFilePath API：把当前画布指定区域的内容导出生成指定大小的图片。
// 使用canvas先绘制图片
drawPoster() {
var context = uni.createCanvasContext('canvas')
context.font = '20px ui-serif,Georgia,Cambria,"Times New Roman",Times,serif'
context.fillStyle = '#FFFFFF'
// 注：这里绘制图片第一个参数为图片地址，不用创建img元素，当时没仔细看文档 new Img()元素 一直绘不出图片
const honorBg = '/static/honor_bg.png'
context.drawImage(honorBg, 0, 0, 360, 540)
const src = '/static/qrcode.png'
context.drawImage(src, 28, 380, 120, 120)
this.drawText(16, '#666', '汉林·双简版wordle', 190, 455, context)
// ... some thing else
context.draw()
},
// 绘制文本
drawText(size, color, content, drawX, drawY, context) {
context.setFontSize(size)
context.setFillStyle(color)
context.fillText(content, drawX, drawY)
}
createImg() {
const that = this
uni.canvasToTempFilePath({
canvasId: 'canvas',
success: function(res) {
// 目前先考虑H5下载，其他平台下载 可直接调用uni.saveFile()API
// 在H5平台下，tempFilePath 为 base64
that.srcBase64 = res.tempFilePath
}
})
},
复制代码- 图片保存分享：因为H5 目前不支持文件保存到本地（uni.saveFile(OBJECT)），浏览器可在或得用户授权后下载到文件中、但微信浏览器下载有问题；所以 目前方案为：移动端提示用户长按保存图片、pc端可提示用户点击下载。具体实现如下：
/**
* 使用uni.getSystemInfoSync()获取设备信息，判断用户设备。
* 1、base64格式图片转换成blob对象
* 2、将blob对象封装到a标签中置入页面
* 3、模拟点击a标签触发下载请求
*/
downloadImg(base64 = this.srcBase64) {
var arr = base64.split(',')
var bytes = atob(arr[1])
let ab = new ArrayBuffer(bytes.length)
let ia = new Uint8Array(ab)
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i)
}
const blob = new Blob([ab], {
type: 'application/octet-stream'
})
const _URL = window.URL || window.webkitURL
const url = _URL.createObjectURL(blob)
let dom = document.createElement("a")
dom.style.display = "none"
dom.href = url
dom.setAttribute("download", "汉林_猜成语游戏.png")
document.body.appendChild(dom)
dom.click() // 模拟点击这个a标签触发下载请求
dom.remove()
},
复制代码总结
这款小游戏还有很多需要优化完善的地方：声调、元音辅音规则、称号可配制化等等问题，但是这两天刷原版的汉兜游戏发现竟然也有bug我就释然了，嗯～以后有时间慢慢改...
最后感谢大帅老师的支持指导。大帅老师创建的“猿创营”氛围非常好，很多小伙伴一起沟通讨论问题。 感谢执行力超强的队友warn完成了大部分内容！