Cách tạo game giải trí Vòng quay may mắn bằng Claude AI

3 Đánh giá

Bạn đã bao giờ nghĩ đến việc tự tay tạo ra một mini game Vòng quay may mắn cực chill để vừa giải trí, vừa tương tác với bạn bè chưa? Nghe có vẻ phi lý nhưng sự thật là với Claude AI, mọi thứ lại đơn giản hơn bạn tưởng rất nhiều.

Hướng dẫn tạo game giải trí Vòng quay may mắn bằng Claude AI

Bước 1: Trước tiên, bạn hãy mở ứng dụng Claude AI lên rồi viết prompt như sau để nó tạo game vòng quay may mắn

hãy tạo giúp tôi một game vòng quay may mắn kết hợp với mở túi mù, khi người chơi quay được vào một ô túi mù nào đó, họ sẽ phải trả lời một câu hỏi đố mẹo thú vị

Bước 2: Sau đó, Claude AI sẽ tạo một bản thử nghiệm để bạn chơi thử

Chơi thử game do Claude AI tạo

Bước 3: Bạn cũng sẽ được tìm hiểu về hướng dẫn chơi cơ bản của game vòng quay may mắn

Click Quay ngay để quay vòng quay với 8 túi mù màu sắc khác nhau
Khi vòng quay dừng, bạn sẽ nhận được một câu hỏi đố mẹo vui
Chọn đáp án đúng để nhận điểm tương ứng với từng túi mù (10–50 điểm)
Trả lời sai thì mất phần thưởng của túi đó

Bước 4: Bạn có thể "ra lệnh" cho Claude AI nâng cấp game vòng quay may mắn hoặc sửa các lỗi trong game

Nâng cấp hoặc sửa lỗi game

Bước 5: Khi đã ưng ý với game Vòng quay may mắn do Claude AI tạo ra, bạn hãy bảo nó tạo file html để tải về chơi trên máy tính với Prompt sau

hãy tạo giúp tôi file html để tôi tải về

Bước 6: Claude AI sẽ tạo đoạn mã để bạn tải về

Tải game về máy tính

Bước 7: Bạn hãy click chuột phải vào file vừa tải về ở trên rồi chọn Open With/Google Chrome để chơi game

Chơi game trên máy tính

Đoạn code game Vòng quay may mắn

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎡 Vòng Quay May Mắn</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#f5f3ee;font-family:sans-serif;padding:.8rem;overflow:hidden}
#gc{max-width:900px;margin:0 auto}

/* Topbar & stats */
#topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
#game-title{font-size:17px;font-weight:700;color:#1a1a1a}
#level-badge{font-size:11px;font-weight:700;padding:3px 11px;border-radius:20px;background:#CECBF6;color:#26215C}
#stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:.5rem}
.stat{background:#edeae4;border-radius:8px;padding:5px;text-align:center}
.stat-lbl{font-size:10px;color:#666;margin-bottom:1px}
.stat-val{font-size:16px;font-weight:700;color:#1a1a1a}
#streak-bar{text-align:center;min-height:18px;margin-bottom:.4rem}
.streak-pill{display:inline-block;background:#C8920A;color:#fff;font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px}

/* Main 2-col layout */
#main{display:flex;gap:12px;align-items:flex-start}

/* Left: wheel column */
#left-col{flex:0 0 auto;display:flex;flex-direction:column;align-items:center}
#wheel-area{position:relative;text-align:center}
#wheel-wrap{position:relative;width:min(240px,42vw)}
#wc{width:100%;height:auto;display:block}
#ptr{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:18px solid #8B1A1A;z-index:5}
#spin-btn{margin:.4rem auto 0;display:block;font-size:13px;font-weight:700;padding:8px 24px;border-radius:10px;border:2px solid #444;background:#fff;color:#1a1a1a;cursor:pointer;white-space:nowrap}
#spin-btn:hover:not(:disabled){background:#f0ede8}
#spin-btn:disabled{opacity:.4;cursor:not-allowed}
#spin-hint{font-size:10px;color:#888;text-align:center;margin-top:3px;line-height:1.4}
#lvl-toast{display:none;position:absolute;top:-34px;left:50%;transform:translateX(-50%);background:#CECBF6;color:#26215C;font-size:11px;font-weight:700;padding:3px 12px;border-radius:20px;white-space:nowrap;z-index:10}

/* Confetti anchor */
.particle{position:absolute;pointer-events:none;border-radius:50%;animation:fly 1s ease-out forwards}
@keyframes fly{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}

/* History below wheel */
#hist-wrap{margin-top:.6rem;width:min(240px,42vw)}
.hist-hdr{font-size:10px;color:#888;margin-bottom:4px}
.hist-list{display:flex;flex-direction:column;gap:3px}
.hi{display:flex;align-items:center;gap:6px;font-size:10px;color:#555;background:#f0ede8;border-radius:6px;padding:3px 8px}
.hi-pts{margin-left:auto;font-weight:700;white-space:nowrap}
.hi-pts.won{color:#1a6a1a}
.hi-pts.lost{color:#8a2020}

/* Right: question card */
#right-col{flex:1 1 0;min-width:0}
#qcard{background:#fff;border:2px solid #bbb;border-radius:14px;padding:.9rem;display:none}
#qcard.show{display:block}
.qc-head{display:flex;align-items:center;gap:8px;margin-bottom:.5rem}
.qc-icon{font-size:28px;line-height:1}
.qc-name{font-size:13px;font-weight:700;color:#1a1a1a}
.qc-pts{font-size:11px;color:#555;margin-top:2px}
.qc-cat{display:inline-block;font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;margin-bottom:5px}
.qc-q{font-size:13px;color:#1a1a1a;line-height:1.6;background:#f0ede8;border-radius:8px;padding:8px 11px;margin-bottom:.5rem;font-weight:500}
#timer-wrap{background:#ddd;border-radius:4px;height:5px;margin-bottom:.5rem;overflow:hidden}
#timer-bar{height:100%;border-radius:4px;background:#1A6EA8;width:100%}
#lifelines{display:flex;gap:5px;justify-content:center;margin-bottom:.5rem;flex-wrap:wrap}
.ll-btn{font-size:11px;padding:4px 10px;border-radius:20px;border:2px solid #999;background:#fff;color:#1a1a1a;cursor:pointer;font-weight:600}
.ll-btn:disabled{opacity:.3;cursor:not-allowed}
.ll-btn:hover:not(:disabled){background:#f0ede8}
.ans-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:.5rem}
.ans-btn{padding:8px;border-radius:8px;border:2px solid #bbb;background:#fff;color:#1a1a1a;font-size:12px;cursor:pointer;text-align:left;line-height:1.4;font-weight:600;width:100%}
.ans-btn:hover:not(:disabled){background:#f0ede8}
.ans-btn.correct{background:#c8eac8!important;border-color:#2E7D32!important;color:#1a3a1a!important}
.ans-btn.wrong{background:#f0c8c8!important;border-color:#8B1A1A!important;color:#4a1a1a!important}
.ans-btn:disabled{cursor:not-allowed;opacity:1}
#result-msg{font-size:13px;font-weight:700;min-height:16px;margin-bottom:.3rem}
#explain-box{background:#f0ede8;border-radius:8px;padding:8px 11px;font-size:11px;color:#333;line-height:1.55;margin-bottom:.5rem}
#continue-btn{width:100%;padding:9px;border-radius:8px;border:2px solid #888;background:#fff;color:#1a1a1a;font-size:13px;font-weight:700;cursor:pointer}
#continue-btn:hover{background:#f0ede8}

/* Idle right panel (when no question) */
#idle-panel{color:#bbb;text-align:center;padding:2rem 1rem;font-size:13px;line-height:1.8}
#idle-panel .big{font-size:36px;display:block;margin-bottom:.4rem}

/* Mobile: stack vertically */
@media(max-width:580px){
  body{overflow:auto}
  #main{flex-direction:column;align-items:stretch}
  #wheel-area{display:flex;flex-direction:column;align-items:center}
  #wheel-wrap{width:min(240px,70vw)}
  #hist-wrap{width:100%}
  #right-col{width:100%}
}
</style>
</head>
<body>
<div id="gc">
  <div id="topbar">
    <div id="game-title">🎡 Vòng Quay May Mắn</div>
    <div id="level-badge">Cấp 1 · Người mới</div>
  </div>
  <div id="stats">
    <div class="stat"><div class="stat-lbl">Điểm</div><div class="stat-val" id="s-score">0</div></div>
    <div class="stat"><div class="stat-lbl">Cấp độ</div><div class="stat-val" id="s-level">1</div></div>
    <div class="stat"><div class="stat-lbl">Lượt quay</div><div class="stat-val" id="s-spins">0</div></div>
    <div class="stat"><div class="stat-lbl">Streak</div><div class="stat-val" id="s-streak">0</div></div>
  </div>
  <div id="streak-bar"></div>

  <div id="main">
    <!-- LEFT: wheel + history -->
    <div id="left-col">
      <div id="wheel-area">
        <div id="lvl-toast"></div>
        <div id="wheel-wrap">
          <div id="ptr"></div>
          <canvas id="wc" width="240" height="240"></canvas>
        </div>
        <button id="spin-btn">🎰 Quay ngay!</button>
        <div id="spin-hint">1 ô JACKPOT 🌟 · 1 ô Mất Lượt 💀</div>
      </div>
      <div id="hist-wrap">
        <div class="hist-hdr">Lịch sử</div>
        <div class="hist-list" id="hist-list"></div>
      </div>
    </div>

    <!-- RIGHT: question card or idle -->
    <div id="right-col">
      <div id="idle-panel">
        <span class="big">🎡</span>
        Nhấn <b>Quay ngay!</b> để bắt đầu<br>trả lời câu hỏi và ghi điểm!
      </div>
      <div id="qcard">
        <div class="qc-head">
          <div class="qc-icon" id="qc-icon">🎁</div>
          <div>
            <div class="qc-name" id="qc-name">Túi Mù</div>
            <div class="qc-pts" id="qc-pts">+10 điểm nếu đúng</div>
          </div>
        </div>
        <span class="qc-cat" id="qc-cat">Câu hỏi</span>
        <div class="qc-q" id="qc-q">...</div>
        <div id="timer-wrap"><div id="timer-bar"></div></div>
        <div id="lifelines">
          <button class="ll-btn" id="ll-50">🎯 50/50</button>
          <button class="ll-btn" id="ll-hint">💡 Gợi ý</button>
          <button class="ll-btn" id="ll-time">⏱ +10s</button>
        </div>
        <div class="ans-grid" id="ans-grid"></div>
        <div id="result-msg"></div>
        <div id="explain-box" style="display:none"></div>
        <button id="continue-btn" style="display:none">Tiếp tục ▶</button>
      </div>
    </div>
  </div>
</div>

<script>
var SEGS=[
  {label:["Túi Mù","Đỏ"],     color:"#C0392B",tc:"#fff",name:"Túi Mù Đỏ Rực",          icon:"🔴",pts:10},
  {label:["Túi Mù","Vàng"],   color:"#C8920A",tc:"#fff",name:"Túi Mù Vàng Óng",         icon:"🟡",pts:20},
  {label:["Túi Mù","Xanh"],   color:"#1A6EA8",tc:"#fff",name:"Túi Mù Xanh Dương",       icon:"🔵",pts:15},
  {label:["Túi Mù","Tím"],    color:"#6C3BAA",tc:"#fff",name:"Túi Mù Tím Huyền Bí",     icon:"🟣",pts:25},
  {label:["Túi Mù","Hồng"],   color:"#B03070",tc:"#fff",name:"Túi Mù Hồng Dễ Thương",   icon:"🩷",pts:10},
  {label:["JACK","POT"],      color:"#C87000",tc:"#fff",name:"JACKPOT ✨",               icon:"🌟",pts:100,jackpot:true},
  {label:["Túi Mù","Xanh Lá"],color:"#2E7D32",tc:"#fff",name:"Túi Mù Xanh Lá May Mắn", icon:"💚",pts:30},
  {label:["Túi Mù","Cam"],    color:"#C04400",tc:"#fff",name:"Túi Mù Cam Nổi Bật",      icon:"🟠",pts:15},
  {label:["Túi Mù","Bạc"],    color:"#4A5260",tc:"#fff",name:"Túi Mù Bạc Cao Cấp",      icon:"⚪",pts:50},
  {label:["Mất","Lượt"],      color:"#8B1A1A",tc:"#fff",name:"Mất lượt!",               icon:"💀",pts:0,lose:true},
];
var LEVELS=[
  {name:"Người mới",min:0},{name:"Thám tử nhí",min:100},
  {name:"Phù thủy câu đố",min:300},{name:"Đại cao thủ",min:600},{name:"Huyền thoại",min:1000}
];
var QS=[
  {q:"Con gì có 4 chân buổi sáng, 2 chân buổi trưa, 3 chân buổi tối?",a:["Con nhện","Con người","Con rùa","Con cua"],c:1,cat:"Câu đố cổ điển",cc:"#CECBF6",ctc:"#26215C",hint:"Câu đố nổi tiếng từ thần thoại Hy Lạp",exp:"Con người! Sơ sinh bò 4 chân, lớn đi 2 chân, già chống gậy = 3 chân."},
  {q:"Cái gì càng lau càng bẩn?",a:["Tấm gương","Cái khăn lau","Cái chổi","Tấm giấy"],c:1,cat:"Đồ vật",cc:"#B5D4F4",ctc:"#042C53",hint:"Dùng để lau chùi mọi thứ",exp:"Cái khăn lau! Lau thì hút bụi bẩn vào khăn, khăn ngày càng bẩn."},
  {q:"Thứ gì không chân mà chạy, không miệng mà nói?",a:["Đồng hồ","Máy tính","Điện thoại","Tivi"],c:0,cat:"Đồ vật",cc:"#B5D4F4",ctc:"#042C53",hint:"Bạn xem nó mỗi ngày để biết giờ",exp:"Đồng hồ! Kim chạy suốt và báo giờ cho ta."},
  {q:"Hòn đá nào không nằm trong sông?",a:["Đá cuội","Đá vôi","Đá gan gà","Đá lạnh"],c:3,cat:"Chơi chữ",cc:"#C0DD97",ctc:"#173404",hint:"Loại đá này thường ở trong tủ lạnh",exp:"Đá lạnh! Vì đá lạnh nằm trong tủ lạnh, không nằm trong sông."},
  {q:"Cái gì có đầu mà không có cổ, có đuôi mà không có thân?",a:["Con cá","Đồng xu","Cái đinh","Cây bút"],c:2,cat:"Chơi chữ",cc:"#C0DD97",ctc:"#173404",hint:"Dùng để đóng vào gỗ",exp:"Cái đinh! Có đầu đinh, đuôi đinh — không có cổ hay thân."},
  {q:"Con gì sinh ra đã có râu?",a:["Con dê","Con mèo","Con tôm","Ngô (bắp)"],c:3,cat:"Thiên nhiên",cc:"#9FE1CB",ctc:"#04342C",hint:"Đây là loại cây lương thực",exp:"Ngô (bắp)! Ngô mọc ra đã có râu ngô từ đầu."},
  {q:"Thứ gì bạn có thể bắt nhưng không thể ném?",a:["Bóng rổ","Cảm lạnh","Cá","Bướm"],c:1,cat:"Sức khỏe",cc:"#F5C4B3",ctc:"#4A1B0C",hint:"Bạn thường bắt được nó vào mùa đông",exp:"Cảm lạnh! Có thể bắt cảm nhưng không ném đi được."},
  {q:"Cái gì đầy khi dùng, vơi khi cất đi?",a:["Cái bình nước","Đôi giày","Cái ví","Cái túi mù"],c:1,cat:"Đồ vật",cc:"#B5D4F4",ctc:"#042C53",hint:"Bạn mang nó ở chân mỗi ngày",exp:"Đôi giày! Mang vào đầy bàn chân, tháo ra thì rỗng."},
  {q:"Con gì không phải chó mà kêu giống sủa?",a:["Con mèo","Con vịt","Con hải cẩu","Con sóc"],c:2,cat:"Động vật",cc:"#9FE1CB",ctc:"#04342C",hint:"Sống ở vùng biển lạnh",exp:"Con hải cẩu! Tiếng kêu của hải cẩu rất giống tiếng chó sủa."},
  {q:"Thứ gì nhẹ nhất mà người mạnh nhất cũng không giữ quá 5 phút?",a:["Bong bóng","Hơi thở","Ảo ảnh","Giấc mơ"],c:1,cat:"Sức khỏe",cc:"#F5C4B3",ctc:"#4A1B0C",hint:"Bạn làm nó mọi lúc mà không ý thức",exp:"Hơi thở! Dù khỏe đến mấy cũng không nhịn thở quá 5 phút."},
  {q:"Người ta mua tôi để ăn nhưng không bao giờ ăn tôi. Tôi là gì?",a:["Muỗng","Cái đĩa","Bát","Ly"],c:1,cat:"Chơi chữ",cc:"#C0DD97",ctc:"#173404",hint:"Dùng để đựng thức ăn",exp:"Cái đĩa! Người ta mua đĩa để đựng thức ăn chứ không ăn cái đĩa."},
  {q:"Con gì 6 chân nhưng chỉ dùng 4 chân để đi?",a:["Con bọ ngựa","Con ong","Con gián","Con kiến"],c:0,cat:"Động vật",cc:"#9FE1CB",ctc:"#04342C",hint:"Nó dùng 2 chân trước như tay để cầm mồi",exp:"Con bọ ngựa! Dùng 2 chân trước để bắt mồi, 4 chân sau để di chuyển."},
  {q:"Bao nhiêu tháng trong năm có 28 ngày?",a:["1 tháng","2 tháng","12 tháng","4 tháng"],c:2,cat:"Toán vui",cc:"#FAC775",ctc:"#412402",hint:"Đừng chỉ nghĩ đến tháng Hai nhé!",exp:"12 tháng! Mọi tháng đều có ít nhất 28 ngày, không chỉ riêng tháng Hai."},
  {q:"Tôi có thành phố không có nhà, có núi không có cây, có nước không có cá. Tôi là gì?",a:["Bức tranh","Bản đồ","Giấc mơ","Sách địa lý"],c:1,cat:"Đồ vật",cc:"#B5D4F4",ctc:"#042C53",hint:"Dùng để chỉ đường",exp:"Bản đồ! Có tên thành phố, núi, sông nhưng không có thực vật."},
  {q:"Cái gì có mắt mà không nhìn được?",a:["Con búp bê","Cái kim","Cái lưới","Con ốc sên"],c:1,cat:"Đồ vật",cc:"#B5D4F4",ctc:"#042C53",hint:"Dùng để khâu vá",exp:"Cái kim! Mắt kim là lỗ xỏ chỉ, nhưng không thể nhìn."},
  {q:"Con trâu trắng gặm cỏ xanh, uống nước đỏ, nhả ra vàng. Là cái gì?",a:["Con bò","Cái bàn chải","Cây bút chì","Cái liềm"],c:2,cat:"Câu đố dân gian",cc:"#F4C0D1",ctc:"#4B1528",hint:"Dùng để viết hoặc vẽ",exp:"Cây bút chì! Bút trắng, viết lên giấy xanh, chấm mực đỏ, ra chữ vàng/đen."},
  {q:"Cái gì chạy nhưng không có chân, có giường mà không ai nằm?",a:["Con sông","Đám mây","Cơn mưa","Ngọn gió"],c:0,cat:"Thiên nhiên",cc:"#9FE1CB",ctc:"#04342C",hint:"Nước chảy qua đây",exp:"Con sông! Nước chảy và lòng sông là giường sông."},
  {q:"Người ta bỏ tôi đi khi cần tôi, lấy tôi về khi không cần. Tôi là gì?",a:["Rác","Mỏ neo","Cái chổi","Thuốc"],c:1,cat:"Chơi chữ",cc:"#C0DD97",ctc:"#173404",hint:"Dùng trên tàu thuyền",exp:"Mỏ neo! Thả xuống khi tàu muốn đứng yên, kéo lên khi tàu muốn đi."},
  {q:"Cái gì leo lên không có chân, xuống không có tay?",a:["Mặt trời","Nhiệt độ","Thang máy","Khói"],c:3,cat:"Thiên nhiên",cc:"#9FE1CB",ctc:"#04342C",hint:"Bay lên trời từ đống lửa",exp:"Khói! Khói bay lên và tan ra mà không cần chân tay."},
  {q:"Cái gì vừa là câu trả lời, vừa là câu hỏi?",a:["Câu đố","Từ Không","Từ Sao","Phải không"],c:1,cat:"Ngôn ngữ",cc:"#CECBF6",ctc:"#26215C",hint:"Một từ ngắn, âm điệu đi lên",exp:"Từ Không? — khi hỏi là câu hỏi, khi trả lời là phủ định!"},
];

var cv=document.getElementById('wc');
var ctx=cv.getContext('2d');
var N=SEGS.length,ANG=2*Math.PI/N;
var angle=0,spinning=false,cardOpen=false;
var score=0,spins=0,streak=0;
var gameHistory=[],usedQ=[];
var lf={f50:true,hint:true,time:true};
var tInt=null,tLeft=0,TMAX=20,answered=false;

function lvIdx(s){var l=0;for(var i=0;i<LEVELS.length;i++){if(s>=LEVELS[i].min)l=i;}return l;}

function draw(a){
  var W=cv.width;
  ctx.clearRect(0,0,W,W);
  var ox=W/2,oy=W/2,r=W/2-4;
  for(var i=0;i<N;i++){
    var s=a+i*ANG,e=s+ANG;
    ctx.beginPath();ctx.moveTo(ox,oy);ctx.arc(ox,oy,r,s,e);ctx.closePath();
    ctx.fillStyle=SEGS[i].color;ctx.fill();
    ctx.strokeStyle='rgba(255,255,255,0.95)';ctx.lineWidth=2;ctx.stroke();
    ctx.save();ctx.translate(ox,oy);ctx.rotate(s+ANG/2);
    ctx.fillStyle=SEGS[i].tc;
    ctx.font='bold '+Math.max(8,W*0.036)+'px sans-serif';
    ctx.textAlign='right';
    var ls=SEGS[i].label;
    ctx.fillText(ls[0],r-7,-5);
    if(ls[1])ctx.fillText(ls[1],r-7,8);
    ctx.restore();
  }
  ctx.beginPath();ctx.arc(ox,oy,18,0,Math.PI*2);
  ctx.fillStyle='#fff';ctx.fill();
  ctx.strokeStyle='#bbb';ctx.lineWidth=1.5;ctx.stroke();
  ctx.font='11px sans-serif';ctx.textAlign='center';ctx.fillText('🎡',ox,oy+4);
}

function resize(){
  var w=document.getElementById('wheel-wrap').clientWidth||220;
  cv.width=w;cv.height=w;draw(angle);
}
window.addEventListener('resize',resize);
setTimeout(resize,50);

function winIdx(a){
  var n=((-(a%(2*Math.PI)))+(2*Math.PI))%(2*Math.PI);
  return Math.floor(n/ANG)%N;
}

function confetti(good){
  var wa=document.getElementById('wheel-area');
  var cols=good?['#FAC775','#97C459','#85B7EB','#CECBF6','#ED93B1']:['#e08080','#aaa'];
  for(var i=0;i<(good?18:6);i++){
    var d=document.createElement('div');d.className='particle';
    d.style.cssText='width:7px;height:7px;background:'+cols[i%cols.length]+';position:absolute;left:'+(40+Math.random()*20)+'%;top:45%;--dx:'+((Math.random()-.5)*140)+'px;--dy:'+(-50-Math.random()*90)+'px;';
    wa.appendChild(d);
    setTimeout(function(el){return function(){el.parentNode&&el.parentNode.removeChild(el);};}(d),1100);
  }
}

function updStats(){
  document.getElementById('s-score').textContent=score;
  document.getElementById('s-spins').textContent=spins;
  document.getElementById('s-streak').textContent=streak;
  var lv=lvIdx(score);
  document.getElementById('s-level').textContent=lv+1;
  document.getElementById('level-badge').textContent='Cấp '+(lv+1)+' · '+LEVELS[lv].name;
  var sb=document.getElementById('streak-bar');
  if(streak>=3){var m=streak>=5?3:2;sb.innerHTML='<span class="streak-pill">🔥 Chuỗi '+streak+'! Nhân x'+m+'</span>';}
  else sb.innerHTML='';
}

function getMult(){return streak>=5?3:streak>=3?2:1;}

function pickQ(){
  if(usedQ.length>=QS.length)usedQ=[];
  var i;do{i=Math.floor(Math.random()*QS.length);}while(usedQ.indexOf(i)>=0);
  usedQ.push(i);var q=QS[i];
  return {q:q.q,a:q.a.slice(),c:q.c,cat:q.cat,cc:q.cc,ctc:q.ctc,hint:q.hint,exp:q.exp};
}

function stopTimer(){clearInterval(tInt);}

function startTimer(onExpire){
  tLeft=TMAX;clearInterval(tInt);
  var bar=document.getElementById('timer-bar');
  bar.style.width='100%';bar.style.background='#1A6EA8';
  tInt=setInterval(function(){
    tLeft=Math.max(0,tLeft-.1);
    var p=tLeft/TMAX*100;
    bar.style.width=p+'%';
    bar.style.background=p>50?'#1A6EA8':p>25?'#C8920A':'#C0392B';
    if(tLeft<=0){clearInterval(tInt);onExpire();}
  },100);
}

var $spin=document.getElementById('spin-btn');

function openCard(){
  document.getElementById('idle-panel').style.display='none';
  document.getElementById('qcard').className='show';
  cardOpen=true;
  $spin.disabled=true;
}
function closeCard(){
  document.getElementById('qcard').className='';
  document.getElementById('idle-panel').style.display='';
  cardOpen=false;
  $spin.disabled=false;
}

function showResult(won,correctIdx,pts,exp,seg){
  stopTimer();answered=true;
  var btns=document.getElementById('ans-grid').getElementsByTagName('button');
  for(var j=0;j<btns.length;j++)btns[j].disabled=true;
  btns[correctIdx].className='ans-btn correct';
  var rm=document.getElementById('result-msg');
  if(won){
    score+=pts;streak++;updStats();checkLvUp();confetti(true);
    rm.style.color='#1a5a1a';
    rm.textContent='🎉 Chính xác! +'+pts+' điểm'+(getMult()>1?' (STREAK BONUS!)':'');
    addHist(seg,true,pts);
  } else {
    streak=0;updStats();
    rm.style.color='#8a1a1a';
    rm.textContent='❌ Sai rồi! Mất phần thưởng.';
    addHist(seg,false,0);
  }
  var eb=document.getElementById('explain-box');
  eb.innerHTML='<b>Giải thích:</b> '+exp;eb.style.display='block';
  var cb=document.getElementById('continue-btn');
  cb.textContent='Tiếp tục ▶';cb.style.display='block';
}

function addHist(seg,won,pts){
  gameHistory.unshift({seg:seg,won:won,pts:pts});
  if(gameHistory.length>5)gameHistory.pop();
  var list=document.getElementById('hist-list');list.innerHTML='';
  gameHistory.forEach(function(h){
    var d=document.createElement('div');d.className='hi';
    d.innerHTML='<span style="font-size:13px">'+h.seg.icon+'</span>'
      +'<span style="flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">'+h.seg.name+'</span>'
      +'<span class="hi-pts '+(h.won?'won':'lost')+'">'+(h.won?'+'+h.pts:'Trượt')+'</span>';
    list.appendChild(d);
  });
}

function checkLvUp(){
  var lv=lvIdx(score),prev=lvIdx(score-1);
  if(lv>prev){
    var t=document.getElementById('lvl-toast');
    t.textContent='🎊 Lên cấp '+(lv+1)+': '+LEVELS[lv].name+'!';
    t.style.display='block';
    setTimeout(function(){t.style.display='none';},2500);
  }
}

function buildQ(seg){
  var q=pickQ(),m=getMult(),pts=seg.pts*m;
  answered=false;
  document.getElementById('qc-icon').textContent=seg.icon;
  document.getElementById('qc-name').textContent=seg.name;
  document.getElementById('qc-pts').textContent='+'+pts+' điểm nếu đúng'+(m>1?' (x'+m+'!)':'')+(seg.jackpot?' 🌟':'');
  document.getElementById('qc-cat').textContent=q.cat;
  document.getElementById('qc-cat').style.cssText='background:'+q.cc+';color:'+q.ctc+';display:inline-block;font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;margin-bottom:5px';
  document.getElementById('qc-q').textContent=q.q;
  document.getElementById('result-msg').textContent='';
  document.getElementById('explain-box').style.display='none';
  document.getElementById('continue-btn').style.display='none';
  document.getElementById('timer-wrap').style.display='block';
  document.getElementById('lifelines').style.display='flex';
  var ll50=document.getElementById('ll-50'),llh=document.getElementById('ll-hint'),llt=document.getElementById('ll-time');
  ll50.disabled=!lf.f50;ll50.textContent=lf.f50?'🎯 50/50':'🎯 ×';
  llh.disabled=!lf.hint;llh.textContent=lf.hint?'💡 Gợi ý':'💡 ×';
  llt.disabled=!lf.time;llt.textContent=lf.time?'⏱ +10s':'⏱ ×';
  var ag=document.getElementById('ans-grid');ag.innerHTML='';
  ['A. ','B. ','C. ','D. '].forEach(function(pfx,idx){
    var btn=document.createElement('button');btn.className='ans-btn';
    btn.textContent=pfx+q.a[idx];
    btn.addEventListener('click',function(){
      if(answered)return;
      btn.className='ans-btn '+(idx===q.c?'correct':'wrong');
      showResult(idx===q.c,q.c,pts,q.exp,seg);
    });
    ag.appendChild(btn);
  });
  ll50.onclick=function(){
    if(!lf.f50||answered)return;
    lf.f50=false;ll50.disabled=true;ll50.textContent='🎯 ×';
    var btns=ag.getElementsByTagName('button'),rm=0;
    for(var i=0;i<4;i++)if(i!==q.c&&rm<2){btns[i].disabled=true;btns[i].style.opacity='.2';rm++;}
  };
  llh.onclick=function(){
    if(!lf.hint||answered)return;
    lf.hint=false;llh.disabled=true;llh.textContent='💡 ×';
    var eb=document.getElementById('explain-box');eb.textContent='💡 Gợi ý: '+q.hint;eb.style.display='block';
  };
  llt.onclick=function(){
    if(!lf.time||answered)return;
    lf.time=false;llt.disabled=true;llt.textContent='⏱ ×';
    tLeft=Math.min(TMAX,tLeft+10);
  };
  openCard();
  startTimer(function(){
    if(answered)return;
    showResult(false,q.c,pts,q.exp,seg);
    document.getElementById('result-msg').textContent='⏰ Hết giờ! Mất phần thưởng.';
  });
}

function buildLose(seg){
  answered=true;
  document.getElementById('qc-icon').textContent=seg.icon;
  document.getElementById('qc-name').textContent='Ôi không! Mất lượt rồi!';
  document.getElementById('qc-pts').textContent='Streak về 0 — cố lên lần sau 💪';
  document.getElementById('qc-cat').textContent='💀 Vận đen';
  document.getElementById('qc-cat').style.cssText='background:#f0c8c8;color:#8B1A1A;display:inline-block;font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;margin-bottom:5px';
  document.getElementById('qc-q').textContent='Vận đen ghé thăm! Streak về 0, cố lên nhé!';
  document.getElementById('result-msg').textContent='';
  document.getElementById('explain-box').style.display='none';
  document.getElementById('timer-wrap').style.display='none';
  document.getElementById('lifelines').style.display='none';
  document.getElementById('ans-grid').innerHTML='';
  var cb=document.getElementById('continue-btn');cb.textContent='Thử lại ▶';cb.style.display='block';
  openCard();
}

$spin.addEventListener('click',function(){
  if(spinning||cardOpen)return;
  spinning=true;$spin.disabled=true;
  var ex=5+Math.floor(Math.random()*4);
  var tot=ex*2*Math.PI+Math.random()*2*Math.PI;
  var dur=3000+Math.random()*1200;
  var t0=performance.now(),a0=angle;
  function ease(t){return 1-Math.pow(1-t,4);}
  (function frame(now){
    var t=Math.min((now-t0)/dur,1);
    angle=a0+tot*ease(t);draw(angle);
    if(t<1){requestAnimationFrame(frame);}
    else{
      spinning=false;spins++;
      document.getElementById('s-spins').textContent=spins;
      var seg=SEGS[winIdx(angle)];
      if(seg.lose){streak=0;updStats();confetti(false);buildLose(seg);}
      else{confetti(true);buildQ(seg);}
    }
  })(t0);
});

document.getElementById('continue-btn').addEventListener('click',function(){
  stopTimer();closeCard();
});

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

Thứ Ba, 14/04/2026 15:30

3 ★ 1 👨 4