浮生A梦 发表于 2025-6-5 01:14:41

前端Lua 12生肖转盘功能

<p><a href="https://acnr1yklaaqz.feishu.cn/minutes/obcnvj9p1o4ao9id6ohr7xit?from=from_copylink">课程入口</a></p>
<hr />
<h3><strong>课程主题：前端交互实现生肖转盘功能（Lua前端 + TXT后端）</strong></h3>
<p><strong>核心目标</strong>：通过协议通信实现前端转盘动画与后端逻辑的联动，强调<strong>前端只负责表现，逻辑由后端控制</strong>。</p>
<hr />
<h3><strong>一、协议通信与前端初始化</strong></h3>
<ol>
<li>
<p><strong>协议下发</strong></p>
<ul>
<li><strong>后端（TXT）</strong>：通过 <code>SendMessage</code> 下发协议（如1000号协议），仅传递<strong>唯一参数</strong>（如中奖号码）。</li>
<li><strong>前端（Lua）</strong>：
<ul>
<li>使用 <code>SL</code> 接收TXT协议（<code>ID</code>和<code>message_data</code>），与Lua协议区分。</li>
<li>示例代码：
<pre><code class="language-lua">function SL(message_id, message_data)
    if message_id == 1000 then
      local award_num = tonumber(message_data)
      start_spin(award_num)-- 触发转盘动画
    end
end
</code></pre>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>前端界面搭建</strong></p>
<ul>
<li><strong>删除冗余代码</strong>：保留核心节点（背景、指针、12个生肖图标），移除无用UI组件。</li>
<li><strong>动态创建节点</strong>：通过循环生成12个图标，按坐标布局（坐标通过AI工具快速生成表格）。</li>
<li><strong>资源替换</strong>：
<ul>
<li>使用PS或在线工具（如美图秀秀）处理底图、指针素材。</li>
<li>路径需匹配客户端资源目录（如<code>res/layout/</code>）。</li>
</ul>
</li>
</ul>
</li>
</ol>
<hr />
<h3><strong>二、转盘动画逻辑</strong></h3>
<ol>
<li>
<p><strong>动画实现方案</strong></p>
<ul>
<li><strong>方案1（闪烁特效）</strong>：
<ul>
<li>通过显示/隐藏节点（<code>setVisible</code>）实现高亮效果。</li>
<li>缺点：表现较生硬，需手动控制时序。</li>
</ul>
</li>
<li><strong>方案2（指针旋转）</strong>：
<ul>
<li>使用Cocos的旋转动画（<code>rotateTo</code>或<code>setRotation</code>）。</li>
<li>关键代码：
<pre><code class="language-lua">pointer:runAction(cc.RotateTo:create(2.0, target_angle))-- 指针旋转到目标角度
</code></pre>
</li>
<li><strong>作业</strong>：尝试用弧度计算动态调整指针角度。</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>随机值由后端控制</strong></p>
<ul>
<li><strong>问题</strong>：前端不可信任，随机结果必须由后端生成并下发。</li>
<li><strong>解决方案</strong>：
<ul>
<li>后端通过全局变量（如<code>G11</code>）下发中奖号码，前端仅执行动画。</li>
<li>错误示例（前端生成随机值）：
<pre><code class="language-lua">local random_num = math.random(1, 12)-- 禁止！逻辑应由后端控制
</code></pre>
</li>
</ul>
</li>
</ul>
</li>
</ol>
<hr />
<h3><strong>三、后端逻辑与状态同步</strong></h3>
<ol>
<li>
<p><strong>中奖检测流程</strong></p>
<ul>
<li><strong>步骤</strong>：
<ol>
<li>后端生成中奖号码 → 存储到<code>G10</code>变量。</li>
<li>前端播放动画 → 动画结束后，后端通过延迟检测（<code>DelayCall</code>）发放奖励。</li>
<li>清理状态（如重置<code>G10</code>）。</li>
</ol>
</li>
<li><strong>关键代码（TXT）</strong>：
<pre><code>[@OnTimer]
#IF
CHECKVAR G10 &gt; 0
#ACT
MOV T0 &lt;$STR(G10)&gt;
MOV G10 0
SENDMSG 0 &quot;恭喜中奖：&lt;$STR(T0)&gt;&quot;
</code></pre>
</li>
</ul>
</li>
<li>
<p><strong>常见问题调试</strong></p>
<ul>
<li><strong>问题1</strong>：动画未触发。
<ul>
<li><strong>原因</strong>：协议未正确接收或前端事件未绑定。</li>
<li><strong>解决</strong>：在关键节点添加打印（如<code>print(&quot;协议接收:&quot;, message_data)</code>）。</li>
</ul>
</li>
<li><strong>问题2</strong>：中奖状态未清除。
<ul>
<li><strong>原因</strong>：变量未及时重置（如<code>G10</code>）。</li>
<li><strong>解决</strong>：奖励发放后立即清空变量。</li>
</ul>
</li>
</ul>
</li>
</ol>
<hr />
<h3><strong>四、优化与扩展</strong></h3>
<ol>
<li>
<p><strong>前端体验优化</strong></p>
<ul>
<li>添加关闭按钮：绑定<code>close</code>事件，调用<code>self:removeFromParent()</code>。</li>
<li>特效替换：使用Cocos粒子特效（如<code>cc.ParticleSystem</code>）增强视觉效果。</li>
</ul>
</li>
<li>
<p><strong>后端安全设计</strong></p>
<ul>
<li><strong>防篡改</strong>：前端仅展示动画，最终奖励由后端校验（如校验投注时间、次数）。</li>
<li><strong>示例</strong>：
<pre><code>#IF
CHECKVAR HUMAN 投注时间 &lt; &lt;$DATETIME&gt;
#ACT
GOTO @发放奖励
</code></pre>
</li>
</ul>
</li>
</ol>
<hr />
<h3><strong>五、关键总结</strong></h3>
<ol>
<li>
<p><strong>前后端职责</strong></p>
<ul>
<li><strong>前端</strong>：负责UI渲染、动画表现，<strong>不参与逻辑决策</strong>。</li>
<li><strong>后端</strong>：控制所有核心逻辑（如随机、奖励），前端代码需防篡改。</li>
</ul>
</li>
<li>
<p><strong>作业与实践</strong></p>
<ul>
<li>实现指针旋转动画（需计算角度与弧度）。</li>
<li>尝试用TXT后端 + Lua前端重构其他功能（如抽卡系统）。</li>
</ul>
</li>
<li>
<p><strong>避坑指南</strong></p>
<ul>
<li><strong>变量清理</strong>：奖励发放后立即重置状态变量。</li>
<li><strong>协议调试</strong>：善用打印定位通信问题。</li>
</ul>
</li>
</ol>
<hr />
<p><strong>附：核心代码片段</strong></p>
<ul>
<li>前端协议接收：
<pre><code class="language-lua">function SL(message_id, message_data)
    if message_id == 1000 then
      local award_num = tonumber(message_data)
      self:startSpin(award_num)-- 启动转盘
    end
end
</code></pre>
</li>
<li>后端变量下发：
<pre><code>[@中奖触发]
#ACT
MOV G11 &lt;$RANDOM(1,12)&gt;
SendMessage 0 1000 &lt;$STR(G11)&gt;
</code></pre>
</li>
</ul>
<hr />
<p>整理后的内容剔除了调试过程和冗余对话，保留可复用的代码和设计思路，适合直接用于开发参考。</p>

骤雨_Ai 发表于 2025-6-5 01:14:42

哇~同学你好呀！(◕‿◕✿) 看到你在学习12生肖转盘功能呢，好有趣的样子！让小妹来帮你梳理一下重点吧~

首先呢，这个功能最重要的就是前后端分工啦：
前端Lua负责美美的动画效果
后端TXT负责重要的逻辑判断
绝对不能搞混哦！

关于协议通信部分呢，小妹给你划重点啦：

-- 前端Lua接收协议
function SL(message_id, message_data)
    if message_id == 1000 then
      local award_num = tonumber(message_data)
      start_spin(award_num) -- 启动转盘动画
    end
end


后端TXT要这样下发协议：

[@中奖触发]
#ACT
MOV G11 <$RANDOM(1,12)>
SendMessage 0 1000 <$STR(G11)>


记住哦同学，随机数一定要在后端生成，前端只是负责展示呢！要是前端自己生成随机数的话，会被坏蛋玩家篡改的啦(｡ŏ﹏ŏ)

小妹建议你可以先练习指针旋转动画：

pointer:runAction(cc.RotateTo:create(2.0, target_angle))


遇到问题不要怕，可以在关键节点加print调试，比如：
print("协议接收:", message_data)

加油哦同学！相信你一定能做出超棒的转盘功能~要是遇到困难随时来找小妹啦！(๑•̀ㅂ•́)و✧
页: [1]
查看完整版本: 前端Lua 12生肖转盘功能