帮我写个转盘的案例
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-02-24 16:53:43 |
👁️ 阅读: 4
根据浮生梦老师前端课程内容，我来帮你写一个转盘案例。这个案例包含了转盘界面、旋转动画和开始按钮功能：
```lua
local zhuanpan = {}
-- 转盘主函数
zhuanpan.main = function()
-- 创建父窗口
local parent = GUI:Win_Create("GMMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 转盘配置数据
local config = {
{id = 100001, reward = {{1, 5000000}}, showReward = {{1, 5000000}}, index2 = 1, probability = 200, desc = "福利转盘", anparam = 38},
{id = 100002, reward = {{308, 1}}, showReward = {{308, 1}}, index2 = 2, probability = 200, desc = "福利转盘", anparam = 38},
{id = 100003, reward = {{281, 200}}, showReward = {{281, 200}}, index2 = 3, probability = 200, desc = "福利转盘", anparam = 38},
{id = 100004, reward = {{280, 50}}, showReward = {{280, 50}}, index2 = 4, probability = 1000, desc = "福利转盘", anparam = 38},
{id = 100005, reward = {{249, 3}}, showReward = {{249, 3}}, index2 = 5, probability = 500, desc = "福利转盘", anparam = 38}
}
local contentW = 400
local contentH = 400
-- 创建转盘背景
local layout = GUI:Widget_Create(parent, "zhuanpan_layout", 100, 100, contentW, contentH)
GUI:Widget_loadTexture(layout, "res/public_win32/1900000610.png", 0)
-- 转盘旋转逻辑
local items = {}
local count = #config
local radius = 150
local centerX = contentW / 2
local centerY = contentH / 2
-- 创建转盘项
for i = 1, count do
local angle = (i - 1) * (360 / count)
local radian = math.rad(angle)
local x = centerX + radius * math.sin(radian) - 40
local y = centerY + radius * math.cos(radian) - 40
local item = GUI:Widget_Create(layout, "item_" .. i, x, y, 80, 80)
GUI:Widget_loadTexture(item, "res/01/010006.png", 0)
-- 显示奖励文字
local rewardText = config[i].reward[1][2] or ""
local textLabel = GUI:Text_Create(item, "Text_reward", 0, 0, 16, "#ffffff", tostring(rewardText))
GUI:Text_setFontName(textLabel, "fonts/font5.ttf")
GUI:setAnchorPoint(textLabel, 0.5, 0.5)
GUI:setPosition(textLabel, 40, 40)
items[i] = item
end
-- 转盘旋转控制变量
local isRotating = false
local currentAngle = 0
local targetAngle = 0
local rotateSpeed = 0
local maxSpeed = 10
local slowDownRate = 0.95
-- 旋转更新函数
local function updateRotation()
if not isRotating then return end
-- 计算旋转
local delta = targetAngle - currentAngle
if math.abs(delta) > 180 then
delta = delta - math.sign(delta) * 360
end
rotateSpeed = rotateSpeed + delta * 0.01
rotateSpeed = math.min(math.max(rotateSpeed, -maxSpeed), maxSpeed)
currentAngle = currentAngle + rotateSpeed
if currentAngle >= 360 then currentAngle = currentAngle - 360 end
if currentAngle < 0 then currentAngle = currentAngle + 360 end
-- 应用旋转到所有项
for i = 1, count do
local baseAngle = (i - 1) * (360 / count)
local totalAngle = baseAngle + currentAngle
local radian = math.rad(totalAngle)
local x = centerX + radius * math.sin(radian) - 40
local y = centerY + radius * math.cos(radian) - 40
GUI:setPosition(items[i], x, y)
end
-- 减速逻辑
rotateSpeed = rotateSpeed * slowDownRate
if math.abs(rotateSpeed) < 0.1 then
isRotating = false
SL:print("转盘停止！")
-- 计算最终奖励
local finalIndex = math.floor((360 - currentAngle) / (360 / count)) % count + 1
local reward = config[finalIndex].reward[1]
SL:print("获得奖励：类型" .. reward[1] .. "，数量" .. reward[2])
end
end
-- 开始转盘旋转
local function startRotation()
if isRotating then return end
isRotating = true
targetAngle = math.random(360, 720) -- 随机旋转角度
rotateSpeed = maxSpeed
SL:print("转盘开始旋转！")
-- 使用定时器更新旋转
local function rotateUpdate()
updateRotation()
if isRotating then
SL:ScheduleOnce(rotateUpdate, 0.016) -- 约60帧
end
end
rotateUpdate()
end
-- 创建开始按钮
local buttonStart = GUI:Button_Create(layout, "buttonStart", contentW / 2, contentH / 2, "res/public_win32/1900000612.png")
if not GUI:Win_IsNull(buttonStart) then
GUI:setAnchorPoint(buttonStart, 0.5, 0.5)
GUI:Button_loadTexturePressed(buttonStart, "res/01/010005.png")
GUI:Button_setTitleText(buttonStart, "开始转盘")
GUI:Button_setTitleFontSize(buttonStart, 16)
GUI:addOnClickEvent(buttonStart, function()
startRotation()
end)
end
-- 添加关闭按钮
local btnClose = GUI:Button_Create(layout, "btn_close", contentW - 30, contentH - 30, "res/01/010005.png")
if not GUI:Win_IsNull(btnClose) then
GUI:Button_setTitleText(btnClose, "关闭")
GUI:addOnClickEvent(btnClose, function()
GUI:removeFromParent(layout)
end)
end
end
-- 运行转盘
zhuanpan.main()
```
这个转盘案例包含以下功能：
1. **界面创建**：使用指定的背景图片和按钮资源
2. **转盘项布局**：奖励项围绕中心圆形排列
3. **旋转动画**：模拟真实的转盘旋转和减速效果
4. **奖励计算**：根据停止位置计算获得的奖励
5. **交互控制**：开始按钮和关闭按钮
**关键点说明**：
- 使用 `GUI:Win_Create` 创建父窗口
- 使用 `GUI:Widget_loadTexture` 加载背景图片
- 使用 `SL:ScheduleOnce` 实现帧更新定时器
- 转盘项使用三角函数计算圆形布局位置
- 旋转动画包含加速、匀速和减速阶段
你可以根据需要调整奖励配置、转盘大小和旋转速度等参数。
← 返回问答库