Create a game to practice the multiplication table. there should be a score showing how many correct and incorrect answers the user has. Use big letters and buttons and strong colors. Start by showing a calculation and let the user submit the replay. Show the result, update the score, and let the user keep playing.
Mar 3

Viewed a file, created a file, read a file
Viewed a file, created a file, read a file
Here's your Times Table Blaster game! 🚀
Here's what's packed in:
Giant question display with color-coded numbers and operator
Score tracker — green for correct, pink for wrong, always visible
On-screen numpad so it works great on touch screens too (plus keyboard input)
Instant feedback — celebratory message or shows the correct answer in red
🔥 Streak counter that appears after 3+ correct answers in a row
Confetti explosion on every correct answer
Enter key support to check or move to the next question
Random questions are drawn from the full 1–10 multiplication table. Have fun! 🎉
Multiplication game
Code · HTML 
Create a game to practice the multiplication table. There should be a score showing how many correct and incorrect answers the user has. Use big letters and buttons and strong colors. Start by showing a calculation and let the user submit the replay. Show the result, update the score, and let the user keep playing. Make the game 6 x 6 inches.
Mar 3

Created 2 files, viewed a file, ran a command
Created 2 files, viewed a file, ran a command
Here's your Math Blast game — fixed at exactly 6×6 inches (576×576px)! 🎮
The design goes for a retro arcade cabinet feel with a dark background, gold/orange neon glow, and CRT scanlines. Here's what's inside:
Exact 6×6" canvas with a double-bordered arcade frame
Giant equation with color-coded numbers (gold) and answer slot (cyan)
Score pills always visible in the header — green for correct, pink for wrong
On-screen numpad for mouse/touch input, plus full keyboard support (digits + Backspace + Enter)
Instant feedback — the blank turns green with confetti, or red with a screen shake
CHECK button reveals the result; NEXT loads a fresh question
Multiplication game
Code · HTML 
Create a game to practice the multiplication table. There should be a score showing how many correct and incorrect answers the user has. Use big letters and buttons and strong colors. Start by showing a calculation and let the user submit the replay. Show the result, update the score, and let the user keep playing. Make the game 6 x 6 inches.  show alll the responses blow the game screen.
Mar 3

Created 2 files, viewed a file, ran a command
Created 2 files, viewed a file, ran a command
Here's your updated Math Blast game! The 6×6" arcade board is the same, and now every answered question is logged below it in a scrolling history list.
Each history row shows:
Round number (#1, #2, …)
✅ or ❌ icon
The full equation with the correct answer highlighted in green or red
If you were wrong, it also shows what you answered in grey — "you answered 24"
Newest answers always appear at the top. Keyboard support still works: digits to type, Backspace to delete, Enter to check or advance.
Multiplication game
Code · HTML 
Create a game to practice the multiplication table. There should be a score showing how many correct and incorrect answers the user has. Use big letters and buttons and strong colors. Start by showing a calculation and let the user submit the replay. Show the result, update the score, and let the user keep playing. Make the game 6 x 6 inches.
Mar 3
Created 2 files, viewed a file, ran a command
Created 2 files, viewed a file, ran a command
Here's your Math Blast game — fixed at exactly 6×6 inches (576×576px)! 🎮
The design goes for a retro arcade cabinet feel with a dark background, gold/orange neon glow, and CRT scanlines. Here's what's inside:
* Exact 6×6" canvas with a double-bordered arcade frame
* Giant equation with color-coded numbers (gold) and answer slot (cyan)
* Score pills always visible in the header — green for correct, pink for wrong
* On-screen numpad for mouse/touch input, plus full keyboard support (digits + Backspace + Enter)
* Instant feedback — the blank turns green with confetti, or red with a screen shake
* CHECK button reveals the result; NEXT loads a fresh question
Multiplication game
Code · HTML 
Create a game to practice the multiplication table. There should be a score showing how many correct and incorrect answers the user has. Use big letters and buttons and strong colors. Start by showing a calculation and let the user submit the replay. Show the result, update the score, and let the user keep playing. Make the game 6 x 6 inches.  show alll the responses blow the game screen.
Mar 3
Created 2 files, viewed a file, ran a command
Created 2 files, viewed a file, ran a command
Here's your updated Math Blast game! The 6×6" arcade board is the same, and now every answered question is logged below it in a scrolling history list.
Each history row shows:
* Round number (#1, #2, …)
* ✅ or ❌ icon
* The full equation with the correct answer highlighted in green or red
* If you were wrong, it also shows what you answered in grey — "you answered 24"
Newest answers always appear at the top. Keyboard support still works: digits to type, Backspace to delete, Enter to check or advance.
Multiplication game
Code · HTML
Show less
12:41 AM
It looks like you've pasted the conversation history rather than a new request! 😊 Did you want to make a change or addition to the multiplication game? For example:
Add a timer per question
Add difficulty levels (easy/medium/hard)
Add sound effects
Change the visual style
Something else?
Let me know what you'd like and I'll update it for you!




Claude is AI and can make mistakes. Please double-check responses.
Multiplication game · HTML
Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math Blast</title>
<link href="https://fonts.googleapis.com/css2?family=Boogaloo&family=Baloo+2:wght@700;900&display=swap" rel="stylesheet">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: #0a0a14;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px 56px;
    font-family: 'Baloo 2', cursive;
    min-height: 100vh;
  }

  /* ── GAME BOARD ── */
  .game {
    width: 576px;
    height: 576px;
    flex-shrink: 0;
    background: #0D0D1A;
    border: 5px solid #FFD600;
    border-radius: 24px;
    box-shadow:
      0 0 0 3px #FF4800,
      0 0 48px rgba(255,214,0,0.3),
      inset 0 0 70px rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }

  /* CRT scanlines */
  .game::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 3px,
      rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
    );
    pointer-events: none;
    border-radius: 20px;
    z-index: 10;
  }

  /* ── HEADER ── */
  .header {
    background: #FFD600;
    height: 58px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    clip-path: polygon(0 0,100% 0,100% 70%,97% 100%,3% 100%,0 70%);
  }

  .title {
    font-family: 'Boogaloo', cursive;
    font-size: 2.1rem;
    color: #0D0D1A;
    letter-spacing: 2px;
  }

  .scores { display: flex; gap: 10px; }

  .pill {
    display: flex; align-items: center; gap: 5px;
    background: #0D0D1A;
    border-radius: 30px;
    padding: 3px 14px 3px 10px;
  }
  .pill-val {
    font-family: 'Boogaloo', cursive;
    font-size: 1.55rem;
    line-height: 1;
  }
  .pill.ok  .pill-val { color: #00E676; }
  .pill.bad .pill-val { color: #FF4081; }

  /* ── QUESTION ZONE ── */
  .qzone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .equation {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .en {
    font-family: 'Boogaloo', cursive;
    font-size: 6rem;
    line-height: 1;
    color: #FFD600;
    text-shadow: 3px 3px 0 #8a7000, 0 0 28px rgba(255,214,0,.45);
    animation: pop .35s cubic-bezier(.34,1.56,.64,1);
  }
  .eo {
    font-family: 'Boogaloo', cursive;
    font-size: 4.4rem;
    color: #FF4800;
    text-shadow: 2px 2px 0 #7a2000;
  }
  .eeq {
    font-family: 'Boogaloo', cursive;
    font-size: 4.4rem;
    color: rgba(255,255,255,.28);
  }
  .eb {
    font-family: 'Boogaloo', cursive;
    font-size: 6rem;
    color: #00CFFF;
    text-shadow: 3px 3px 0 #006080, 0 0 28px rgba(0,207,255,.4);
    border-bottom: 5px solid #00CFFF;
    min-width: 94px;
    text-align: center;
    line-height: 1.05;
    transition: color .25s, text-shadow .25s, border-color .25s;
  }

  @keyframes pop {
    0%   { transform: scale(.5); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
  }

  .feedback {
    font-family: 'Boogaloo', cursive;
    font-size: 1.7rem;
    height: 2.1rem;
    letter-spacing: 1px;
  }
  .feedback.ok    { color: #00E676; }
  .feedback.bad   { color: #FF4081; }
  .feedback.blank { opacity: 0; }

  /* ── NUMPAD ── */
  .pad-area {
    padding: 4px 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .numpad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    width: 100%;
  }

  .nk {
    font-family: 'Boogaloo', cursive;
    font-size: 1.8rem;
    padding: 11px 0;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: #1A1A2E;
    color: #FFD600;
    border: 2.5px solid #2c2c50;
    box-shadow: 0 4px 0 #080812;
    transition: transform .08s, background .1s, border-color .1s;
  }
  .nk:hover  { background: #26264a; border-color: #FFD600; }
  .nk:active { transform: translateY(3px); box-shadow: none; }
  .nk.del    { color: #FF4081; border-color: #3a0e20; background: #1a0e1a; }
  .nk.del:hover { border-color: #FF4081; }

  .action-row { display: flex; gap: 10px; width: 100%; }

  .btn {
    font-family: 'Boogaloo', cursive;
    font-size: 1.6rem;
    border: none;
    border-radius: 14px;
    padding: 11px 0;
    cursor: pointer;
    flex: 1;
    letter-spacing: 1px;
    transition: transform .08s, filter .1s;
  }
  .btn:active { transform: translateY(3px); box-shadow: none !important; }
  .btn:hover  { filter: brightness(1.12); }
  .btn-check  { background: #FFD600; color: #0D0D1A; box-shadow: 0 5px 0 #8a7000; }
  .btn-next   { background: #FF4800; color: #fff;    box-shadow: 0 5px 0 #8a2400; }
  .hidden     { display: none !important; }

  /* Confetti */
  .cf {
    position: absolute;
    border-radius: 2px;
    pointer-events: none;
    z-index: 20;
    animation: cffall .9s ease forwards;
  }
  @keyframes cffall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(260px) rotate(540deg); opacity: 0; }
  }

  @keyframes shake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-9px); }
    75%     { transform: translateX(9px); }
  }
  .shake { animation: shake .36s ease; }

  /* ── HISTORY LOG ── */
  .history-wrap {
    width: 576px;
    margin-top: 32px;
  }

  .history-heading {
    font-family: 'Boogaloo', cursive;
    font-size: 1.35rem;
    color: #FFD600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 5px solid #FF4800;
  }

  .history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .hist-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #131326;
    border: 2px solid #2a2a48;
    border-radius: 14px;
    padding: 11px 18px;
    animation: rowSlide .35s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes rowSlide {
    0%   { transform: translateX(-18px); opacity: 0; }
    100% { transform: translateX(0);     opacity: 1; }
  }
  .hist-row.ok-row  { border-color: rgba(0,230,118,.5);  background: rgba(0,230,118,.05);  }
  .hist-row.bad-row { border-color: rgba(255,64,129,.5); background: rgba(255,64,129,.05); }

  .hist-n {
    font-family: 'Boogaloo', cursive;
    font-size: 1rem;
    color: rgba(255,255,255,.25);
    min-width: 26px;
    text-align: right;
    flex-shrink: 0;
  }

  .hist-icon { font-size: 1.45rem; flex-shrink: 0; }

  .hist-eq {
    font-family: 'Boogaloo', cursive;
    font-size: 1.6rem;
    color: #fff;
    flex: 1;
  }
  .h-ans      { font-family: 'Boogaloo', cursive; font-size: 1.6rem; }
  .h-ans.ok   { color: #00E676; }
  .h-ans.bad  { color: #FF4081; }

  .hist-note {
    font-family: 'Boogaloo', cursive;
    font-size: 1.05rem;
    color: rgba(255,255,255,.35);
  }
</style>
</head>
<body>

<!-- ── GAME ── -->
<div class="game" id="game">
  <div class="header">
    <span class="title">⚡ MATH BLAST</span>
    <div class="scores">
      <div class="pill ok" >✅ <span class="pill-val" id="sOk">0</span></div>
      <div class="pill bad">❌ <span class="pill-val" id="sBad">0</span></div>
    </div>
  </div>

  <div class="qzone">
    <div class="equation">
      <span class="en" id="eA"></span>
      <span class="eo">×</span>
      <span class="en" id="eB"></span>
      <span class="eeq">=</span>
      <span class="eb" id="eBlank">?</span>
    </div>
    <div class="feedback blank" id="fb"> </div>
  </div>

  <div class="pad-area">
    <div class="numpad">
      <button class="nk" onclick="pad('1')">1</button>
      <button class="nk" onclick="pad('2')">2</button>
      <button class="nk" onclick="pad('3')">3</button>
      <button class="nk" onclick="pad('4')">4</button>
      <button class="nk" onclick="pad('5')">5</button>
      <button class="nk" onclick="pad('6')">6</button>
      <button class="nk" onclick="pad('7')">7</button>
      <button class="nk" onclick="pad('8')">8</button>
      <button class="nk" onclick="pad('9')">9</button>
      <button class="nk" onclick="pad('0')">0</button>
      <button class="nk del" onclick="padDel()">⌫</button>
    </div>
    <div class="action-row">
      <button class="btn btn-check" id="btnCheck" onclick="check()">CHECK ✔</button>
      <button class="btn btn-next hidden" id="btnNext" onclick="next()">NEXT →</button>
    </div>
  </div>
</div>

<!-- ── HISTORY ── -->
<div class="history-wrap" id="histWrap" style="display:none">
  <div class="history-heading">📋 Answer History</div>
  <div class="history-list" id="histList"></div>
</div>

<script>
  const COLORS = ['#FFD600','#FF4800','#FF4081','#00CFFF','#00E676','#D500F9','#fff'];
  let a, b, ans, nCorrect = 0, nWrong = 0, cur = '', round = 0;

  function newQ() {
    a = Math.ceil(Math.random() * 10);
    b = Math.ceil(Math.random() * 10);
    ans = a * b;
    cur = '';
    document.getElementById('eA').textContent = a;
    document.getElementById('eB').textContent = b;
    const bl = document.getElementById('eBlank');
    bl.textContent = '?';
    bl.style.color = bl.style.textShadow = bl.style.borderColor = '';
    setFb('', 'blank');
    document.getElementById('btnCheck').classList.remove('hidden');
    document.getElementById('btnNext').classList.add('hidden');
  }

  function pad(d) {
    if (!document.getElementById('btnNext').classList.contains('hidden')) return;
    if (cur.length >= 3) return;
    cur += d;
    document.getElementById('eBlank').textContent = cur || '?';
  }

  function padDel() {
    if (!document.getElementById('btnNext').classList.contains('hidden')) return;
    cur = cur.slice(0, -1);
    document.getElementById('eBlank').textContent = cur || '?';
  }

  function setFb(msg, cls) {
    const el = document.getElementById('fb');
    el.textContent = msg || ' ';
    el.className = 'feedback ' + cls;
  }

  function check() {
    if (!cur) return;
    round++;
    const val = parseInt(cur);
    document.getElementById('btnCheck').classList.add('hidden');
    document.getElementById('btnNext').classList.remove('hidden');
    const bl = document.getElementById('eBlank');
    bl.textContent = ans;
    const isOk = val === ans;

    if (isOk) {
      nCorrect++;
      document.getElementById('sOk').textContent = nCorrect;
      bl.style.color = '#00E676';
      bl.style.textShadow = '2px 2px 0 #007040, 0 0 22px rgba(0,230,118,.55)';
      bl.style.borderColor = '#00E676';
      const msgs = ['🎉 CORRECT!','⚡ NAILED IT!','🌟 PERFECT!','🔥 AWESOME!','💥 BOOM!','✨ GENIUS!'];
      setFb(msgs[Math.floor(Math.random()*msgs.length)], 'ok');
      spawnConfetti();
    } else {
      nWrong++;
      document.getElementById('sBad').textContent = nWrong;
      bl.style.color = '#FF4081';
      bl.style.textShadow = '2px 2px 0 #8a0030, 0 0 22px rgba(255,64,129,.45)';
      bl.style.borderColor = '#FF4081';
      setFb('❌  Answer is ' + ans, 'bad');
      document.getElementById('game').classList.add('shake');
      setTimeout(() => document.getElementById('game').classList.remove('shake'), 380);
    }

    addHistory(round, a, b, ans, val, isOk);
  }

  function next() { newQ(); }

  function addHistory(n, fa, fb2, correctAns, guessed, isOk) {
    document.getElementById('histWrap').style.display = '';
    const list = document.getElementById('histList');
    const row  = document.createElement('div');
    row.className = 'hist-row ' + (isOk ? 'ok-row' : 'bad-row');

    const guessNote = isOk
      ? ''
      : `<span class="hist-note"> — you answered ${guessed}</span>`;

    row.innerHTML =
      `<span class="hist-n">#${n}</span>` +
      `<span class="hist-icon">${isOk ? '✅' : '❌'}</span>` +
      `<span class="hist-eq">${fa} &times; ${fb2} = ` +
        `<span class="h-ans ${isOk?'ok':'bad'}">${correctAns}</span>` +
        guessNote +
      `</span>`;

    list.insertBefore(row, list.firstChild);
  }

  function spawnConfetti() {
    const g = document.getElementById('game');
    for (let i = 0; i < 28; i++) {
      setTimeout(() => {
        const c = document.createElement('div');
        c.className = 'cf';
        const sz = 7 + Math.random() * 9;
        c.style.cssText =
          `left:${15+Math.random()*70}%;top:36%;` +
          `width:${sz}px;height:${sz}px;` +
          `background:${COLORS[Math.floor(Math.random()*COLORS.length)]};` +
          `border-radius:${Math.random()>.5?'50%':'2px'};` +
          `animation-duration:${.65+Math.random()*.55}s;`;
        g.appendChild(c);
        setTimeout(() => c.remove(), 1400);
      }, i * 22);
    }
  }

  document.addEventListener('keydown', e => {
    if (e.key >= '0' && e.key <= '9') pad(e.key);
    else if (e.key === 'Backspace') padDel();
    else if (e.key === 'Enter') {
      if (!document.getElementById('btnCheck').classList.contains('hidden')) check();
      else if (!document.getElementById('btnNext').classList.contains('hidden')) next();
    }
  });

  newQ();
</script>
</body>
</html>