uni app 写的 小游戏，文字拼图？文字拼写？不知道叫啥

从下方的偏旁部首中选在1--3个组成上面文章中的文字，完成的文字标红

不喜勿喷

《满江红》 其中用到了两个文件 strdata.json  parameters.json  这两个文件太大 放到资源中了

资源文件

<template><view class="wenzi_page_main"><view class="wenzi_main_view"><view v-for="(item,index) in words" :key="index"><text :style="{color:item.color}">{{item.name}}</text></view></view><view class="bushou_main_view"><view class="mall"><view v-for="(item,index) in ppbslist" :key="index" class="item" :class="item.disabled ? 'disabled' :''"@click="move(item,index)" :id="item.id" :style="{width: size+'rpx',height: size+'rpx',left: item.left + 'rpx',top: item.top + 'rpx'}"><image :style="{width: (size-6)+'rpx',height: (size-6)+'rpx',borderRadius: '8rpx',backgroundColor: '#fff',border: '2rpx solid #71a419',borderBottom: '10rpx solid #71a419'}" :src="item.src"></image></view></view></view><view class="yixuan_main_view"><view v-for="(item,index) in select" :key="index"><image :src="item.src" class="item_image"></image></view></view><view class="add_button_view"><text class="add_button" @click="spick_click"> 满江红</text><text class="add_button" @click="spick_click"> 开始</text></view></view>
</template><script>import strdata from './strdata.json'import parameters from './parameters.json'// 以下功能库请按需使用export default {data() {return {allppbslist: [],ppbslist: [],words: [],strword: '怒发冲冠，凭阑处、潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。',select: [],isover: false,layerCount: 5, //绘制4层//行rows: 7,//列cols: 7,//卡片大小size: 70,canMove: true}},onLoad() {},onShow() {},onReady() {},methods: {move(item, index) {if (this.isover || item.disabled || item.click) {return}item.left = 800item.top = 10000item.id = item.id + '-move'item.click = truethis.select.push(JSON.parse(JSON.stringify(item)))this.pipei()},getppbs: function(str, id) {let strdatas = strdata[str]var word = {isbj: false,id: id,name: str,childcodes: [],color: "#666"}if (strdatas) {var valuearr = strdatas[strdatas.length - 1]for (let j = 0; j < valuearr.length; j++) {word.childcodes.push(this.convertTextToUnicode(valuearr[j]))}} else {word.childcodes.push(this.convertTextToUnicode(str))}this.words.push(word)},convertTextToUnicode: function(text) {return ("" + text).charCodeAt(0).toString(16).toUpperCase().toLowerCase();},init: function() {var ppbslist = JSON.parse(JSON.stringify(this.allppbslist))this.ppbslist = this.convertToArray5x7x7(ppbslist)this.checkDisabled()},convertToArray5x7x7: function(flatArray) {const cellHtml = []//整理//第一步画表格//先绘制  最上面一层    然后  从顶层到底层绘制  进行行和列的 数据循环for (let ly = this.layerCount - 1; ly >= 0; ly--) {for (let i = 0; i < this.rows; i++) {for (let j = 0; j < this.cols; j++) {let pyStep = (ly + 1) % 2 === 0 ? this.size / 2 : 0 //给偏移量和不给偏移量  实现错开的效果//进行  图层的渲染   id 是必要的   这个定义了 第几层ly 第几行 i 第几列j  可以判断这个卡片有没有被盖住//最终  我们会以绝对定位的方式 进行 布局//整个随机数let item = (flatArray.pop()) //取完随机数  然后用pop  随用 随删  直到没有为止item && cellHtml.push({ly: ly,i: i,j: j,left: this.size * j + pyStep,top: this.size * i + pyStep,id: 'm' + ly + '-' + i + '-' + j,name: item.name,src: item.image,code: item.code,isMove: false})}}}console.log(cellHtml.length)return cellHtml.reverse()},checkDisabled() {this.ppbslist.forEach((v, index) => {const arr = v.id.substring(1).split('-').map(v => Number(v))const isPy = (arr[0] + 1) % 2 === 0for (let i = arr[0] + 1; i <= this.layerCount - 1; i++) {const isPyB = (i + 1) % 2 === 0if (isPy === isPyB) {let el = this.ppbslist.find(item => {return item.id === 'm' + i + '-' + arr[1] + '-' + arr[2]})if (el) {v.disabled = truebreak;}} else if (isPy && !isPyB) {[`${i}-${arr[1]}-${arr[2]}`,`${i}-${arr[1]}-${arr[2] + 1}`,`${i}-${arr[1] + 1}-${arr[2]}`,`${i}-${arr[1] + 1}-${arr[2] + 1}`].every(k => {let el = this.ppbslist.find(item => {return item.id === 'm' + k})return !el})if (![`${i}-${arr[1]}-${arr[2]}`,`${i}-${arr[1]}-${arr[2] + 1}`,`${i}-${arr[1] + 1}-${arr[2]}`,`${i}-${arr[1] + 1}-${arr[2] + 1}`].every(k => {let el = this.ppbslist.find(item => {return item.id === 'm' + k})return !el})) {v.disabled = truebreak;} else {v.disabled = false}} else if (!isPy && isPyB) {if (![`${i}-${arr[1]}-${arr[2]}`,`${i}-${arr[1]}-${arr[2] - 1}`,`${i}-${arr[1] - 1}-${arr[2]}`,`${i}-${arr[1] - 1}-${arr[2] - 1}`].every(k => {let el = this.ppbslist.find(item => {return item.id === 'm' + k})return !el})) {v.disabled = truebreak;} else {v.disabled = false}}}})},//将数组打乱shuffle: function(array) {if (!Array.isArray(array)) {return array;}for (var i = array.length - 1; i > 0; i--) {var j = Math.floor(Math.random() * (i + 1));[array[i], array[j]] = [array[j], array[i]]}return array;},spick_click: function() {this.isover = falsethis.allppbslist = this.shuffle(JSON.parse(JSON.stringify(parameters)))this.words = []this.select = []for (let i = 0; i < this.strword.length; i++) {this.getppbs(this.strword[i], i)}this.init()},pipei: function() {// 将arrayC中的code提取到一个Set中，以便快速查找let setC = new Set(this.select.map(item => item.code));for (let i = 0; i < this.words.length; i++) {if (!this.words[i].isbj) {let allChildCodesMatched = this.words[i].childcodes.every(code => setC.has(code));if (allChildCodesMatched) {this.words[i].color = "#f00"; // 如果全部匹配，将父元素的color设置为红色this.words[i].isbj = truefor (let j = 0; j < this.words[i].childcodes.length; j++) {for (let z = 0; z < this.select.length; z++) {if (this.words[i].childcodes[j] == this.select[z].code) {this.select.splice(z, 1)if (this.select.length != 6) {this.isover = false}break}}}this.checkDisabled()return}}}if (this.select.length == 6) {this.isover = trueuni.showToast({title: "结束",icon: "none"})} else {this.checkDisabled()}},}}
</script><style>.wenzi_page_main {background-color: #efefef;width: 100vw;height: 100vh;}.wenzi_main_view {margin-top: 26rpx;display: flex;flex-wrap: wrap;flex-direction: row;background: #fff;min-height: 32px;padding: 32rpx 32rpx 32rpx 32rpx;}.yixuan_main_view {width: 100%;margin-top: 26rpx;display: flex;flex-wrap: wrap;flex-direction: row;background-color: #efefef;min-height: 40px;padding: 32rpx 32rpx 32rpx 32rpx;}.item_image {width: 30px;height: 30px;border: 1rpx solid #efefef;margin: 2rpx;}.start_tv {width: 100vw;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;position: fixed;bottom: 0;}.bushou_main_view {display: block;height: 450rpx;width: 100vw;justify-content: center;align-items: center;position: relative;margin-top: 26rpx;margin-left: 100rpx;flex-wrap: wrap;flex-direction: row;background-color: #efefef;min-height: 32px;padding: 32rpx 32rpx 32rpx 32rpx;}.main {position: relative;}.item {position: absolute;color: #fff;display: flex;justify-content: center;align-items: center;border-radius: 10rpx;transition: left .3s, top .3s;}/* 如果被压在底下的颜色  应该是一种灰色 */.item:after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;transition: background-color .3s;}/* 这个是为了   当配够  有disabled 属性的时候 就会透明掉 */.disabled:after {background-color: rgba(0, 0, 0, 0.7);}.add_button_view {display: flex;z-index: 4;/*row 横向  column 列表  */flex-direction: row;justify-content: center;align-items: center;text-align: center;height: 140rpx;width: 100vw;background: #fff;border-top: solid 1rpx #efefef;position: fixed;bottom: 0;}.add_button {flex: 1;height: 88rpx;border: solid 2rpx #07a5a6;color: #fff;background: #07a5a6;font-size: 32rpx;border-radius: 10rpx;align-items: center;justify-content: center;display: flex;margin-left: 16rpx;margin-right: 16rpx;}.not_add_button {background: #effcfb;flex: 1;height: 88rpx;border: solid 2rpx #07a5a6;color: #07a5a6;font-size: 32rpx;border-radius: 10rpx;align-items: center;justify-content: center;display: flex;margin-left: 16rpx;margin-right: 16rpx;}
</style>