One-shot games
Generate a complete, ready-to-play browser game with a single prompt
Prompt
Create Minesweeper but replace mines with watermelons
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watermelon Sweeper</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, #90EE90, #98FB98);
margin: 0;
padding: 20px;
min-height: 100vh;
}
h1 {
color: #2E8B57;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.game-info {
display: flex;
gap: 30px;
margin-bottom: 20px;
font-size: 18px;
font-weight: bold;
color: #2E8B57;
}
.controls {
margin-bottom: 20px;
}
button {
background: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 0 5px;
}
button:hover {
background: #45a049;
}
.game-board {
display: grid;
gap: 2px;
background: #2E8B57;
padding: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.cell {
width: 40px;
height: 40px;
border: 2px solid #4CAF50;
background: #90EE90;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: bold;
font-size: 16px;
border-radius: 3px;
transition: all 0.1s;
}
.cell:hover {
background: #87CEEB;
}
.cell.revealed {
background: #F0F8FF;
border: 2px solid #B0C4DE;
}
.cell.flagged {
background: #FFB6C1;
border: 2px solid #FF69B4;
}
.cell.watermelon {
background: #FF6B6B;
border: 2px solid #FF4444;
}
.number-1 { color: #0000FF; }
.number-2 { color: #008000; }
.number-3 { color: #FF0000; }
.number-4 { color: #000080; }
.number-5 { color: #800000; }
.number-6 { color: #008080; }
.number-7 { color: #000000; }
.number-8 { color: #808080; }
.game-over {
color: #FF0000;
font-size: 24px;
font-weight: bold;
margin-top: 20px;
}
.game-won {
color: #008000;
font-size: 24px;
font-weight: bold;
margin-top: 20px;
}
.difficulty-select {
margin-bottom: 20px;
}
select {
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<h1>🍉 Watermelon Sweeper 🍉</h1>
<div class="difficulty-select">
<label for="difficulty">Difficulty: </label>
<select id="difficulty" onchange="changeDifficulty()">
<option value="easy">Easy (9x9, 10 watermelons)</option>
<option value="medium">Medium (16x16, 40 watermelons)</option>
<option value="hard">Hard (16x30, 99 watermelons)</option>
</select>
</div>
<div class="game-info">
<div>Watermelons: <span id="watermelon-count">10</span></div>
<div>Time: <span id="timer">0</span>s</div>
</div>
<div class="controls">
<button onclick="newGame()">New Game</button>
<button onclick="toggleInstructions()">Instructions</button>
</div>
<div id="instructions" style="display: none; max-width: 400px; text-align: center; margin-bottom: 20px; background: white; padding: 15px; border-radius: 10px;">
<h3>How to Play:</h3>
<p>🖱️ Left click to reveal a cell<br>
🖱️ Right click to flag/unflag a watermelon<br>
🔢 Numbers show how many watermelons are adjacent<br>
🎯 Flag all watermelons to win!</p>
</div>
<div class="game-board" id="game-board"></div>
<div id="game-status"></div>
<script>
let board = [];
let gameActive = true;
let firstClick = true;
let startTime = null;
let timerInterval = null;
let settings = {
easy: { rows: 9, cols: 9, watermelons: 10 },
medium: { rows: 16, cols: 16, watermelons: 40 },
hard: { rows: 16, cols: 30, watermelons: 99 }
};
let currentDifficulty = 'easy';
let flaggedCount = 0;
function initializeGame() {
const config = settings[currentDifficulty];
board = [];
gameActive = true;
firstClick = true;
startTime = null;
flaggedCount = 0;
if (timerInterval) {
clearInterval(timerInterval);
}
document.getElementById('timer').textContent = '0';
document.getElementById('watermelon-count').textContent = config.watermelons;
document.getElementById('game-status').innerHTML = '';
// Create empty board
for (let i = 0; i < config.rows; i++) {
board[i] = [];
for (let j = 0; j < config.cols; j++) {
board[i][j] = {
isWatermelon: false,
isRevealed: false,
isFlagged: false,
neighborCount: 0
};
}
}
createBoard();
}
function placeWatermelons(excludeRow, excludeCol) {
const config = settings[currentDifficulty];
let watermelonsPlaced = 0;
while (watermelonsPlaced < config.watermelons) {
const row = Math.floor(Math.random() * config.rows);
const col = Math.floor(Math.random() * config.cols);
if (!board[row][col].isWatermelon && !(row === excludeRow && col === excludeCol)) {
board[row][col].isWatermelon = true;
watermelonsPlaced++;
}
}
// Calculate neighbor counts
for (let i = 0; i < config.rows; i++) {
for (let j = 0; j < config.cols; j++) {
if (!board[i][j].isWatermelon) {
board[i][j].neighborCount = countNeighborWatermelons(i, j);
}
}
}
}
function countNeighborWatermelons(row, col) {
let count = 0;
const config = settings[currentDifficulty];
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
const newRow = row + i;
const newCol = col + j;
if (newRow >= 0 && newRow < config.rows &&
newCol >= 0 && newCol < config.cols &&
board[newRow][newCol].isWatermelon) {
count++;
}
}
}
return count;
}
function createBoard() {
const config = settings[currentDifficulty];
const gameBoard = document.getElementById('game-board');
gameBoard.innerHTML = '';
gameBoard.style.gridTemplateColumns = `repeat(${config.cols}, 1fr)`;
for (let i = 0; i < config.rows; i++) {
for (let j = 0; j < config.cols; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', () => handleCellClick(i, j));
cell.addEventListener('contextmenu', (e) => {
e.preventDefault();
handleRightClick(i, j);
});
gameBoard.appendChild(cell);
}
}
}
function handleCellClick(row, col) {
if (!gameActive || board[row][col].isRevealed || board[row][col].isFlagged) {
return;
}
if (firstClick) {
placeWatermelons(row, col);
firstClick = false;
startTimer();
}
revealCell(row, col);
}
function handleRightClick(row, col) {
if (!gameActive || board[row][col].isRevealed) {
return;
}
board[row][col].isFlagged = !board[row][col].isFlagged;
if (board[row][col].isFlagged) {
flaggedCount++;
} else {
flaggedCount--;
}
updateWatermelonCount();
updateBoard();
checkWinCondition();
}
function revealCell(row, col) {
const config = settings[currentDifficulty];
if (row < 0 || row >= config.rows || col < 0 || col >= config.cols ||
board[row][col].isRevealed || board[row][col].isFlagged) {
return;
}
board[row][col].isRevealed = true;
if (board[row][col].isWatermelon) {
gameOver(false);
return;
}
if (board[row][col].neighborCount === 0) {
// Reveal all neighbors
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
revealCell(row + i, col + j);
}
}
}
updateBoard();
checkWinCondition();
}
function updateBoard() {
const cells = document.querySelectorAll('.cell');
cells.forEach(cell => {
const row = parseInt(cell.dataset.row);
const col = parseInt(cell.dataset.col);
const cellData = board[row][col];
cell.className = 'cell';
cell.innerHTML = '';
if (cellData.isFlagged) {
cell.classList.add('flagged');
cell.innerHTML = '🚩';
} else if (cellData.isRevealed) {
cell.classList.add('revealed');
if (cellData.isWatermelon) {
cell.classList.add('watermelon');
cell.innerHTML = '🍉';
} else if (cellData.neighborCount > 0) {
cell.innerHTML = cellData.neighborCount;
cell.classList.add(`number-${cellData.neighborCount}`);
}
}
});
}
function updateWatermelonCount() {
const config = settings[currentDifficulty];
const remaining = config.watermelons - flaggedCount;
document.getElementById('watermelon-count').textContent = remaining;
}
function checkWinCondition() {
const config = settings[currentDifficulty];
let revealedCount = 0;
let correctFlags = 0;
for (let i = 0; i < config.rows; i++) {
for (let j = 0; j < config.cols; j++) {
if (board[i][j].isRevealed && !board[i][j].isWatermelon) {
revealedCount++;
}
if (board[i][j].isFlagged && board[i][j].isWatermelon) {
correctFlags++;
}
}
}
const totalSafeCells = (config.rows * config.cols) - config.watermelons;
if (revealedCount === totalSafeCells && correctFlags === config.watermelons) {
gameOver(true);
}
}
function gameOver(won) {
gameActive = false;
if (timerInterval) {
clearInterval(timerInterval);
}
if (won) {
document.getElementById('game-status').innerHTML = '<div class="game-won">🎉 You Win! All watermelons found! 🎉</div>';
} else {
document.getElementById('game-status').innerHTML = '<div class="game-over">💥 Game Over! You hit a watermelon! 💥</div>';
// Reveal all watermelons
for (let i = 0; i < settings[currentDifficulty].rows; i++) {
for (let j = 0; j < settings[currentDifficulty].cols; j++) {
if (board[i][j].isWatermelon) {
board[i][j].isRevealed = true;
}
}
}
updateBoard();
}
}
function startTimer() {
startTime = Date.now();
timerInterval = setInterval(() => {
const elapsed = Math.floor((Date.now() - startTime) / 1000);
document.getElementById('timer').textContent = elapsed;
}, 1000);
}
function newGame() {
initializeGame();
}
function changeDifficulty() {
currentDifficulty = document.getElementById('difficulty').value;
initializeGame();
}
function toggleInstructions() {
const instructions = document.getElementById('instructions');
instructions.style.display = instructions.style.display === 'none' ? 'block' : 'none';
}
// Initialize the game when page loads
initializeGame();
</script>
</body>
</html>
```Drag to resize
# Watermelon Sweeper Game
I'll create a Minesweeper-inspired game where watermelons replace mines. The game will feature a grid where players uncover cells to reveal either numbers (indicating adjacent watermelons) or watermelons themselves.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watermelon Sweeper</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.game-container {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
padding: 25px;
max-width: 600px;
width: 100%;
text-align: center;
}
h1 {
color: #2c5f2d;
margin-bottom: 15px;
font-size: 2.8rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.subtitle {
color: #4a752c;
margin-bottom: 20px;
font-size: 1.2rem;
}
.stats {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
background: #e8f5e9;
padding: 12px;
border-radius: 10px;
font-weight: bold;
color: #2e7d32;
}
.grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 3px;
margin: 0 auto 25px;
max-width: 500px;
}
.cell {
aspect-ratio: 1;
background: #a5d6a7;
border: 2px solid #81c784;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}
.cell:hover {
background: #81c784;
transform: translateY(-2px);
}
.cell.revealed {
background: #e8f5e9;
transform: scale(0.95);
}
.cell.watermelon {
background: #ff8a80;
color: #b71c1c;
font-size: 1.8rem;
}
.cell.flagged::after {
content: "🚩";
font-size: 1.4rem;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
button {
background: #4caf50;
color: white;
border: none;
padding: 12px 25px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button:hover {
background: #388e3c;
transform: translateY(-3px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.message {
margin-top: 20px;
padding: 15px;
border-radius: 10px;
font-weight: bold;
font-size: 1.3rem;
min-height: 40px;
}
.win {
background: #c8e6c9;
color: #2e7d32;
}
.lose {
background: #ffcdd2;
color: #c62828;
}
.instructions {
background: #e3f2fd;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
text-align: left;
}
.instructions h3 {
color: #1565c0;
margin-bottom: 10px;
}
.instructions ul {
padding-left: 20px;
}
.instructions li {
margin-bottom: 8px;
color: #2e7d32;
}
.number-1 { color: #1976d2; }
.number-2 { color: #388e3c; }
.number-3 { color: #d32f2f; }
.number-4 { color: #7b1fa2; }
.number-5 { color: #ff8f00; }
.number-6 { color: #0097a7; }
.number-7 { color: #5d4037; }
.number-8 { color: #455a64; }
</style>
</head>
<body>
<div class="game-container">
<h1>🍉 Watermelon Sweeper 🍉</h1>
<p class="subtitle">Find the watermelons without stepping on them!</p>
<div class="stats">
<div class="watermelons">Watermelons: <span id="watermelon-count">15</span></div>
<div class="flags">Flags: <span id="flag-count">15</span></div>
<div class="timer">Time: <span id="time">0</span>s</div>
</div>
<div class="grid" id="grid"></div>
<div class="message" id="message"></div>
<div class="controls">
<button id="reset">New Game</button>
<button id="hint">Hint (3)</button>
</div>
<div class="instructions">
<h3>How to Play:</h3>
<ul>
<li>Left-click to reveal a cell</li>
<li>Right-click to place/remove a flag</li>
<li>Numbers show how many watermelons are adjacent</li>
<li>Find all watermelons without stepping on them to win!</li>
</ul>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const gridElement = document.getElementById('grid');
const resetButton = document.getElementById('reset');
const hintButton = document.getElementById('hint');
const messageElement = document.getElementById('message');
const watermelonCountElement = document.getElementById('watermelon-count');
const flagCountElement = document.getElementById('flag-count');
const timerElement = document.getElementById('time');
const ROWS = 10;
const COLS = 10;
const WATERMELONS = 15;
let hints = 3;
let grid = [];
let revealedCount = 0;
let flaggedCells = new Set();
let gameOver = false;
let gameWon = false;
let startTime = null;
let timerInterval = null;
// Initialize the game
function initGame() {
// Reset game state
grid = [];
revealedCount = 0;
flaggedCells.clear();
gameOver = false;
gameWon = false;
hints = 3;
hintButton.textContent = `Hint (${hints})`;
messageElement.textContent = '';
messageElement.className = 'message';
startTime = null;
clearInterval(timerInterval);
timerElement.textContent = '0';
// Create empty grid
gridElement.innerHTML = '';
for (let r = 0; r < ROWS; r++) {
grid[r] = [];
for (let c = 0; c < COLS; c++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = r;
cell.dataset.col = c;
// Left click
cell.addEventListener('click', () => revealCell(r, c));
// Right click
cell.addEventListener('contextmenu', (e) => {
e.preventDefault();
toggleFlag(r, c);
});
gridElement.appendChild(cell);
grid[r][c] = {
isWatermelon: false,
revealed: false,
flagged: false,
adjacentWatermelons: 0,
element: cell
};
}
}
// Place watermelons randomly
let watermelonsPlaced = 0;
while (watermelonsPlaced < WATERMELONS) {
const r = Math.floor(Math.random() * ROWS);
const c = Math.floor(Math.random() * COLS);
if (!grid[r][c].isWatermelon) {
grid[r][c].isWatermelon = true;
watermelonsPlaced++;
}
}
// Calculate adjacent watermelons
for (let r = 0; r < ROWS; r++) {
for (let c = 0; c < COLS; c++) {
if (!grid[r][c].isWatermelon) {
let count = 0;
// Check all 8 neighbors
for (let dr = -1; dr <= 1; dr++) {
for (let dc = -1; dc <= 1; dc++) {
if (dr === 0 && dc === 0) continue;
const nr = r + dr;
const nc = c + dc;
if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS) {
if (grid[nr][nc].isWatermelon) {
count++;
}
}
}
}
grid[r][c].adjacentWatermelons = count;
}
}
}
watermelonCountElement.textContent = WATERMELONS;
flagCountElement.textContent = WATERMELONS;
}
// Reveal a cell
function revealCell(r, c) {
if (gameOver || gameWon) return;
if (!startTime) {
startTime = Date.now();
timerInterval = setInterval(updateTimer, 1000);
}
const cell = grid[r][c];
if (cell.revealed || cell.flagged) return;
cell.revealed = true;
revealedCount++;
cell.element.classList.add('revealed');
if (cell.isWatermelon) {
// Game over
cell.element.textContent = '💥';
cell.element.classList.add('watermelon');
gameOver = true;
clearInterval(timerInterval);
revealAllWatermelons();
messageElement.textContent = 'Game Over! You stepped on a watermelon!';
messageElement.className = 'message lose';
return;
}
// Show adjacent watermelons count
if (cell.adjacentWatermelons > 0) {
cell.element.textContent = cell.adjacentWatermelons;
cell.element.classList.add(`number-${cell.adjacentWatermelons}`);
} else {
// Reveal adjacent cells if no adjacent watermelons
for (let dr = -1; dr <= 1; dr++) {
for (let dc = -1; dc <= 1; dc++) {
if (dr === 0 && dc === 0) continue;
const nr = r + dr;
const nc = c + dc;
if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS) {
if (!grid[nr][nc].revealed) {
revealCell(nr, nc);
}
}
}
}
}
// Check for win
if (revealedCount === ROWS * COLS - WATERMELONS) {
gameWon = true;
clearInterval(timerInterval);
messageElement.textContent = 'Congratulations! You found all the watermelons!';
messageElement.className = 'message win';
revealAllWatermelons(true);
}
}
// Toggle flag on a cell
function toggleFlag(r, c) {
if (gameOver || gameWon) return;
const cell = grid[r][c];
if (cell.revealed) return;
const flagsUsed = flaggedCells.size;
if (cell.flagged) {
cell.flagged = false;
cell.element.classList.remove('flagged');
flaggedCells.delete(`${r},${c}`);
} else if (flagsUsed < WATERMELONS) {
cell.flagged = true;
cell.element.classList.add('flagged');
flaggedCells.add(`${r},${c}`);
}
flagCountElement.textContent = WATERMELONS - flaggedCells.size;
}
// Reveal all watermelons (for game over or win)
function revealAllWatermelons(win = false) {
for (let r = 0; r < ROWS; r++) {
for (let c = 0; c < COLS; c++) {
const cell = grid[r][c];
if (cell.isWatermelon) {
if (win) {
cell.element.textContent = '🍉';
cell.element.classList.add('watermelon');
}
cell.element.classList.add('revealed');
}
}
}
}
// Update the timer
function updateTimer() {
const elapsed = Math.floor((Date.now() - startTime) / 1000);
timerElement.textContent = elapsed;
}
// Hint functionality
hintButton.addEventListener('click', () => {
if (gameOver || gameWon || hints <= 0) return;
// Find a cell that is not a watermelon and not revealed
let found = false;
while (!found && hints > 0) {
const r = Math.floor(Math.random() * ROWS);
const c = Math.floor(Math.random() * COLS);
const cell = grid[r][c];
if (!cell.revealed && !cell.isWatermelon && !cell.flagged) {
revealCell(r, c);
found = true;
hints--;
hintButton.textContent = `Hint (${hints})`;
}
}
});
// Reset button
resetButton.addEventListener('click', initGame);
// Start the game
initGame();
});
</script>
</body>
</html>
```
## How to Play Watermelon Sweeper
1. **Objective**: Find all the watermelons without stepping on them
2. **Controls**:
- Left-click to reveal a cell
- Right-click to place or remove a flag
3. **Gameplay**:
- Numbers show how many watermelons are adjacent to that cell
- Use flags to mark cells you suspect contain watermelons
- You have 3 hints that will reveal a safe cell
- Win by revealing all non-watermelon cells
The game features:
- A 10x10 grid with 15 hidden watermelons
- Timer to track your progress
- Color-coded numbers indicating watermelon proximity
- Visual feedback for game states (win/lose)
- Responsive design that works on all devices
Enjoy the game! Try to beat your best time!Drag to resize
Certainly! Below is a simple implementation of a Minesweeper game where mines are replaced with watermelons. The code uses HTML, CSS, and JavaScript to create the game.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watermelon Sweeper</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#game {
display: grid;
grid-template-columns: repeat(10, 30px);
grid-template-rows: repeat(10, 30px);
gap: 2px;
}
.cell {
width: 30px;
height: 30px;
background-color: #ccc;
border: 1px solid #999;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
cursor: pointer;
}
.revealed {
background-color: #eee;
}
.watermelon {
background-color: #ff6b6b;
color: white;
}
</style>
</head>
<body>
<div id="game"></div>
<script>
const ROWS = 10;
const COLS = 10;
const WATERMELONS = 10;
let board = [];
let gameOver = false;
function createBoard() {
const game = document.getElementById('game');
game.innerHTML = '';
for (let row = 0; row < ROWS; row++) {
let rowArr = [];
for (let col = 0; col < COLS; col++) {
let cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = row;
cell.dataset.col = col;
cell.addEventListener('click', onCellClick);
game.appendChild(cell);
rowArr.push({
mine: false,
revealed: false,
element: cell,
});
}
board.push(rowArr);
}
plantWatermelons();
}
function plantWatermelons() {
let planted = 0;
while (planted < WATERMELONS) {
let row = Math.floor(Math.random() * ROWS);
let col = Math.floor(Math.random() * COLS);
if (!board[row][col].mine) {
board[row][col].mine = true;
planted++;
}
}
}
function revealCell(row, col) {
if (board[row][col].revealed || gameOver) return;
board[row][col].revealed = true;
board[row][col].element.classList.add('revealed');
if (board[row][col].mine) {
board[row][col].element.textContent = '🍉';
board[row][col].element.classList.add('watermelon');
gameOver = true;
alert('You hit a watermelon! Game over.');
} else {
let adjacentMines = countAdjacentWatermelons(row, col);
board[row][col].element.textContent = adjacentMines > 0 ? adjacentMines : '';
if (adjacentMines === 0) {
revealAdjacentCells(row, col);
}
}
}
function countAdjacentWatermelons(row, col) {
let count = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
let newRow = row + i;
let newCol = col + j;
if (newRow >= 0 && newRow < ROWS && newCol >= 0 && newCol < COLS) {
if (board[newRow][newCol].mine) {
count++;
}
}
}
}
return count;
}
function revealAdjacentCells(row, col) {
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
let newRow = row + i;
let newCol = col + j;
if (newRow >= 0 && newRow < ROWS && newCol >= 0 && newCol < COLS) {
revealCell(newRow, newCol);
}
}
}
}
function onCellClick(event) {
let row = parseInt(event.target.dataset.row);
let col = parseInt(event.target.dataset.col);
revealCell(row, col);
}
createBoard();
</script>
</body>
</html>
```
This code creates a 10x10 grid where each cell can be clicked to reveal either a number (indicating the count of adjacent watermelons) or a watermelon emoji (indicating a watermelon). If you click on a watermelon, the game is over, and an alert will inform you that you hit a watermelon.Drag to resize
Below is a simple implementation of Minesweeper where the mines are replaced with watermelons. The game is built using HTML, CSS, and JavaScript. The code includes the full HTML structure with embedded CSS and JavaScript.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watermelon Sweeper</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
.grid {
display: inline-grid;
grid-template-columns: repeat(10, 40px);
grid-template-rows: repeat(10, 40px);
gap: 2px;
margin-top: 20px;
}
.cell {
width: 40px;
height: 40px;
background-color: #bbb;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
user-select: none;
}
.cell.revealed {
background-color: #ddd;
cursor: default;
}
.watermelon {
color: #ff0000;
font-size: 24px;
}
.number {
font-size: 20px;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Watermelon Sweeper</h1>
<div class="grid" id="grid"></div>
<button onclick="resetGame()">Reset Game</button>
<script>
const gridSize = 10;
const numWatermelons = 10;
let grid = [];
let gameOver = false;
function createGrid() {
const gridElement = document.getElementById('grid');
gridElement.innerHTML = '';
grid = [];
for (let i = 0; i < gridSize; i++) {
const row = [];
for (let j = 0; j < gridSize; j++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', () => revealCell(i, j));
gridElement.appendChild(cell);
row.push(cell);
}
grid.push(row);
}
placeWatermelons();
}
function placeWatermelons() {
const positions = new Set();
while (positions.size < numWatermelons) {
const row = Math.floor(Math.random() * gridSize);
const col = Math.floor(Math.random() * gridSize);
positions.add(`${row},${col}`);
}
positions.forEach(pos => {
const [row, col] = pos.split(',').map(Number);
grid[row][col].classList.add('watermelon');
grid[row][col].innerHTML = '🍉';
});
}
function revealCell(row, col) {
if (gameOver || grid[row][col].classList.contains('revealed')) return;
const cell = grid[row][col];
if (cell.classList.contains('watermelon')) {
cell.style.backgroundColor = '#ffcccc';
gameOver = true;
revealAllWatermelons();
alert('Game Over! You hit a watermelon! 🍉');
} else {
const count = countAdjacentWatermelons(row, col);
cell.classList.add('revealed');
cell.innerHTML = count > 0 ? count : '';
if (count === 0) {
revealAdjacentCells(row, col);
}
}
}
function revealAllWatermelons() {
grid.forEach(row => {
row.forEach(cell => {
if (cell.classList.contains('watermelon')) {
cell.classList.add('revealed');
}
});
});
}
function countAdjacentWatermelons(row, col) {
let count = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
const r = row + i;
const c = col + j;
if (r >= 0 && r < gridSize && c >= 0 && c < gridSize && grid[r][c].classList.contains('watermelon')) {
count++;
}
}
}
return count;
}
function revealAdjacentCells(row, col) {
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
const r = row + i;
const c = col + j;
if (r >= 0 && r < gridSize && c >= 0 && c < gridSize) {
revealCell(r, c);
}
}
}
}
function resetGame() {
gameOver = false;
createGrid();
}
// Initialize the game
createGrid();
</script>
</body>
</html>
```
### How It Works:
1. **Grid Creation**: A 10x10 grid is created where each cell is initially hidden.
2. **Watermelons Placement**: 10 watermelons (`🍉`) are randomly placed on the grid.
3. **Revealing Cells**: When a cell is clicked, it reveals either a number (indicating adjacent watermelons) or a watermelon. If a watermelon is clicked, the game ends.
4. **Reset Button**: Allows the player to start a new game.
### Features:
- Replace mines with watermelons (`🍉`).
- Reveals adjacent watermelon counts.
- Game Over when a watermelon is clicked.
- Reset functionality to start a new game.
Copy and paste the code into an HTML file and open it in a browser to play!Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watermelon Sweeper</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
background-color: #f0f0f0;
}
#game-board {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
padding: 0;
max-width: 100%;
}
.cell {
width: 30px;
height: 30px;
border: 1px solid #999;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
font-size: 20px;
user-select: none;
cursor: pointer;
background-color: #dcdcdc;
}
.cell.revealed {
background-color: #eee;
font-weight: bold;
}
.cell.revealed:hover {
background-color: #eee;
}
.row {
display: flex;
width: max-content;
}
.controls {
margin: 10px;
}
button {
margin: 5px;
padding: 8px 12px;
font-size: 16px;
}
#message {
font-size: 24px;
margin: 10px;
color: #d32f2f;
}
</style>
</head>
<body>
<h1>Watermelon Sweeper</h1>
<div id="message"></div>
<div class="controls">
<button onclick="initializeGame('beginner')">Beginner</button>
<button onclick="initializeGame('intermediate')">Intermediate</button>
<button onclick="initializeGame('expert')">Expert</button>
<button onclick="initializeGame(currentDifficulty)">Reset</button>
</div>
<div id="game-board"></div>
<script>
let board = [];
let rows = 9;
let cols = 9;
let watermelonCount = 10;
let currentDifficulty = 'beginner';
let gameOver = false;
function initializeGame(difficulty) {
const messageDiv = document.getElementById('message');
messageDiv.textContent = '';
gameOver = false;
currentDifficulty = difficulty;
switch (difficulty) {
case 'beginner':
rows = 9;
cols = 9;
watermelonCount = 10;
break;
case 'intermediate':
rows = 16;
cols = 16;
watermelonCount = 40;
break;
case 'expert':
rows = 16;
cols = 30;
watermelonCount = 99;
break;
}
board = [];
for (let r = 0; r < rows; r++) {
board[r] = [];
for (let c = 0; c < cols; c++) {
board[r][c] = {
isWatermelon: false,
isRevealed: false,
isFlagged: false,
adjacentWatermelons: 0
};
}
}
generateRandomWatermelons();
calculateNumbers();
renderBoard();
}
function generateRandomWatermelons() {
const totalCells = rows * cols;
if (watermelonCount > totalCells) watermelonCount = totalCells;
const positions = new Set();
while (positions.size < watermelonCount) {
const r = Math.floor(Math.random() * rows);
const c = Math.floor(Math.random() * cols);
positions.add(`${r},${c}`);
}
positions.forEach(pos => {
const [r, c] = pos.split(',').map(Number);
board[r][c].isWatermelon = true;
});
}
function calculateNumbers() {
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
board[r][c].adjacentWatermelons = 0;
if (!board[r][c].isWatermelon) {
for (let dr = -1; dr <= 1; dr++) {
for (let dc = -1; dc <= 1; dc++) {
if (dr === 0 && dc === 0) continue;
const newRow = r + dr;
const newCol = c + dc;
if (newRow >= 0 && newRow < rows && newCol >= 0 && newCol < cols) {
if (board[newRow][newCol].isWatermelon) {
board[r][c].adjacentWatermelons++;
}
}
}
}
}
}
}
}
function renderBoard() {
const container = document.getElementById('game-board');
container.innerHTML = '';
for (let r = 0; r < rows; r++) {
const rowDiv = document.createElement('div');
rowDiv.classList.add('row');
for (let c = 0; c < cols; c++) {
const cellDiv = document.createElement('div');
cellDiv.classList.add('cell');
cellDiv.dataset.row = r;
cellDiv.dataset.col = c;
cellDiv.textContent = '';
cellDiv.innerHTML = '';
cellDiv.addEventListener('click', handleCellClick);
cellDiv.addEventListener('contextmenu', handleRightClick);
rowDiv.appendChild(cellDiv);
}
container.appendChild(rowDiv);
}
}
function handleCellClick(event) {
if (gameOver) return;
const cellDiv = event.currentTarget;
const r = parseInt(cellDiv.dataset.row);
const c = parseInt(cellDiv.dataset.col);
if (board[r][c].isRevealed || board[r][c].isFlagged) return;
board[r][c].isRevealed = true;
if (board[r][c].isWatermelon) {
gameOver = true;
const messageDiv = document.getElementById('message');
messageDiv.textContent = 'Game Over! Hit a watermelon.';
document.querySelectorAll('.cell').forEach(cellElem => {
const row = parseInt(cellElem.dataset.row);
const col = parseInt(cellElem.dataset.col);
if (board[row][col].isWatermelon) {
cellElem.innerHTML = '🍉';
cellElem.classList.add('revealed');
}
});
return;
}
cellDiv.classList.add('revealed');
if (board[r][c].adjacentWatermelons > 0) {
cellDiv.textContent = board[r][c].adjacentWatermelons;
} else {
cellDiv.textContent = '';
revealAdjacent(r, c);
}
checkForWin();
}
function revealAdjacent(r, c) {
const directions = [-1, 0, 1];
for (let dr of directions) {
for (let dc of directions) {
if (dr === 0 && dc === 0) continue;
const nr = r + dr;
const nc = c + dc;
if (nr >= 0 && nr < rows && nc >= 0 && nc < cols) {
const cell = board[nr][nc];
const cellDiv = document.querySelector(`[data-row='${nr}'][data-col='${nc}']`);
if (!cell.isRevealed && !cell.isFlagged) {
cell.isRevealed = true;
cellDiv.classList.add('revealed');
if (cell.adjacentWatermelons > 0) {
cellDiv.textContent = cell.adjacentWatermelons;
} else {
cellDiv.textContent = '';
revealAdjacent(nr, nc);
}
}
}
}
}
}
function handleRightClick(event) {
event.preventDefault();
if (gameOver) return;
const cellDiv = event.currentTarget;
const r = parseInt(cellDiv.dataset.row);
const c = parseInt(cellDiv.dataset.col);
const cell = board[r][c];
if (cell.isRevealed) return;
cell.isFlagged = !cell.isFlagged;
if (cell.isFlagged) {
cellDiv.innerHTML = '🚩';
} else {
cellDiv.innerHTML = '';
}
}
function checkForWin() {
let unrevealedSafe = 0;
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
if (!board[r][c].isWatermelon && !board[r][c].isRevealed) {
unrevealedSafe++;
}
}
}
if (unrevealedSafe === 0) {
gameOver = true;
document.getElementById('message').textContent = 'You win! 🎉';
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
const cellDiv = document.querySelector(`[data-row='${r}'][data-col='${c}']`);
if (board[r][c].isWatermelon) {
cellDiv.innerHTML = '🚩';
cellDiv.classList.add('revealed');
}
}
}
}
}
// Initial setup
document.addEventListener('contextmenu', event => event.preventDefault());
initializeGame('beginner');
</script>
</body>
</html>
```Drag to resize
# Watermelon Sweeper Game
Here's a simple implementation of the classic Minesweeper game, with a twist: mines are replaced with watermelons.
```html
<!DOCTYPE html>
<html>
<head>
<title>Watermelon Sweeper</title>
<style>
.grid {
display: grid;
grid-gap: 5px;
}
.cell {
width: 30px;
height: 30px;
background-color: #ccc;
border: none;
font-size: 18px;
cursor: pointer;
}
.cell.revealed {
background-color: #fff;
}
.cell.flagged {
background-color: #ff0;
}
.cell.watermelon {
background-color: #f00;
color: #fff;
}
</style>
</head>
<body>
<h1>Watermelon Sweeper</h1>
<div id="grid" class="grid"></div>
<script>
// Configuration
const gridSize = 10;
const watermelonCount = 10;
// Initialize grid
let grid = [];
let revealed = [];
let flagged = [];
for (let i = 0; i < gridSize; i++) {
grid[i] = [];
revealed[i] = [];
flagged[i] = [];
for (let j = 0; j < gridSize; j++) {
grid[i][j] = 0;
revealed[i][j] = false;
flagged[i][j] = false;
}
}
// Randomly place watermelons
for (let i = 0; i < watermelonCount; i++) {
let x, y;
do {
x = Math.floor(Math.random() * gridSize);
y = Math.floor(Math.random() * gridSize);
} while (grid[x][y] === -1);
grid[x][y] = -1;
}
// Calculate adjacent watermelon count
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
if (grid[i][j] === -1) continue;
let count = 0;
for (let dx = -1; dx <= 1; dx++) {
for (let dy = -1; dy <= 1; dy++) {
let x = i + dx;
let y = j + dy;
if (x < 0 || y < 0 || x >= gridSize || y >= gridSize) continue;
if (grid[x][y] === -1) count++;
}
}
grid[i][j] = count;
}
}
// Render grid
const gridElement = document.getElementById('grid');
gridElement.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
const cell = document.createElement('button');
cell.classList.add('cell');
cell.dataset.x = i;
cell.dataset.y = j;
cell.addEventListener('click', () => {
revealCell(i, j);
});
cell.addEventListener('contextmenu', (e) => {
e.preventDefault();
flagCell(i, j);
});
gridElement.appendChild(cell);
}
}
// Reveal a cell
function revealCell(x, y) {
if (revealed[x][y] || flagged[x][y]) return;
const cell = gridElement.children[x * gridSize + y];
revealed[x][y] = true;
if (grid[x][y] === -1) {
cell.classList.add('watermelon');
cell.textContent = '';
alert('Game Over! You hit a watermelon!');
// Reset game state
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
revealed[i][j] = false;
flagged[i][j] = false;
gridElement.children[i * gridSize + j].classList.remove('revealed', 'flagged', 'watermelon');
gridElement.children[i * gridSize + j].textContent = '';
}
}
} else {
cell.classList.add('revealed');
cell.textContent = grid[x][y] || '';
if (grid[x][y] === 0) {
for (let dx = -1; dx <= 1; dx++) {
for (let dy = -1; dy <= 1; dy++) {
let nx = x + dx;
let ny = y + dy;
if (nx < 0 || ny < 0 || nx >= gridSize || ny >= gridSize) continue;
revealCell(nx, ny);
}
}
}
}
}
// Flag a cell
function flagCell(x, y) {
const cell = gridElement.children[x * gridSize + y];
flagged[x][y] = !flagged[x][y];
cell.classList.toggle('flagged', flagged[x][y]);
}
</script>
</body>
</html>
```
You can run this code directly in a web browser. It will create a 10x10 grid of buttons representing cells. Clicking on a cell reveals its contents. If a cell contains a watermelon, the game is over. Right-clicking on a cell flags it. The game resets after a game over.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watermelon Sweeper</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
#game-board {
display: inline-block;
margin: 20px auto;
border-collapse: collapse;
}
.cell {
width: 30px;
height: 30px;
border: 1px solid #ccc;
background-color: #eee;
text-align: center;
vertical-align: middle;
font-size: 18px;
cursor: pointer;
}
.revealed {
background-color: #ddd;
}
.flagged::after {
content: '🚩';
}
.watermelon {
background-color: red;
color: white;
}
.number-1 { color: blue; }
.number-2 { color: green; }
.number-3 { color: red; }
.number-4 { color: navy; }
.number-5 { color: brown; }
.number-6 { color: teal; }
.number-7 { color: black; }
.number-8 { color: gray; }
#status {
font-size: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Watermelon Sweeper</h1>
<div id="status">Click to start!</div>
<table id="game-board"></table>
<script>
const gridSize = 10; // 10x10 grid
const watermelonCount = 10; // Number of watermelons
let grid = [];
let revealed = [];
let flags = [];
let gameOver = false;
function initializeGame() {
grid = Array(gridSize).fill().map(() => Array(gridSize).fill(0));
revealed = Array(gridSize).fill().map(() => Array(gridSize).fill(false));
flags = Array(gridSize).fill().map(() => Array(gridSize).fill(false));
// Place watermelons randomly
let placed = 0;
while (placed < watermelonCount) {
let x = Math.floor(Math.random() * gridSize);
let y = Math.floor(Math.random() * gridSize);
if (grid[x][y] === 0) {
grid[x][y] = '🍉'; // Watermelon
placed++;
}
}
// Calculate numbers
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
if (grid[i][j] === '🍉') continue;
let count = 0;
for (let di = -1; di <= 1; di++) {
for (let dj = -1; dj <= 1; dj++) {
let ni = i + di;
let nj = j + dj;
if (ni >= 0 && ni < gridSize && nj >= 0 && nj < gridSize && grid[ni][nj] === '🍉') {
count++;
}
}
}
grid[i][j] = count;
}
}
renderBoard();
}
function renderBoard() {
const table = document.getElementById('game-board');
table.innerHTML = '';
for (let i = 0; i < gridSize; i++) {
let row = table.insertRow();
for (let j = 0; j < gridSize; j++) {
let cell = row.insertCell();
cell.className = 'cell';
if (revealed[i][j]) {
cell.classList.add('revealed');
if (grid[i][j] === '🍉') {
cell.classList.add('watermelon');
cell.textContent = '🍉';
} else if (grid[i][j] > 0) {
cell.textContent = grid[i][j];
cell.classList.add(`number-${grid[i][j]}`);
}
} else if (flags[i][j]) {
cell.classList.add('flagged');
}
cell.dataset.x = i;
cell.dataset.y = j;
cell.addEventListener('click', handleLeftClick);
cell.addEventListener('contextmenu', handleRightClick);
}
}
}
function handleLeftClick(event) {
if (gameOver) return;
let x = parseInt(event.target.dataset.x);
let y = parseInt(event.target.dataset.y);
if (flags[x][y]) return; // Flagged cells can't be clicked
revealed[x][y] = true;
if (grid[x][y] === '🍉') {
document.getElementById('status').textContent = 'Game Over! You hit a watermelon!';
gameOver = true;
revealAll();
} else if (grid[x][y] === 0) {
floodFill(x, y);
}
renderBoard();
checkWin();
}
function handleRightClick(event) {
event.preventDefault();
if (gameOver) return;
let x = parseInt(event.target.dataset.x);
let y = parseInt(event.target.dataset.y);
flags[x][y] = !flags[x][y];
renderBoard();
}
function floodFill(x, y) {
if (x < 0 || x >= gridSize || y < 0 || y >= gridSize || revealed[x][y] || grid[x][y] !== 0) return;
revealed[x][y] = true;
for (let di = -1; di <= 1; di++) {
for (let dj = -1; dj <= 1; dj++) {
if (di !== 0 || dj !== 0) {
floodFill(x + di, y + dj);
}
}
}
}
function revealAll() {
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
revealed[i][j] = true;
}
}
renderBoard();
}
function checkWin() {
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
if (grid[i][j] !== '🍉' && !revealed[i][j]) return; // Not all safe cells revealed
}
}
document.getElementById('status').textContent = 'You Win!';
gameOver = true;
}
initializeGame();
</script>
</body>
</html>
```Drag to resize