lesliev/gist:5bf9be692a75ad3b7d74abc0665d98ed

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f0f0f0;
    margin: 0;
  }
  .slot-machine {
    position: relative;
    width: 600px;
    height: 600px;
    border: 10px solid black;
    overflow: hidden;
    margin: 20px 0;
  }
  .reel {
    position: absolute;
    width: 200px;
    top: 0;
    transition: top linear;
  }
  .reel img {
    width: 200px;
    height: 200px;
  }
  .reel:nth-child(1) {
    left: 0;
  }
  .reel:nth-child(2) {
    left: 200px;
  }
  .reel:nth-child(3) {
    left: 400px;
  }
  #startButton {
    padding: 10px 20px;
    font-size: 16px;
  }
  #balance {
    font-size: 20px;
  }
  #gameName, #result {
    font-size: 24px;
    margin-bottom: -10px;
  }
</style>
</head>
<body>

<div id="gameName">Slot Machine Game</div>
<div id="result">Result: </div>
<div class="slot-machine">
  <div class="reel" id="reel1"></div>
  <div class="reel" id="reel2"></div>
  <div class="reel" id="reel3"></div>
</div>
<button id="startButton">START</button>
<div id="balance">Balance: 1000</div>

<script>
  const symbols = [
    'Orange.jpg', 'Banana.jpg', 'Strawberry.jpg', 'Kiwi.jpg', 'Watermelon.jpg', 'Pineapple.jpg'
  ];
  const payouts = { 'Orange.jpg': 2, 'Banana.jpg': 3, 'Strawberry.jpg': 4, 'Kiwi.jpg': 5, 'Watermelon.jpg': 6, 'Pineapple.jpg': 7 };
  let balance = 1000;
  const resultElem = document.getElementById('result');
  const balanceElem = document.getElementById('balance');

  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function initializeReel(reel) {
    reel.innerHTML = '';
    for (let i = 0; i < 500; i++) {
      const img = document.createElement('img');
      img.src = symbols[getRandomInt(0, 5)];
      reel.appendChild(img);
    }
  }

  function startSpin() {
    if (balance <= 0) return;

    balance -= 1;
    balanceElem.innerText = `Balance: ${balance}`;

    const reels = [document.getElementById('reel1'), document.getElementById('reel2'), document.getElementById('reel3')];
    reels.forEach(reel => initializeReel(reel));

    let winLines = [];

    reels.forEach((reel, index) => {
      const time = getRandomInt(100, 2000);
      const position = getRandomInt(0, 497) * 200;
      reel.style.transitionDuration = `${time}ms`;
      reel.style.top = `-${position}px`;

      setTimeout(() => {
        const visibleSymbols = [
          symbols.indexOf(reel.children[position / 200].src.split('/').pop()),
          symbols.indexOf(reel.children[position / 200 + 1].src.split('/').pop()),
          symbols.indexOf(reel.children[position / 200 + 2].src.split('/').pop())
        ];
        winLines[index] = visibleSymbols;
      }, time);
    });

    setTimeout(() => {
      checkWin(winLines);
    }, 2000);
  }

  function checkWin(lines) {
    let winLines = [
      [lines[0][0], lines[1][0], lines[2][0]],
      [lines[0][1], lines[1][1], lines[2][1]],
      [lines[0][2], lines[1][2], lines[2][2]],
      [lines[0][0], lines[1][1], lines[2][2]],
      [lines[0][2], lines[1][1], lines[2][0]]
    ];

    let win = false;
    winLines.forEach(line => {
      if (line[0] === line[1] && line[1] === line[2]) {
        win = true;
        balance += payouts[symbols[line[0]]];
        balanceElem.innerText = `Balance: ${balance}`;
      }
    });

    resultElem.innerText = win ? 'Result: You Win!' : 'Result: You Lose!';
  }

  document.getElementById('startButton').addEventListener('click', startSpin);
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f0f0f0;
	margin: 0;
	}
	.slot-machine {
	position: relative;
	width: 600px;
	height: 600px;
	border: 10px solid black;
	overflow: hidden;
	margin: 20px 0;
	}
	.reel {
	position: absolute;
	width: 200px;
	top: 0;
	transition: top linear;
	}
	.reel img {
	width: 200px;
	height: 200px;
	}
	.reel:nth-child(1) {
	left: 0;
	}
	.reel:nth-child(2) {
	left: 200px;
	}
	.reel:nth-child(3) {
	left: 400px;
	}
	#startButton {
	padding: 10px 20px;
	font-size: 16px;
	}
	#balance {
	font-size: 20px;
	}
	#gameName, #result {
	font-size: 24px;
	margin-bottom: -10px;
	}
	</style>
	</head>
	<body>

	<div id="gameName">Slot Machine Game</div>
	<div id="result">Result: </div>
	<div class="slot-machine">
	<div class="reel" id="reel1"></div>
	<div class="reel" id="reel2"></div>
	<div class="reel" id="reel3"></div>
	</div>
	<button id="startButton">START</button>
	<div id="balance">Balance: 1000</div>

	<script>
	const symbols = [
	'Orange.jpg', 'Banana.jpg', 'Strawberry.jpg', 'Kiwi.jpg', 'Watermelon.jpg', 'Pineapple.jpg'
	];
	const payouts = { 'Orange.jpg': 2, 'Banana.jpg': 3, 'Strawberry.jpg': 4, 'Kiwi.jpg': 5, 'Watermelon.jpg': 6, 'Pineapple.jpg': 7 };
	let balance = 1000;
	const resultElem = document.getElementById('result');
	const balanceElem = document.getElementById('balance');

	function getRandomInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	function initializeReel(reel) {
	reel.innerHTML = '';
	for (let i = 0; i < 500; i++) {
	const img = document.createElement('img');
	img.src = symbols[getRandomInt(0, 5)];
	reel.appendChild(img);
	}
	}

	function startSpin() {
	if (balance <= 0) return;

	balance -= 1;
	balanceElem.innerText = `Balance: ${balance}`;

	const reels = [document.getElementById('reel1'), document.getElementById('reel2'), document.getElementById('reel3')];
	reels.forEach(reel => initializeReel(reel));

	let winLines = [];

	reels.forEach((reel, index) => {
	const time = getRandomInt(100, 2000);
	const position = getRandomInt(0, 497) * 200;
	reel.style.transitionDuration = `${time}ms`;
	reel.style.top = `-${position}px`;

	setTimeout(() => {
	const visibleSymbols = [
	symbols.indexOf(reel.children[position / 200].src.split('/').pop()),
	symbols.indexOf(reel.children[position / 200 + 1].src.split('/').pop()),
	symbols.indexOf(reel.children[position / 200 + 2].src.split('/').pop())
	];
	winLines[index] = visibleSymbols;
	}, time);
	});

	setTimeout(() => {
	checkWin(winLines);
	}, 2000);
	}

	function checkWin(lines) {
	let winLines = [
	[lines[0][0], lines[1][0], lines[2][0]],
	[lines[0][1], lines[1][1], lines[2][1]],
	[lines[0][2], lines[1][2], lines[2][2]],
	[lines[0][0], lines[1][1], lines[2][2]],
	[lines[0][2], lines[1][1], lines[2][0]]
	];

	let win = false;
	winLines.forEach(line => {
	if (line[0] === line[1] && line[1] === line[2]) {
	win = true;
	balance += payouts[symbols[line[0]]];
	balanceElem.innerText = `Balance: ${balance}`;
	}
	});

	resultElem.innerText = win ? 'Result: You Win!' : 'Result: You Lose!';
	}

	document.getElementById('startButton').addEventListener('click', startSpin);
	</script>

	</body>
	</html>