Last active
June 20, 2024 13:23
-
-
Save shakkurcwb/199cc6e1221970cfe780901f6f83f21b to your computer and use it in GitHub Desktop.
Casino Game (Javascript)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
Author
shakkurcwb
commented
Jun 2, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment