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

embedded/2025/1/13 5:35:12/

从下方的偏旁部首中选在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>


http://www.ppmy.cn/embedded/153467.html

相关文章

GraphQL：强大的API查询语言

GraphQL：强大的API查询语言

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
HTTP/HTTPS ④-对称加密 || 非对称加密

HTTP/HTTPS ④-对称加密 || 非对称加密

这里是Themberfue ✨HTTP协议的大体内容我们已经讲完了 ❤️本章我们将聊聊HTTPS中的 S 那些事儿 HTTPS简介 ✨在前三篇文章中&#xff0c;我们主要讲解了HTTP协议的简单介绍以及其报文的键值对含义等。比较于HTTP&#xff0c;HTTPS有什么不同呢&#xff1f;它们两者又有什么…
阅读更多...
上手体验微软全新整合的王炸平台Fabric

上手体验微软全新整合的王炸平台Fabric

体验确实不错&#xff0c;微软强大的生态能力。 把可视化&#xff0c;数仓&#xff0c;数据胡&#xff0c;数据工厂&#xff0c;机器学习&#xff0c;数据监控等技术都整合到一个平台了。所有数据全都存储在统一的one lake数据中心&#xff0c;消除数据孤岛问题。而且不同角色可…
阅读更多...
arcgis中用python脚本批量给多个要素类的相同字段赋值

arcgis中用python脚本批量给多个要素类的相同字段赋值

1、python脚本 import arcpy# 设置工作空间路径 arcpy.env.workspace = r"D:\test.gdb"# 要素集名称 feature_dataset = "test"# 线要素类名称列表，初始化为空 line_feature_classes = []# 遍历要素集获取所有线要素类 for fc in arcpy.ListFeatureClass…
阅读更多...
智能工厂的设计软件 应用场景的一个例子： 为AI聊天工具添加一个知识系统 之25 祖传代码：垂类划分出负责监管控的“三层结构”

智能工厂的设计软件 应用场景的一个例子： 为AI聊天工具添加一个知识系统 之25 祖传代码：垂类划分出负责监管控的“三层结构”

本文要点 要点 祖传代码将项目垂类划分为“三层结构” 分别负责&#xff1a; 前端组件的管理&#xff0c;后端组关的监视以及 中端组合的控制&#xff0c; -- 将http SPI &#xff08;标签类&#xff1a;a/p/div。 &#xff09;紧致&#xff08;收敛 &#xff09;为 一个目标…
阅读更多...
jenkins 调用bat脚本

jenkins 调用bat脚本

1&#xff0c;pipeline语句如下 bat cd /d "D:/WorkSpace"call TEST.bat2&#xff0c;带参数的bat 脚本bat脚本内容如下 echo offecho param[0] %0 echo param[1] %1 echo param[2] %2 echo param[3] %3 echo param[4] %4 echo param[5] %5 echo ... pause 运…
阅读更多...
页面滚动下拉时,元素变为fixed浮动,上拉到顶部时恢复原状,js代码以视频示例

页面滚动下拉时,元素变为fixed浮动,上拉到顶部时恢复原状,js代码以视频示例

页面滚动下拉时,元素变为fixed浮动js代码 以视频示例 <style>video{width:100%;height:auto}.div2,#float1{position:fixed;_position:absolute;top:45px;right:0; z-index:250;}button{float:right;display:block;margin:5px} </style><section id"abou…
阅读更多...
Java阶段四04

Java阶段四04

第4章-第4节 一、知识点 CSRF、token、JWT 二、目标 理解什么是CSRF攻击以及如何防范 理解什么是token 理解什么是JWT 理解session验证和JWT验证的区别 学会使用JWT 三、内容分析 重点 理解什么是CSRF攻击以及如何防范 理解什么是token 理解什么是JWT 理解session验…
阅读更多...
最新文章

Copyright @ 2022~2023