JAVASCRIPT : ROULETTE CASINO

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>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *