Llama 3.3 70B × slots
0.3Vegas slot machine — reels, pay table, betting, win animations
correctness 0.0quality 1.0documentation 0.04384ms
$ cat slots.prompt — what the model was asked
Build a fully playable Vegas-style slot machine in a single self-contained HTML file with no external libraries and no external assets.
## Reels
- 3 reels, each with these 7 symbols: 🍒 Cherry, 🍋 Lemon, 🍊 Orange, 🍇 Grape, 🔔 Bell, ⭐ Star, 7️⃣ Seven
- Spin animation: each reel spins independently (reel 1 stops ~800ms, reel 2 ~1200ms, reel 3 ~1600ms), showing symbols scrolling at ~12 symbols/sec before snapping to the result
- SPIN button disabled while spinning
## Pay table (multipliers × bet)
- 7️⃣ 7️⃣ 7️⃣ → 100×
- ⭐ ⭐ ⭐ → 50×
- 🔔 🔔 🔔 → 20×
- 🍇 🍇 🍇 → 15×
- 🍊 🍊 🍊 → 10×
- 🍋 🍋 🍋 → 5×
- 🍒 🍒 🍒 → 3×
- Any two 🍒 in first two positions → 2×
- All other → 0× (loss)
## Betting & credits
- Start with 100 credits
- Bet buttons: 1, 5, 10 credits (highlighted active; default: 1)
- Bet deducted immediately on spin; win adds bet × multiplier
- GAME OVER at 0 credits with 'Play Again' button that resets to 100
## Win feedback
- Win: flash matching symbols, show '+[amount] credits' in gold, display win name ('JACKPOT!', 'THREE BELLS', etc.)
- Loss: shake animation on reels
- Credit balance count-up animation over 400ms
## Pay table display
- Visible panel on page (not a modal) listing all combinations
- Highlight winning row when that combination hits
## Code quality
- Single HTML file; all JS in <script>, all CSS in <style>
- Game state: { credits, bet, spinning, reels, result }
- Named functions: initState(), spin(), checkWin(), animateReels(), updateUI()
- RNG: Math.random() only
- No inline onclick= handlers; use addEventListenerrun 1 of 1
0.3correctness 0.0quality 1.0documentation 0.04384ms
# judge: Response is truncated mid-function and non-functional, missing animateReels, updateUI, game-over logic, count-up animation, and proper win handling entirely.
$ cat llama-3.3-70b.slots.r1.response
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vegas-style Slot Machine</title>
<style>
/* Add some basic styling to our game */
body {
font-family: Arial, sans-serif;
text-align: center;
}
#game-container {
width: 800px;
margin: 40px auto;
}
#reels {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.reel {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.symbol {
font-size: 36px;
margin: 10px;
}
#pay-table {
border-collapse: collapse;
width: 100%;
}
#pay-table th, #pay-table td {
border: 1px solid black;
padding: 10px;
}
#pay-table th {
background-color: #f0f0f0;
}
.winning-row {
background-color: #ffff00;
}
#credit-balance {
font-size: 24px;
font-weight: bold;
animation: count-up 0.4s;
}
@keyframes count-up {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
#win-feedback {
font-size: 24px;
font-weight: bold;
color: gold;
}
#game-over {
font-size: 36px;
font-weight: bold;
color: red;
}
.shake {
animation: shake 0.2s;
}
@keyframes shake {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-10px);
}
40% {
transform: translateX(10px);
}
60% {
transform: translateX(-10px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.flash {
animation: flash 1s;
}
@keyframes flash {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="game-container">
<h1>Slot Machine</h1>
<div id="reels"></div>
<div id="pay-table-container">
<table id="pay-table">
<tr>
<th>Combination</th>
<th>Multiplier</th>
</tr>
<!-- Pay table rows will be generated dynamically -->
</table>
</div>
<div id="bet-buttons">
<button id="bet-1" class="active">1</button>
<button id="bet-5">5</button>
<button id="bet-10">10</button>
</div>
<button id="spin-button">SPIN</button>
<p id="credit-balance">100</p>
<p id="win-feedback"></p>
<p id="game-over" style="display: none;">GAME OVER</p>
<button id="play-again-button" style="display: none;">Play Again</button>
</div>
<script>
// Initialize game state
let state = {
credits: 100,
bet: 1,
spinning: false,
reels: [],
result: []
};
// Function to initialize the game state
function initState() {
state.reels = [[], [], []];
state.result = [];
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 12; j++) {
state.reels[i].push(getRandomSymbol());
}
}
}
// Function to get a random symbol
function getRandomSymbol() {
const symbols = ['🍒', '🍋', '🍊', '🍇', '🔔', '⭐', '7️⃣'];
return symbols[Math.floor(Math.random() * symbols.length)];
}
// Function to spin the reels
function spin() {
// Disable spin button while spinning
document.getElementById('spin-button').disabled = true;
// Deduct bet from credits
state.credits -= state.bet;
// Update UI
updateUI();
// Spin reels
let spinDuration = [800, 1200, 1600];
for (let i = 0; i < 3; i++) {
setTimeout(() => {
// Stop reel and set result
state.result.push(state.reels[i][Math.floor(Math.random() * state.reels[i].length)]);
// Check if all reels have stopped
if (i === 2) {
// Enable spin button
document.getElementById('spin-button').disabled = false;
// Check for win
checkWin();
}
}, spinDuration[i]);
}
}
// Function to check for win
function checkWin() {
let combination = state.result.join('');
let payTable = {
'7️⃣7️⃣7️⃣': 100,
'⭐⭐⭐': 50,
'🔔🔔🔔': 20,
'🍇🍇🍇': 15,
'🍊🍊🍊': 10,
'🍋🍋🍋': 5,
'🍒🍒🍒': 3,
'🍒🍒🔔': 2,
'🍒🍒🍇': 2,
'🍒🍒🍊': 2,
'🍒🍒⭐': 2,
'🍒🍒7️⃣': 2
};
// Check if combination is in pay table
if (combination in payTable) {
// Update credits
state.credits += state.bet * payTable[combination];
// Update UI
updateUI();
// Show win feedback
showWinFeedback(combination);
} else {
// Show loss feedback
showLossFeedback();
}
// Reset state
state.spinning = false;
state.result = [];
}
// Function to show win feedback
function showWinFeedback(combination) {
// Flash matching symbols
let symbols = document.querySelectorAll('.symbol');
symbols.forEach(symbol => {
if (symbol.textContent === combination[0]) {
symbol.classList.add('flash');
}
});
// Show win message
let winMessage;
switch (combination) {
case '7️⃣7️⃣7️⃣':
winMessage = 'JACKPOT!';
break;
case '⭐⭐⭐':
winMessage = 'THREE STARS!';
break;
case '🔔🔔🔔':
winMessage = 'THREE BELLS!';
break;
case '🍇🍇🍇':
winMessage = 'THREE GRAPES!';
break;
case '🍊🍊🍊':
winMessage = 'THREE ORANGES!';
break;
case '🍋🍋🍋':
winMessage = 'THREE LEMONS!';
break;
case '🍒🍒🍒':
winMessage = 'THREE CHERRIES!';
break;
default:
winMessage = `TWO CHERRIES AND A ${combination[2]}!`;
}
document.getElementById('win-feedback').textContent = `+${state.bet * getPayTable(combination)} credits! ${winMessage}`;
// Highlight winning row in pay table
let payTableRows = document.querySelectorAll('#pay-table tr');
payTableRows.forEach(row => {
if (row.cells[0].textContent === combination) {
row.classList.add('winning-row');
} else {
row.classList.remove('winning-row');
}
});
}
// Function to show loss feedback
function showLossFeedback() {
// Shake reels
let reels = document.querySelectorAll('.reel');
reels.forEach(reel => {
reel.classList.add('shake');
setTimeout(() => {
reel.classList.remove('shake');
}, 200);
});
// Clear win feedback
document.getElementById('win-feedback').textContent = '';
}
// Function to update UI
function updateUI() {
// Update reels
let reels = document.querySelectorAll('.reel');
reels.forEach((reel, i) => {
reel.innerHTML = '';
state.reels[i].forEach(symbol => {
let