shakkurcwb/casino.html

## casino.html
<!DOCTYPE html>
<html>
<head>
	<title>Casino Game</title>
    <meta charset="UTF-8">
	<style>
		canvas {
			border: 1px solid #ccc;
		}
	</style>
</head>
<body style="text-align: center;">
    <div>
        <canvas id="canvas" width="380" height="220"></canvas>
    </div>

    <div>
        <button id="spin">Spin</button>
        <button id="auto-spin">Auto Spin</button>
    </div>

    <div>
        <p>Balance: $<span id="balance">0.00</span></p>
        <p>Bet: $<span id="bet">0.00</span></p>
        <p>Win: $<span id="win">0.00</span></p>
    </div>

	<script src="casino.js"></script>
</body>
</html>

## casino.js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const width = canvas.width;
const height = canvas.height;

const numberOfIcons = 2;

const availableIcons = {
  "cherry": "🍒",
  "diamond": "💎",
  "grape": "🍇",
  "orange": "🍊",
  "clover": "🍀",
  "watermelon": "🍉",
  "heart": "❤️",
  "lemon": "🍋",
  "skull": "💀",
};

const icons = [];

for (let i = 0; i < numberOfIcons; i++) {
  const icon = Object.keys(availableIcons)[i];
  icons[icon] = availableIcons[icon];
}

const iconNames = Object.keys(icons);

const iconSize = 60;
const iconSpacing = 20;

const columns = 5;
const rows = 3;

const spinDuration = 1000;
const spinDelay = 1000;

const spinButton = document.getElementById("spin");
const autoSpinButton = document.getElementById("auto-spin");
const balanceDisplay = document.getElementById("balance");
const betDisplay = document.getElementById("bet");
const winDisplay = document.getElementById("win");

//

let balance = 100;
let bet = 1;
let win = 0;

let spinning = false;

function compareImages(img1, img2) {
  if (img1.data.length != img2.data.length) {
    return false;
  }

  for (var i = 0; i < img1.data.length; ++i) {
    if (img1.data[i] != img2.data[i]) {
      return false;
    }
  }

  return true;
}

function calculateWin() {
  let winAmount = 0;

  for (let i = 0; i < rows; i++) {
    const lineIcons = [];
    for (let j = 0; j < columns; j++) {
      const icon = ctx.getImageData(
        j * (iconSize + iconSpacing),
        i * (iconSize + iconSpacing),
        iconSize,
        iconSize
      );
      lineIcons.push(icon);
    }

    const firstIcon = lineIcons[0];
    const win = lineIcons.every((icon) => compareImages(icon, firstIcon));

    console.log('win', win);
    if (win) {
      ctx.beginPath();
      ctx.moveTo(0, i * (iconSize + iconSpacing) + iconSize / 2);
      ctx.lineTo(width, i * (iconSize + iconSpacing) + iconSize / 2);
      ctx.stroke();

      winAmount += bet * 10;
    }
  }

  return winAmount;
}

function onSpinEnd() {
  spinButton.disabled = false;
  autoSpinButton.disabled = false;
  spinning = false;

  const winAmount = calculateWin();
  balance += winAmount;
  win = winAmount;

  console.log('winAmount', winAmount);

  balanceDisplay.textContent = parseFloat(balance).toFixed(2);
  betDisplay.textContent = parseFloat(bet).toFixed(2);
  winDisplay.textContent = parseFloat(win).toFixed(2);
}

function onSpin() {
  spinButton.disabled = true;
  autoSpinButton.disabled = true;
  spinning = true;

  draw();

  balance -= bet;
  balanceDisplay.textContent = parseFloat(balance).toFixed(2);
  betDisplay.textContent = parseFloat(bet).toFixed(2);
  winDisplay.textContent = parseFloat(win).toFixed(2);

  setTimeout(onSpinEnd, spinDuration + spinDelay);
}

spinButton.addEventListener("click", onSpin);

function onAutoSpin() {
  if (spinning) {
    return;
  }

  onSpin();

  setTimeout(onAutoSpin, spinDuration + spinDelay + 500);
}

autoSpinButton.addEventListener("click", onAutoSpin);

function drawIcon(icon, x, y) {
  ctx.font = `${iconSize-10}px serif`;
  ctx.fillText(icon, x-4, y+47);
}

function drawSlot(x, y) {
  ctx.strokeRect(x, y, iconSize, iconSize);
  const icon = iconNames[Math.floor(Math.random() * iconNames.length)];
  console.log('slot', icon, x, y)
  drawIcon(icons[icon], x, y);
}

function drawSlots() {
  for (let i = 0; i < columns; i++) {
    for (let j = 0; j < rows; j++) {
      drawSlot(i * (iconSize + iconSpacing), j * (iconSize + iconSpacing));
    }
  }
}

function draw() {
  ctx.clearRect(0, 0, width, height);
  drawSlots();
}

// draw();
	<!DOCTYPE html>
	<html>
	<head>
	<title>Casino Game</title>
	<meta charset="UTF-8">
	<style>
	canvas {
	border: 1px solid #ccc;
	}
	</style>
	</head>
	<body style="text-align: center;">
	<div>
	<canvas id="canvas" width="380" height="220"></canvas>
	</div>

	<div>
	<button id="spin">Spin</button>
	<button id="auto-spin">Auto Spin</button>
	</div>

	<div>
	<p>Balance: $<span id="balance">0.00</span></p>
	<p>Bet: $<span id="bet">0.00</span></p>
	<p>Win: $<span id="win">0.00</span></p>
	</div>

	<script src="casino.js"></script>
	</body>
	</html>
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");

	const width = canvas.width;
	const height = canvas.height;

	const numberOfIcons = 2;

	const availableIcons = {
	"cherry": "🍒",
	"diamond": "💎",
	"grape": "🍇",
	"orange": "🍊",
	"clover": "🍀",
	"watermelon": "🍉",
	"heart": "❤️",
	"lemon": "🍋",
	"skull": "💀",
	};

	const icons = [];

	for (let i = 0; i < numberOfIcons; i++) {
	const icon = Object.keys(availableIcons)[i];
	icons[icon] = availableIcons[icon];
	}

	const iconNames = Object.keys(icons);

	const iconSize = 60;
	const iconSpacing = 20;

	const columns = 5;
	const rows = 3;

	const spinDuration = 1000;
	const spinDelay = 1000;

	const spinButton = document.getElementById("spin");
	const autoSpinButton = document.getElementById("auto-spin");
	const balanceDisplay = document.getElementById("balance");
	const betDisplay = document.getElementById("bet");
	const winDisplay = document.getElementById("win");

	//

	let balance = 100;
	let bet = 1;
	let win = 0;

	let spinning = false;

	function compareImages(img1, img2) {
	if (img1.data.length != img2.data.length) {
	return false;
	}

	for (var i = 0; i < img1.data.length; ++i) {
	if (img1.data[i] != img2.data[i]) {
	return false;
	}
	}

	return true;
	}

	function calculateWin() {
	let winAmount = 0;

	for (let i = 0; i < rows; i++) {
	const lineIcons = [];
	for (let j = 0; j < columns; j++) {
	const icon = ctx.getImageData(
	j * (iconSize + iconSpacing),
	i * (iconSize + iconSpacing),
	iconSize,
	iconSize
	);
	lineIcons.push(icon);
	}

	const firstIcon = lineIcons[0];
	const win = lineIcons.every((icon) => compareImages(icon, firstIcon));

	console.log('win', win);
	if (win) {
	ctx.beginPath();
	ctx.moveTo(0, i * (iconSize + iconSpacing) + iconSize / 2);
	ctx.lineTo(width, i * (iconSize + iconSpacing) + iconSize / 2);
	ctx.stroke();

	winAmount += bet * 10;
	}
	}

	return winAmount;
	}

	function onSpinEnd() {
	spinButton.disabled = false;
	autoSpinButton.disabled = false;
	spinning = false;

	const winAmount = calculateWin();
	balance += winAmount;
	win = winAmount;

	console.log('winAmount', winAmount);

	balanceDisplay.textContent = parseFloat(balance).toFixed(2);
	betDisplay.textContent = parseFloat(bet).toFixed(2);
	winDisplay.textContent = parseFloat(win).toFixed(2);
	}

	function onSpin() {
	spinButton.disabled = true;
	autoSpinButton.disabled = true;
	spinning = true;

	draw();

	balance -= bet;
	balanceDisplay.textContent = parseFloat(balance).toFixed(2);
	betDisplay.textContent = parseFloat(bet).toFixed(2);
	winDisplay.textContent = parseFloat(win).toFixed(2);

	setTimeout(onSpinEnd, spinDuration + spinDelay);
	}

	spinButton.addEventListener("click", onSpin);

	function onAutoSpin() {
	if (spinning) {
	return;
	}

	onSpin();

	setTimeout(onAutoSpin, spinDuration + spinDelay + 500);
	}

	autoSpinButton.addEventListener("click", onAutoSpin);

	function drawIcon(icon, x, y) {
	ctx.font = `${iconSize-10}px serif`;
	ctx.fillText(icon, x-4, y+47);
	}

	function drawSlot(x, y) {
	ctx.strokeRect(x, y, iconSize, iconSize);
	const icon = iconNames[Math.floor(Math.random() * iconNames.length)];
	console.log('slot', icon, x, y)
	drawIcon(icons[icon], x, y);
	}

	function drawSlots() {
	for (let i = 0; i < columns; i++) {
	for (let j = 0; j < rows; j++) {
	drawSlot(i * (iconSize + iconSpacing), j * (iconSize + iconSpacing));
	}
	}
	}

	function draw() {
	ctx.clearRect(0, 0, width, height);
	drawSlots();
	}

	// draw();