帮我写一个前端转盘示例
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-05-06 15:29:42 |
👁️ 阅读: 6
根据浮生梦老师前端课程内容，这里提供一个完整的转盘示例，包含随机旋转和减速停止效果。
```lua
-- 转盘示例
local zhuanpan = {}
-- 主函数
zhuanpan.main = function()
-- 创建主窗口
local parent = GUI:Win_Create("ZhuanpanMain", 0, 0, 0, 0, false, false, true, false, false, false, 1)
local contentW = 800
local contentH = 600
-- 创建布局
local layout = GUI:Widget_Create(parent, "layout", 0, 0, contentW, contentH)
GUI:setAnchorPoint(layout, 0.5, 0.5)
GUI:setPosition(layout, contentW / 2, contentH / 2)
-- 转盘背景
local bg = GUI:ImageView_Create(layout, "bg", contentW / 2, contentH / 2, "public_win32/1900000610.png")
GUI:setAnchorPoint(bg, 0.5, 0.5)
-- 转盘指针
local pointer = GUI:ImageView_Create(layout, "pointer", contentW / 2, contentH / 2, "res/01/010006.png")
GUI:setAnchorPoint(pointer, 0.5, 0.5)
-- 奖品配置
local prizes = {
{name = "一等奖", angle = 0},
{name = "二等奖", angle = 45},
{name = "三等奖", angle = 90},
{name = "四等奖", angle = 135},
{name = "五等奖", angle = 180},
{name = "六等奖", angle = 225},
{name = "七等奖", angle = 270},
{name = "八等奖", angle = 315}
}
local isRotating = false
local currentAngle = 0
local targetAngle = 0
local rotationSpeed = 0
local slowDownRate = 0.95
-- 旋转函数
local function rotate()
if not GUI:Win_IsNull(pointer) and isRotating then
currentAngle = currentAngle + rotationSpeed
if currentAngle >= 360 then
currentAngle = currentAngle - 360
end
GUI:setRotation(pointer, currentAngle)
-- 减速
rotationSpeed = rotationSpeed * slowDownRate
-- 判断是否停止
if rotationSpeed < 0.1 then
isRotating = false
rotationSpeed = 0
-- 计算最终奖项
local finalAngle = currentAngle % 360
local selectedPrize = nil
for i, prize in ipairs(prizes) do
local angleDiff = math.abs(finalAngle - prize.angle)
if angleDiff < 22.5 then
selectedPrize = prize
break
end
end
if selectedPrize then
SL:print("恭喜获得：" .. selectedPrize.name)
end
else
-- 继续旋转
SL:ScheduleOnce(function()
rotate()
end, 0.02)
end
end
end
-- 开始旋转
local function startRotation()
if not isRotating then
isRotating = true
rotationSpeed = 20 + math.random() * 10 -- 初始速度
slowDownRate = 0.95 + math.random() * 0.04 -- 随机减速率
-- 随机目标角度
local randomIndex = math.random(1, #prizes)
targetAngle = prizes[randomIndex].angle + 360 * 5 -- 转5圈后停止
SL:print("开始旋转，目标奖项：" .. prizes[randomIndex].name)
rotate()
end
end
-- 创建开始按钮
local buttonStart = GUI:Button_Create(layout, "buttonStart", contentW / 2, 100, "public_win32/1900000612.png")
if buttonStart then
GUI:setAnchorPoint(buttonStart, 0.5, 0.5)
GUI:Button_setTitleText(buttonStart, "开始转盘")
GUI:Button_setTitleFontSize(buttonStart, 16)
GUI:addOnClickEvent(buttonStart, function()
startRotation()
end)
end
-- 显示奖品列表
local textInfo = GUI:Text_Create(layout, "Text_info", contentW / 2, 200, 14, "#ffffff", "奖品列表：")
GUI:setAnchorPoint(textInfo, 0.5, 0.5)
for i, prize in ipairs(prizes) do
local text = GUI:Text_Create(layout, "Text_prize" .. i, contentW / 2, 180 - i * 20, 12, "#ffff00", prize.name)
GUI:setAnchorPoint(text, 0.5, 0.5)
end
end
-- 运行转盘
zhuanpan.main()
```
**函数说明：**
1. **GUI:Win_Create()** - 创建主窗口
2. **GUI:Widget_Create()** - 创建布局容器
3. **GUI:ImageView_Create()** - 创建图片控件（转盘和指针）
4. **GUI:setAnchorPoint()** - 设置锚点（居中）
5. **GUI:setRotation()** - 设置旋转角度
6. **GUI:Button_Create()** - 创建按钮
7. **GUI:Button_setTitleText()** - 设置按钮文字
8. **GUI:addOnClickEvent()** - 添加点击事件
9. **GUI:Text_Create()** - 创建文本控件
10. **SL:ScheduleOnce()** - 单次延迟执行
11. **SL:print()** - 打印信息
**功能特点：**
- 使用`public_win32/1900000610.png`作为转盘背景
- 使用`public_win32/1900000612.png`作为按钮
- 随机旋转速度和减速率
- 转5圈后随机停在某个奖品位置
- 显示奖品列表和抽奖结果
这个示例包含了完整的转盘功能，你可以根据需要调整奖品数量、旋转速度、减速率等参数。
← 返回问答库