JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h1>rainbow slot machine</h1>
<p>by frogggeee</p>
<p>click to spin. that's all.</p>
<button type = "button" onclick = "spin()">spin</button>
<button type = "button" onclick = "setOdds()">set the odds</button>
<canvas id = "theCanvas" width = "540" height = "360"></canvas>
<script>
document.addEventListener("mousedown", onDown, false);
let canvas = document.getElementById("theCanvas");
let ctx = canvas.getContext("2d");
let spinning = false;
let odds = 10;
let slot1 = 1;
let slot2 = 1;
let slot3 = 1;
let colors = ["#00FF00", "#FFA500", "#FF0000", "#0000CD",  "#FF00FF"];
function onDown() {

}
function setOdds() {
	let answer = prompt("what do you want to set the odds to?", 10);
  if (odds < 0) {
  	alert ("invalid");
  } else {
  	odds = answer;
  }
}
function spin() {
  let win = Math.floor(Math.random() * odds);
  let winNum = 0;
	if (win == 0) {
  	winNum = Math.floor(Math.random() * 4);
    slot1 = winNum;
    slot2 = winNum;
    slot3 = winNum;
  } else {
  	slot1 = Math.floor(Math.random() * 4);
    slot2 = Math.floor(Math.random() * 4);
    slot3 = Math.floor(Math.random() * 4);
  }
  //alert (slot1 + "" + slot2 + "" + slot3);
  ctx.beginPath();
  ctx.rect(0, 0, 1000, 1000);
  ctx.fillStyle = "#8B4513";
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.rect(120, 70, 340, 120);
  ctx.fillStyle = "#000000";
  ctx.fill();
  ctx.closePath();
  /////////////////////////////////////////
  ctx.beginPath();
  ctx.rect(130, 80, 100, 100);
  ctx.fillStyle = colors[slot1];
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.rect(240, 80, 100, 100);
  ctx.fillStyle = colors[slot2];
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.rect(350, 80, 100, 100);
  ctx.fillStyle = colors[slot3];
  ctx.fill();
  ctx.closePath();
}
</script>
</body>
</head>
</html>