심플 룰렛

지구버스

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 1개월 전 · 조회 203 203 · 댓글 4 4

링크

https://bbs1020.iwinv.net/rollet.php (44)

단순한 형태의 룰렛 게시판

뼈대만 대략 CHATGPT로 틀을 만들었는데 오픈소스로 게시판연동할수있게 업데이트 해 나가겠습니다.

- Ver 0.1

[code]

<?php
// 간단한 룰렛 게시판 샘플 (그누보드용)
// /bbs/board.php?bo_table=roulette 연동 가정

include_once('./_common.php');

$roulette_items = [
['label' => '100포인트', 'value' => 100],
['label' => '500포인트', 'value' => 500],
['label' => '꽝', 'value' => 0],
['label' => '1000포인트', 'value' => 1000],
['label' => '200포인트', 'value' => 200],
['label' => '300포인트', 'value' => 300],
];

// 룰렛 처리 ajax
if($_POST['mode'] == 'spin') {
$rand = array_rand($roulette_items);
$win = $roulette_items[$rand];

if($win['value'] > 0 && $member['mb_id']) {
// 포인트 지급 (그누보드 기본 함수)
insert_point($member['mb_id'], $win['value'], '룰렛 이벤트 당첨');
}

echo json_encode($win);
exit;
}
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
.roulette-wrap{width:400px;margin:0 auto;text-align:center}
#wheel{width:400px;height:400px;border-radius:50%;border:5px solid #333;position:relative}
#spinBtn{margin-top:20px;padding:15px 20px;font-size:18px;cursor:pointer}
</style>
</head>
<body>
<div class="roulette-wrap">
<canvas id="wheel" width="400" height="400"></canvas>
<button id="spinBtn">SPIN!</button>
</div>
<script>
const items = <?php echo json_encode($roulette_items); ?>;
const wheel = document.getElementById('wheel');
const ctx = wheel.getContext('2d');
const arc = Math.PI * 2 / items.length;
let startAngle = 0;

function draw() {
for(let i = 0; i < items.length; i++){
const angle = startAngle + i * arc;
ctx.beginPath();
ctx.fillStyle = i % 2 === 0 ? '#fbd000' : '#fa5656';
ctx.moveTo(200,200);
ctx.arc(200,200,200,angle,angle+arc);
ctx.fill();
ctx.save();
ctx.translate(200,200);
ctx.rotate(angle + arc/2);
ctx.fillStyle = '#fff';
ctx.font = 'bold 18px sans-serif';
ctx.fillText(items[i].label, 60, 10);
ctx.restore();
}
}
draw();

let spinning = false;

document.getElementById('spinBtn').addEventListener('click', () =>{
if(spinning) return;
spinning = true;

fetch('', {method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'}, body:'mode=spin'})
.then(res => res.json())
.then(data => {
const idx = items.findIndex(e => e.label === data.label);
const stopAngle = (Math.PI * 2) * 5 + (items.length - idx) * arc;
let angle = 0;
const interval = setInterval(() =>{
startAngle += 0.25;
draw();
angle += 0.25;
if(angle >= stopAngle) {
clearInterval(interval);
alert('결과: ' + data.label);
spinning = false;
}
}, 20);
});
});
</script>
</body>
</html>