HarmonyOS自定义JS组件——元宵猜灯谜

更多内容请访问：华为官方共建Harmonyos技术社区https://harmonyos.51cto.com前言东风放夜色花木，宝马雕花车香满路。逛花市、猜灯谜是一项由来已久的传统节目。今天给大家带来一款鸿蒙猜灯谜游戏。渲染图实现思路首先，我们来划分区域。如图效果图，游戏区域分为：头部面板、谜语、谜语、控制按钮、提示、谜语面板（隐藏）乐谱面板：左边是乐谱文字，右边是音乐播放按钮，你可以用视频实现谜语：主要是文字，用文字实现谜语：有一堆文字，由for配置。每次放置的位置和旋转角度都是随机函数设定的，不会枯燥乏味。控制按钮：查看答案用于显示答案面板。上一题和下一题就是通过改变题库指针来改变灯谜和谜语。提示：一个简单的文字拼图面板：这里使用面板来起到弹跳和折叠的效果。具体实现头部面板复制如上，我们用视频播放音乐，设置show为false不显示，loop为true表示连续旋转。视频负责后台播放，前台旋转的音乐画面通过图像实现。对于旋转动画，我们选择CSSanimationconfiguration.music{width:50;身高：50；位置：绝对；右：5%；顶部：1.5%；动画名称：音乐旋转；动画持续时间：4s；动画延迟：0s；动画填充模式：转发；动画迭代次数：-1；动画计时功能：线性}@keyframesmusicrotation{来自{变换：旋转（0deg）;}到{transform:rotate(360deg)}}Riddle{{riddle}}Riddle{{v}}谜语通过for循环动态生成文字，其中selection代表谜语的文字，selection_property代表位置，选择，每个文本的颜色等属性生成selection_property，生成selection_property的代码如下：//configureselection_propertyletselection_property=[]constdegree_unit=360/lenconstdegree2Rad=Math.PI/180for(leti=0;i'+i)this.selection_property[i].color=this.selection_property[i].color=='red'?'black':'red'if(this.checkIsCorrect()){this.score+=10;如果（this.pointer==riddles.length-1）{prompt.showToast（{message:"恭喜通关，你的总分是："+this.score})}else{prompt.showToast({message:"恭喜你答对了"})this.nextStage();}}},控制面板查看答案上一题下一题