Exemple : https://bibliogeek.fr/aperoFriendsByBobby/roulette.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div class="main">
<h1 class="title mb-4">JEU<span class="h4">→ ROULETTE</span></h1>
<div class="container-fluid">
<div class="row mt-3">
<div id="history" class="col-12">
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<input class='btn btn-primary' type="button" value="spin" id='spin' />
<canvas id="canvas" width="500"height="500
</canvas>
</div>
</div>
</div>
</div>
</body>
<script>
var options =
["0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"32",
"33",
"34",
"35",
"36"
];
var startAngle = 0;
var arc = Math.PI / (options.length / 2);
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
document.getElementById("spin").addEventListener("click", spin);
function byte2Hex(n) {
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}
function RGB2Color(r,g,b) {
return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}
function getColor(item, maxitem) {
var phase = 0;
var center = 128;
var width = 127;
var frequency = Math.PI*2/maxitem;
red = Math.sin(frequency*item+2+phase) * width + center;
green = Math.sin(frequency*item+0+phase) * width + center;
blue = Math.sin(frequency*item+4+phase) * width + center;
return RGB2Color(red,green,blue);
}
function drawRouletteWheel() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,1000,1000);
ctx.strokeStyle = "white";
ctx.lineWidth = 3;
ctx.font = 'bold 16px Helvetica, Arial';
for(var i = 0; i < options.length; i++) {
var angle = startAngle + i * arc;
//ctx.fillStyle = colors[i];
//ctx.fillStyle = getColor(i, options.length);
if (i == 0 )
{
ctx.fillStyle = 'green';
}
if (i == 1 || i == 3|| i == 5|| i == 7|| i == 9|| i == 12|| i == 14|| i == 16|| i == 18|| i == 19|| i == 21|| i == 23|| i == 25|| i == 27|| i == 30|| i == 32|| i == 34|| i == 36)
{
ctx.fillStyle = 'red';
}
if (i == 2 || i == 4|| i == 6|| i == 8|| i == 10|| i == 11|| i == 13|| i == 15|| i == 17|| i == 20|| i == 22|| i == 24|| i == 26|| i == 28|| i == 29|| i == 31|| i == 33|| i == 35)
{
ctx.fillStyle = 'black';
}
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "white";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,
250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = options[i] ;
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "#708090";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px Helvetica, Arial';
var text = options[index];
$("#history").removeClass('d-none');
if (text == 0 )
{
$("#history").append("<span style='color:green;' class='h4 mr-3'>" + text + "</span>");
}
if (text == 1 || text == 3|| text == 5|| text == 7|| text == 9|| text == 12|| text == 14|| text == 16|| text == 18|| text == 19|| text == 21|| text == 23|| text == 25|| text == 27|| text == 30|| text == 32|| text == 34|| text == 36)
{
$("#history").append("<span style='color:red;' class='h4 mr-3'>" + text + "</span>");
}
if (text == 2 || text == 4|| text == 6|| text == 8|| text == 10|| text == 11|| text == 13|| text == 15|| text == 17|| text == 20|| text == 22|| text == 24|| text == 26|| text == 28|| text == 29|| text == 31|| text == 33|| text == 35)
{
$("#history").append("<span style='color:black;' class='h4 mr-3'>" + text + "</span>");
}
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
drawRouletteWheel();
</script>
</html>