Template here > https://teacherkhen.github.io/stationery-updated/

🎮 Monster Bingo Game Guide

Step-by-step instructions and button functions

🔧 A. Game Setup (Before Playing)

Step 1: Open the Game

When you open the HTML file, the SETUP SCREEN appears.

Step 2: Set Points to Win

At the top: “POINTS TO WIN”
Enter a number (example: 5)
This is the score needed to win the game

Step 3: Add Cards (Images + Text)

You will see 12 boxes.

📌 Paste an image (CTRL + V)
📝 Type a word or question

You can:

Use image only
Use text only
Use both

Step 4: Setup Buttons (Important Functions)

🗑️ CLEAR ALL

Deletes ALL saved data
Resets cards and score

💾 SAVE FILE

Downloads your game setup as a .json file
You can reuse it later

📂 LOAD FILE

Upload your saved .json file
Restores previous game setup

🎮 PLAY NOW

Starts the game
Opens instructions first

📖 B. Instruction Screen

What you see:

Flip cards
Answer correctly to gain points
Avoid the monster 👾

Button: LET’S GO!

Starts the actual game

🧩 C. Gameplay Proper

Teams:

TEAM A (left)
TEAM B (right)

Each team has:

A grid of cards
A score display

Step-by-Step Gameplay

Select a card
Card flips

If NORMAL CARD:

Shows image/text
Player answers
If correct → +1 point

👾 If MONSTER:

Monster appears
Score resets to 0
Board reshuffles

🧠 Scoring System

Each correct answer = +1 point
First team to reach target score wins

🏆 D. Win Screen

When a team wins:

🎮 REMATCH

Resets scores
Keeps same cards

⚙️ SETTINGS

Returns to setup screen

🎵 E. Top Controls

🔙 EXIT GAME

Returns to setup screen
Saves data before exiting

🎵 MUSIC BUTTON

Toggle music ON/OFF

🔊 VOLUME SLIDER

Adjust background music volume

This is how the setting looks like. Do not forget to save your files after. You can load the file later if you will use it to another computer. Just open the link and load file.

⚙️ Part 2: Comprehensive AI Prompt

Use this prompt in Gemini or any AI to generate the full Monster Bingo game

🤖 AI Prompt for Monster Bingo Game

Create an interactive HTML game called "Monster Bingo - Pixel UNO Edition" based on the following requirements:

🎯 Game Overview

A classroom team-based game (Team A vs Team B)
Players flip cards to earn points
One hidden "Monster" resets the score to zero
First team to reach the target score wins

🔧 Core Features

Setup Screen

Input for "Points to Win"
12 customizable card slots
Each slot allows:

Pasting images
Entering text

Buttons:
- Clear All
- Save File (.json)
- Load File (.json)
- Play Now

Instruction Overlay

Displays how to play
Button to start game

Game Board

Two teams (A and B)
Each has:
- Score tracker
- Dynamic card grid
Cards include:
- Flip animation
- Image/text on back
- One hidden monster card

Game Logic

Correct answer = +1 point
Monster = reset score to 0
Win condition based on target score
Board reshuffles after monster

Win Screen

Displays winning team
Buttons:
- Rematch
- Settings

Audio

Background music (toggle + volume)
Sound effects:
- Correct answer
- Monster
- Win

Data Persistence

Save setup using localStorage
Auto-save on changes
Load saved data on refresh

🎨 Design Requirements

Pixel-style font (Press Start 2P)
UNO-inspired colors
Neon and arcade aesthetic
Responsive grid layout

📦 Full HTML Code Section

Paste your full game HTML code below exactly as written:

<div style="font-family: Arial, sans-serif; max-width: 900px; margin: auto; line-height: 1.6;">

  <h2 style="text-align:center; color:#2c3e50;">⚙️ Part 2: Comprehensive AI Prompt</h2>
  <p style="text-align:center;">Use this prompt in Gemini or any AI to generate the full Monster Bingo game</p>

  <hr>

  <h2 style="color:#27ae60;">🤖 AI Prompt for Monster Bingo Game</h2>

  <p><b>Create an interactive HTML game called "Monster Bingo - Pixel UNO Edition" based on the following requirements:</b></p>

  <hr>

  <h3 style="color:#2980b9;">🎯 Game Overview</h3>
  <ul>
    <li>A classroom team-based game (Team A vs Team B)</li>
    <li>Players flip cards to earn points</li>
    <li>One hidden "Monster" resets the score to zero</li>
    <li>First team to reach the target score wins</li>
  </ul>

  <hr>

  <h3 style="color:#e67e22;">🔧 Core Features</h3>

  <p><b>Setup Screen</b></p>
  <ul>
    <li>Input for "Points to Win"</li>
    <li>12 customizable card slots</li>
    <li>Each slot allows:</li>
    <ul>
      <li>Pasting images</li>
      <li>Entering text</li>
    </ul>
    <li>Buttons:
      <ul>
        <li>Clear All</li>
        <li>Save File (.json)</li>
        <li>Load File (.json)</li>
        <li>Play Now</li>
      </ul>
    </li>
  </ul>

  <p><b>Instruction Overlay</b></p>
  <ul>
    <li>Displays how to play</li>
    <li>Button to start game</li>
  </ul>

  <p><b>Game Board</b></p>
  <ul>
    <li>Two teams (A and B)</li>
    <li>Each has:
      <ul>
        <li>Score tracker</li>
        <li>Dynamic card grid</li>
      </ul>
    </li>
    <li>Cards include:
      <ul>
        <li>Flip animation</li>
        <li>Image/text on back</li>
        <li>One hidden monster card</li>
      </ul>
    </li>
  </ul>

  <p><b>Game Logic</b></p>
  <ul>
    <li>Correct answer = +1 point</li>
    <li>Monster = reset score to 0</li>
    <li>Win condition based on target score</li>
    <li>Board reshuffles after monster</li>
  </ul>

  <p><b>Win Screen</b></p>
  <ul>
    <li>Displays winning team</li>
    <li>Buttons:
      <ul>
        <li>Rematch</li>
        <li>Settings</li>
      </ul>
    </li>
  </ul>

  <p><b>Audio</b></p>
  <ul>
    <li>Background music (toggle + volume)</li>
    <li>Sound effects:
      <ul>
        <li>Correct answer</li>
        <li>Monster</li>
        <li>Win</li>
      </ul>
    </li>
  </ul>

  <p><b>Data Persistence</b></p>
  <ul>
    <li>Save setup using localStorage</li>
    <li>Auto-save on changes</li>
    <li>Load saved data on refresh</li>
  </ul>

  <hr>

  <h3 style="color:#8e44ad;">🎨 Design Requirements</h3>
  <ul>
    <li>Pixel-style font (Press Start 2P)</li>
    <li>UNO-inspired colors</li>
    <li>Neon and arcade aesthetic</li>
    <li>Responsive grid layout</li>
  </ul>

  <hr>

  <h3 style="color:#c0392b;">📦 Full HTML Code Section</h3>

  <p><b>Paste your full game HTML code below exactly as written:</b></p>

  <pre style="background:#111; color:#00ffcc; padding:15px; border-radius:10px; overflow:auto; font-size:12px;">
[PASTE YOUR FULL HTML CODE HERE — EXACTLY THE SAME]
  </pre>

  <hr>

  <h3 style="color:#16a085;">🛠️ Additional Notes</h3>
  <ul>
    <li>Do NOT change existing functionality</li>
    <li>Maintain flipping card animation</li>
    <li>Ensure grid adjusts based on number of cards</li>
    <li>Preserve save/load system</li>
    <li>Keep monster mechanic intact</li>
  </ul>

  <hr>

  <h3 style="color:#2c3e50;">🎯 Output Expectation</h3>
  <ul>
    <li>Complete working HTML file</li>
    <li>Ready to open in browser</li>
    <li>No external dependencies except Google Fonts</li>
  </ul>

</div>