Bài Viết, Tất cả bài viết

Share Code Game Tết Giật Lì Xì

Đăng vào Tháng 12 2, 2025Tháng 12 2, 2025 bởi Quản trị viên

Quản trị viên

02/12/2025

4 Phút đọc

61 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Bạn đang tìm code game Tết 2026 để tổ chức minigame, thu hút người chơi, tăng tương tác cho website hoặc fanpage?
Hôm nay mình chia sẻ source code game Tết giật lì xì cực nhẹ – chạy trực tiếp trên trình duyệt, dễ tùy chỉnh, phù hợp làm sự kiện Tết cho trường học, doanh nghiệp, cửa hàng online…

Giới thiệu game “Giật Lì Xì Tết 2026”

Game mô phỏng những bao lì xì rơi từ trên xuống, người chơi click để “giật” và nhận điểm.
Tốc độ rơi tăng dần, tạo cảm giác phấn khích và hấp dẫn.

Đặc điểm nổi bật:

🔥 Chạy được ngay trên HTML – không cần backend
🎨 Giao diện mang phong cách Tết
🧧 Hình ảnh bao lì xì đẹp mắt
📱 Hỗ trợ màn hình máy tính & điện thoại
🚀 Tốc độ nhẹ, tối ưu cho web
🤩 Dễ chỉnh sửa điểm thắng, hình ảnh, hiệu ứng

Đây là dạng minigame cực phù hợp cho mùa Tết 2026.

Share Code Game Tết Giật Lì Xì (HTML + CSS + JS)

Bạn có thể tải hoặc copy trực tiếp đoạn code dưới đây.
Chỉ cần tạo file index.html → dán vào → mở trình duyệt là chạy ngay.

<!-- /tet-2026-lixi-game/index.html -->
<!doctype html>
<html lang="vi">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <title>Game Tết 2026 – Bắt Lì Xì!</title>
  <style>
    :root{--bg:#0b1020;--fg:#f8fafc;--accent:#e11d48;--gold:#f59e0b;--green:#16a34a}
    *{box-sizing:border-box} html,body{height:100%}
    body{margin:0;background:radial-gradient(1200px 700px at 50% -10%, #1b1f39 0%, #0b1020 60%, #070a16 100%);color:var(--fg);font:500 16px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}
    .wrap{display:grid;place-items:center;height:100%;padding:16px}
    canvas{display:block;width:min(100vw,800px);height:min(100vh - 160px, 100vw * 0.6);max-height:720px;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.5);background:linear-gradient(#0d1228,#0a0f22)}
    .hud{width:min(100vw,800px);margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
    .hud .group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    button{appearance:none;background:#141a33;border:1px solid #2a2f4a;color:var(--fg);padding:10px 14px;border-radius:12px;cursor:pointer}
    button:hover{border-color:#3c456f}
    .btn-primary{background:linear-gradient(180deg,#e11d48,#be123c);border:none}
    .pill{padding:8px 12px;border:1px solid #2a2f4a;border-radius:999px;background:#101634}
    .mobile-controls{display:none;position:absolute;inset:auto 0 18px 0;display:flex;justify-content:center;gap:20px;pointer-events:none}
    .mobile-controls button{pointer-events:auto;min-width:90px;font-size:18px}
    @media (max-width:700px){
      .mobile-controls{display:flex}
      canvas{height:56vh}
    }
    .sr{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
    a{color:#93c5fd;text-decoration:none} a:hover{text-decoration:underline}
  </style>
</head>
<body>
  <div class="wrap">
    <canvas id="game" width="960" height="540" aria-label="Game Tết 2026 – Bắt Lì Xì"></canvas>
    <div class="hud" role="toolbar" aria-label="Điều khiển">
      <div class="group">
        <span class="pill" id="score">Điểm: 0</span>
        <span class="pill" id="combo">Combo: x1</span>
        <span class="pill" id="lives">Mạng: 3</span>
        <span class="pill" id="time">Thời gian: 90s</span>
      </div>
      <div class="group">
        <button id="toggle-sound" aria-pressed="true" title="Bật/Tắt âm thanh">🔊 Âm</button>
        <button id="pause">⏸️ Tạm dừng</button>
        <button id="restart" class="btn-primary">🔁 Chơi lại</button>
      </div>
    </div>
    <div class="mobile-controls">
      <button id="left">⬅️ Trái</button>
      <button id="right">➡️ Phải</button>
    </div>
  </div>

  <script>
    // --- Utilities
    const clamp=(v,min,max)=>Math.max(min,Math.min(max,v));
    const rand=(a,b)=>Math.random()*(b-a)+a;
    const choice=(arr)=>arr[(Math.random()*arr.length)|0];

    // --- Audio (WebAudio, very light)
    const AudioSys=(()=>{
      let ctx, enabled=true;
      const ensure=()=>{ if(!ctx) ctx=new (window.AudioContext||window.webkitAudioContext)(); };
      const beep=(freq=600,dur=0.07,type='sine',gain=0.03)=>{
        if(!enabled) return;
        ensure();
        const t=ctx.currentTime;
        const o=ctx.createOscillator(), g=ctx.createGain();
        o.type=type; o.frequency.value=freq;
        g.gain.value=gain; o.connect(g).connect(ctx.destination);
        o.start(t); o.stop(t+dur);
      };
      const chime=()=>{beep(740,0.08,'sine',0.04); setTimeout(()=>beep(980,0.08,'sine',0.04),70);}
      const thud=()=>{beep(180,0.08,'square',0.05);}
      const boom=()=>{beep(90,0.12,'sawtooth',0.06); setTimeout(()=>beep(60,0.12,'sawtooth',0.05),80);}
      return {
        enable(v){enabled=v},
        resume(){try{ensure(); ctx.resume()}catch{}},
        lixi:chime, banh:()=>beep(520,0.1,'triangle',0.05),
        hoa:()=>beep(1200,0.06,'sine',0.03),
        phaono:boom, hurt:thud
      }
    })();

    // --- Canvas & DPR scaling
    const canvas=document.getElementById('game');
    const ctx=canvas.getContext('2d');
    const baseW=960, baseH=540;
    function fitToDPR(){
      const dpr=window.devicePixelRatio||1;
      const w=baseW, h=baseH;
      canvas.width=w*dpr; canvas.height=h*dpr;
      canvas.style.width=w+'px'; canvas.style.height=h+'px';
      ctx.setTransform(dpr,0,0,dpr,0,0);
    }
    fitToDPR(); addEventListener('resize', fitToDPR, {passive:true});

    // --- Game State
    const State={MENU:0, PLAY:1, PAUSE:2, OVER:3};
    let state=State.MENU;

    const world={
      score:0, combo:1, lives:3, timeLeft:90, hi: parseInt(localStorage.getItem('tet2026_hi')||'0',10),
      slow:0, // seconds
      speedScale:1, // increases slightly over time
    };

    const player={
      x: baseW/2, y: baseH-70, vx:0, width:120, height:34, speed:600, moveLeft:false, moveRight:false
    };

    /** Falling items */
    const items=[];
    const TYPES={
      LIXI:'lixi', BANH:'banh', HOA:'hoa', PHAO:'phao'
    };

    function spawnItem(){
      const roll=Math.random();
      let type=TYPES.LIXI;
      if(roll<0.08) type=TYPES.BANH;       // rare bonus
      else if(roll<0.16) type=TYPES.HOA;   // slow-mo
      else if(roll<0.30) type=TYPES.PHAO;  // hazard
      const size = type===TYPES.PHAO ? 26 : 24 + rand(-3,6);
      items.push({
        type, x: rand(30, baseW-30), y: -30, vy: rand(120, 180), size, rot: rand(0,Math.PI*2), vr: rand(-1,1)
      });
    }

    // --- Drawing helpers
    function drawBackground(t){
      // subtle fireworks + gradient ground
      const grd=ctx.createLinearGradient(0,0,0,baseH);
      grd.addColorStop(0,'#0d1228'); grd.addColorStop(1,'#080c1d');
      ctx.fillStyle=grd; ctx.fillRect(0,0,baseW,baseH);

      // moon
      ctx.beginPath(); ctx.arc(baseW-90,80,40,0,Math.PI*2);
      ctx.fillStyle='#f1f5f9'; ctx.fill();

      // fireworks particles (simple twinkle)
      const count=24;
      for(let i=0;i<count;i++){
        const x=(i*41+t*40)%baseW, y=(i*73+t*30)%200+30;
        ctx.globalAlpha=0.4+0.6*Math.sin((t+i)*2);
        ctx.fillStyle=i%3? '#f59e0b' : '#e11d48';
        ctx.fillRect(x,y,2,2);
      }
      ctx.globalAlpha=1;
    }

    function drawPlayer(){
      const {x,y,width,height}=player;
      ctx.save();
      ctx.translate(x,y);
      // basket body
      ctx.fillStyle='#f59e0b';
      ctx.beginPath();
      ctx.moveTo(-width/2,0);
      ctx.lineTo(width/2,0);
      ctx.lineTo(width/2-14,height);
      ctx.lineTo(-width/2+14,height);
      ctx.closePath();
      ctx.fill();
      // rim
      ctx.fillStyle='#fde68a'; ctx.fillRect(-width/2, -6, width, 8);
      ctx.restore();
    }

    function drawItem(it){
      ctx.save();
      ctx.translate(it.x, it.y);
      ctx.rotate(it.rot);
      if(it.type===TYPES.LIXI){
        // red envelope
        ctx.fillStyle='#be123c';
        ctx.fillRect(-it.size/2,-it.size*0.65,it.size,it.size*1.3);
        ctx.fillStyle='#f59e0b';
        ctx.beginPath(); ctx.arc(0,-it.size*0.3,it.size*0.28,0,Math.PI*2); ctx.fill();
      }else if(it.type===TYPES.BANH){
        // banh chung
        ctx.fillStyle='#166534';
        ctx.fillRect(-it.size,-it.size,it.size*2,it.size*2);
        ctx.strokeStyle='#bbf7d0'; ctx.lineWidth=3;
        ctx.strokeRect(-it.size*0.9,-it.size*0.9,it.size*1.8,it.size*1.8);
        ctx.beginPath(); ctx.moveTo(0,-it.size); ctx.lineTo(0,it.size); ctx.moveTo(-it.size,0); ctx.lineTo(it.size,0); ctx.stroke();
      }else if(it.type===TYPES.HOA){
        // yellow flower (mai)
        for(let i=0;i<6;i++){
          ctx.rotate(Math.PI/3);
          ctx.fillStyle='#fbbf24'; ctx.beginPath();
          ctx.ellipse(it.size*0.45,0,it.size*0.45,it.size*0.25,0,0,Math.PI*2);
          ctx.fill();
        }
        ctx.fillStyle='#f59e0b'; ctx.beginPath(); ctx.arc(0,0,it.size*0.22,0,Math.PI*2); ctx.fill();
      }else{
        // firecracker
        ctx.fillStyle='#ef4444';
        ctx.fillRect(-it.size*0.4,-it.size*0.9,it.size*0.8,it.size*1.8);
        ctx.fillStyle='#fde68a'; ctx.fillRect(-it.size*0.4,-it.size*0.9,it.size*0.8,4);
        // fuse
        ctx.strokeStyle='#fde047'; ctx.lineWidth=2;
        ctx.beginPath(); ctx.moveTo(0,-it.size*0.9); ctx.lineTo(0,-it.size*1.3); ctx.stroke();
      }
      ctx.restore();
    }

    // --- Input
    const keys=new Set();
    addEventListener('keydown',e=>{
      if(['ArrowLeft','ArrowRight','a','d','A','D','Enter',' ','p','P','r','R'].includes(e.key)) e.preventDefault();
      keys.add(e.key);
      if(e.key==='Enter' && state===State.MENU){ startGame(); }
      if((e.key==='p'||e.key==='P') && state===State.PLAY){ pauseGame(); }
      else if((e.key==='p'||e.key==='P') && state===State.PAUSE){ resumeGame(); }
      if((e.key==='r'||e.key==='R') && (state===State.OVER||state===State.PAUSE)){ restartGame(); }
    },{passive:false});
    addEventListener('keyup',e=>keys.delete(e.key));

    // touch buttons
    const leftBtn=document.getElementById('left');
    const rightBtn=document.getElementById('right');
    const bindHold=(el, on, off)=>{let holding=false;
      const down=()=>{holding=true; on()};
      const up=()=>{holding=false; off()};
      el.addEventListener('touchstart',e=>{e.preventDefault();down()},{passive:false});
      el.addEventListener('touchend',up); el.addEventListener('touchcancel',up);
      el.addEventListener('mousedown',down); el.addEventListener('mouseup',up); el.addEventListener('mouseleave',up);
    };
    bindHold(leftBtn, ()=>player.moveLeft=true, ()=>player.moveLeft=false);
    bindHold(rightBtn, ()=>player.moveRight=true, ()=>player.moveRight=false);

    // HUD controls
    const btnSound=document.getElementById('toggle-sound');
    const btnPause=document.getElementById('pause');
    const btnRestart=document.getElementById('restart');
    btnSound.onclick=()=>{
      const pressed = btnSound.getAttribute('aria-pressed')==='true';
      const next=!pressed;
      btnSound.setAttribute('aria-pressed',String(next));
      btnSound.textContent = next ? '🔊 Âm' : '🔇 Tắt âm';
      AudioSys.enable(next);
      AudioSys.resume();
    };
    btnPause.onclick=()=>{ if(state===State.PLAY) pauseGame(); else if(state===State.PAUSE) resumeGame(); };
    btnRestart.onclick=()=>restartGame();

    // --- Game flow
    let last=performance.now(), accSpawn=0;
    function startGame(){
      state=State.PLAY;
      world.score=0; world.combo=1; world.lives=3; world.timeLeft=90; world.slow=0; world.speedScale=1;
      player.x=baseW/2; player.vx=0;
      items.length=0; accSpawn=0;
      AudioSys.resume();
    }
    function pauseGame(){ state=State.PAUSE; }
    function resumeGame(){ state=State.PLAY; last=performance.now(); }
    function endGame(){
      state=State.OVER;
      if(world.score>world.hi){ world.hi=world.score; localStorage.setItem('tet2026_hi', String(world.hi)); }
    }
    function restartGame(){ startGame(); }

    // --- Update
    function update(dt){
      // time & difficulty
      const slowFactor = world.slow>0 ? 0.4 : 1;
      if(state===State.PLAY){
        world.timeLeft = Math.max(0, world.timeLeft - dt);
        world.speedScale = Math.min(2.2, world.speedScale + dt*0.02);
        if(world.slow>0) world.slow = Math.max(0, world.slow - dt);
        if(world.timeLeft<=0) endGame();
      }

      // player movement
      const moveLeft = keys.has('ArrowLeft') || keys.has('a') || keys.has('A') || player.moveLeft;
      const moveRight = keys.has('ArrowRight') || keys.has('d') || keys.has('D') || player.moveRight;
      player.vx = (moveRight?1:0) - (moveLeft?1:0);
      player.x = clamp(player.x + player.vx * player.speed * dt, 60, baseW-60);

      // spawn logic
      const spawnRate = 0.8 / world.speedScale; // seconds
      accSpawn += dt;
      while(accSpawn > spawnRate){
        spawnItem(); accSpawn -= spawnRate;
      }

      // update items
      for(let i=items.length-1;i>=0;i--){
        const it=items[i];
        it.vy += dt*10;
        it.y += it.vy * dt * world.speedScale * slowFactor;
        it.rot += it.vr * dt;
        // collision
        if(collidePlayer(it)){
          if(it.type===TYPES.LIXI){
            world.score += Math.floor(10*world.combo);
            world.combo = Math.min(10, world.combo + 0.1);
            AudioSys.lixi();
          }else if(it.type===TYPES.BANH){
            world.score += 50;
            world.lives = Math.min(3, world.lives+1);
            world.combo = Math.min(10, world.combo + 0.5);
            AudioSys.banh();
          }else if(it.type===TYPES.HOA){
            world.slow = 3;
            world.combo = Math.min(10, world.combo + 0.3);
            AudioSys.hoa();
          }else{
            world.lives -= 1;
            world.combo = 1;
            AudioSys.phaono();
            if(world.lives<=0){ endGame(); }
          }
          items.splice(i,1);
          continue;
        }
        // out of screen
        if(it.y > baseH+60){ items.splice(i,1); }
      }

      // HUD
      document.getElementById('score').textContent = `Điểm: ${world.score}`;
      document.getElementById('combo').textContent = `Combo: x${world.combo.toFixed(1)}`;
      document.getElementById('lives').textContent = `Mạng: ${world.lives}`;
      document.getElementById('time').textContent = `Thời gian: ${Math.ceil(world.timeLeft)}s`;
      btnPause.textContent = state===State.PAUSE ? '▶️ Tiếp tục' : '⏸️ Tạm dừng';
    }

    function collidePlayer(it){
      const pw=player.width, ph=player.height;
      const px=player.x - pw/2, py=player.y - ph/2;
      const iw=it.size*0.9, ih=it.size*0.9;
      const ix=it.x - iw/2, iy=it.y - ih/2;
      return !(px+pw<ix || px>ix+iw || py+ph<iy || py>iy+ih);
    }

    // --- Render
    function draw(t){
      drawBackground(t);
      // ground line
      ctx.fillStyle='#11162e'; ctx.fillRect(0, baseH-40, baseW, 40);
      // items
      for(const it of items) drawItem(it);
      // player
      drawPlayer();

      // overlays
      if(state===State.MENU){
        drawTitle('Tết 2026 – Bắt Lì Xì!', 'Nhấn Enter để bắt đầu • ← → để di chuyển • Bắt lì xì, né pháo nổ');
        drawBadge();
      }else if(state===State.PAUSE){
        drawCenter('⏸️ Tạm dừng\nNhấn P để tiếp tục');
      }else if(state===State.OVER){
        drawCenter(`🎉 Hết giờ!\nĐiểm: ${world.score}\nKỷ lục: ${world.hi}\nNhấn R để chơi lại`);
      }

      // slow-mo vignette
      if(world.slow>0){
        ctx.fillStyle='rgba(251, 191, 36, 0.12)';
        ctx.fillRect(0,0,baseW,baseH);
      }
    }

    function drawTitle(title, subtitle){
      ctx.fillStyle='rgba(0,0,0,0.55)';
      ctx.fillRect(40,60,baseW-80,180);
      ctx.fillStyle='#e11d48';
      ctx.font='bold 46px ui-sans-serif,Segoe UI,Roboto';
      ctx.textAlign='center';
      ctx.fillText(title, baseW/2, 140);
      ctx.fillStyle='#f8fafc';
      ctx.font='20px ui-sans-serif,Segoe UI,Roboto';
      ctx.fillText(subtitle, baseW/2, 180);
      ctx.font='18px ui-sans-serif,Segoe UI,Roboto';
      ctx.fillText(`Mục tiêu: ghi thật nhiều điểm trong 90 giây!`, baseW/2, 210);
    }
    function drawCenter(text){
      ctx.fillStyle='rgba(0,0,0,0.55)'; ctx.fillRect(120,130,baseW-240,baseH-260);
      ctx.fillStyle='#f8fafc'; ctx.textAlign='center';
      ctx.font='bold 34px ui-sans-serif,Segoe UI,Roboto';
      const lines=String(text).split('\n');
      let y=baseH/2 - (lines.length-1)*24;
      for(const ln of lines){ ctx.fillText(ln, baseW/2, y); y+=48; }
    }
    function drawBadge(){
      ctx.textAlign='left';
      ctx.font='16px ui-sans-serif,Segoe UI,Roboto';
      ctx.fillStyle='#93c5fd';
      ctx.fillText(`Kỷ lục cá nhân: ${world.hi} điểm`, 54, 250);
      ctx.fillStyle='#cbd5e1';
      ctx.fillText(`Mẹo: Bánh chưng (+50 & hồi 1 mạng), Hoa mai (làm chậm 3s), Pháo nổ (-1 mạng).`, 54, 278);
    }

    // --- Main loop
    function loop(now){
      const dt=Math.min(0.05,(now-last)/1000);
      last=now;
      if(state===State.PLAY) update(dt);
      draw(now/1000);
      requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);
  </script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

<!doctype html>

<html lang="vi">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

<title>Game Tết 2026 – Bắt Lì Xì!</title>

<style>

:root{--bg:#0b1020;--fg:#f8fafc;--accent:#e11d48;--gold:#f59e0b;--green:#16a34a}

*{box-sizing:border-box} html,body{height:100%}

body{margin:0;background:radial-gradient(1200px 700px at 50% -10%, #1b1f39 0%, #0b1020 60%, #070a16 100%);color:var(--fg);font:500 16px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}

.wrap{display:grid;place-items:center;height:100%;padding:16px}

canvas{display:block;width:min(100vw,800px);height:min(100vh - 160px, 100vw * 0.6);max-height:720px;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.5);background:linear-gradient(#0d1228,#0a0f22)}

.hud{width:min(100vw,800px);margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}

.hud .group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

button{appearance:none;background:#141a33;border:1px solid #2a2f4a;color:var(--fg);padding:10px 14px;border-radius:12px;cursor:pointer}

button:hover{border-color:#3c456f}

.btn-primary{background:linear-gradient(180deg,#e11d48,#be123c);border:none}

.pill{padding:8px 12px;border:1px solid #2a2f4a;border-radius:999px;background:#101634}

.mobile-controls{display:none;position:absolute;inset:auto 0 18px 0;display:flex;justify-content:center;gap:20px;pointer-events:none}

.mobile-controls button{pointer-events:auto;min-width:90px;font-size:18px}

@media (max-width:700px){

.mobile-controls{display:flex}

canvas{height:56vh}

}

.sr{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

a{color:#93c5fd;text-decoration:none} a:hover{text-decoration:underline}

</style>

</head>

<body>

<div class="wrap">

<canvas id="game" width="960" height="540" aria-label="Game Tết 2026 – Bắt Lì Xì"></canvas>

<div class="hud" role="toolbar" aria-label="Điều khiển">

<div class="group">

<span class="pill" id="score">Điểm: 0</span>

<span class="pill" id="combo">Combo: x1</span>

<span class="pill" id="lives">Mạng: 3</span>

<span class="pill" id="time">Thời gian: 90s</span>

</div>

<div class="group">

<button id="toggle-sound" aria-pressed="true" title="Bật/Tắt âm thanh">🔊 Âm</button>

<button id="pause">⏸️ Tạm dừng</button>

<button id="restart" class="btn-primary">🔁 Chơi lại</button>

</div>

</div>

<div class="mobile-controls">

<button id="left">⬅️ Trái</button>

<button id="right">➡️ Phải</button>

</div>

</div>

<script>

// --- Utilities

const clamp=(v,min,max)=>Math.max(min,Math.min(max,v));

const rand=(a,b)=>Math.random()*(b-a)+a;

const choice=(arr)=>arr[(Math.random()*arr.length)|0];

// --- Audio (WebAudio, very light)

const AudioSys=(()=>{

let ctx, enabled=true;

const ensure=()=>{ if(!ctx) ctx=new (window.AudioContext||window.webkitAudioContext)(); };

const beep=(freq=600,dur=0.07,type='sine',gain=0.03)=>{

if(!enabled) return;

ensure();

const t=ctx.currentTime;

const o=ctx.createOscillator(), g=ctx.createGain();

o.type=type; o.frequency.value=freq;

g.gain.value=gain; o.connect(g).connect(ctx.destination);

o.start(t); o.stop(t+dur);

};

const chime=()=>{beep(740,0.08,'sine',0.04); setTimeout(()=>beep(980,0.08,'sine',0.04),70);}

const thud=()=>{beep(180,0.08,'square',0.05);}

const boom=()=>{beep(90,0.12,'sawtooth',0.06); setTimeout(()=>beep(60,0.12,'sawtooth',0.05),80);}

return {

enable(v){enabled=v},

resume(){try{ensure(); ctx.resume()}catch{}},

lixi:chime, banh:()=>beep(520,0.1,'triangle',0.05),

hoa:()=>beep(1200,0.06,'sine',0.03),

phaono:boom, hurt:thud

}

})();

// --- Canvas & DPR scaling

const canvas=document.getElementById('game');

const ctx=canvas.getContext('2d');

const baseW=960, baseH=540;

function fitToDPR(){

const dpr=window.devicePixelRatio||1;

const w=baseW, h=baseH;

canvas.width=w*dpr; canvas.height=h*dpr;

canvas.style.width=w+'px'; canvas.style.height=h+'px';

ctx.setTransform(dpr,0,0,dpr,0,0);

}

fitToDPR(); addEventListener('resize', fitToDPR, {passive:true});

// --- Game State

const State={MENU:0, PLAY:1, PAUSE:2, OVER:3};

let state=State.MENU;

const world={

score:0, combo:1, lives:3, timeLeft:90, hi: parseInt(localStorage.getItem('tet2026_hi')||'0',10),

slow:0, // seconds

speedScale:1, // increases slightly over time

};

const player={

x: baseW/2, y: baseH-70, vx:0, width:120, height:34, speed:600, moveLeft:false, moveRight:false

};

/** Falling items */

const items=[];

const TYPES={

LIXI:'lixi', BANH:'banh', HOA:'hoa', PHAO:'phao'

};

function spawnItem(){

const roll=Math.random();

let type=TYPES.LIXI;

if(roll<0.08) type=TYPES.BANH; // rare bonus

else if(roll<0.16) type=TYPES.HOA; // slow-mo

else if(roll<0.30) type=TYPES.PHAO; // hazard

const size = type===TYPES.PHAO ? 26 : 24 + rand(-3,6);

items.push({

type, x: rand(30, baseW-30), y: -30, vy: rand(120, 180), size, rot: rand(0,Math.PI*2), vr: rand(-1,1)

});

}

// --- Drawing helpers

function drawBackground(t){

// subtle fireworks + gradient ground

const grd=ctx.createLinearGradient(0,0,0,baseH);

grd.addColorStop(0,'#0d1228'); grd.addColorStop(1,'#080c1d');

ctx.fillStyle=grd; ctx.fillRect(0,0,baseW,baseH);

// moon

ctx.beginPath(); ctx.arc(baseW-90,80,40,0,Math.PI*2);

ctx.fillStyle='#f1f5f9'; ctx.fill();

// fireworks particles (simple twinkle)

const count=24;

for(let i=0;i<count;i++){

const x=(i*41+t*40)%baseW, y=(i*73+t*30)%200+30;

ctx.globalAlpha=0.4+0.6*Math.sin((t+i)*2);

ctx.fillStyle=i%3? '#f59e0b' : '#e11d48';

ctx.fillRect(x,y,2,2);

}

ctx.globalAlpha=1;

}

function drawPlayer(){

const {x,y,width,height}=player;

ctx.save();

ctx.translate(x,y);

// basket body

ctx.fillStyle='#f59e0b';

ctx.beginPath();

ctx.moveTo(-width/2,0);

ctx.lineTo(width/2,0);

ctx.lineTo(width/2-14,height);

ctx.lineTo(-width/2+14,height);

ctx.closePath();

ctx.fill();

// rim

ctx.fillStyle='#fde68a'; ctx.fillRect(-width/2, -6, width, 8);

ctx.restore();

}

function drawItem(it){

ctx.save();

ctx.translate(it.x, it.y);

ctx.rotate(it.rot);

if(it.type===TYPES.LIXI){

// red envelope

ctx.fillStyle='#be123c';

ctx.fillRect(-it.size/2,-it.size*0.65,it.size,it.size*1.3);

ctx.fillStyle='#f59e0b';

ctx.beginPath(); ctx.arc(0,-it.size*0.3,it.size*0.28,0,Math.PI*2); ctx.fill();

}else if(it.type===TYPES.BANH){

// banh chung

ctx.fillStyle='#166534';

ctx.fillRect(-it.size,-it.size,it.size*2,it.size*2);

ctx.strokeStyle='#bbf7d0'; ctx.lineWidth=3;

ctx.strokeRect(-it.size*0.9,-it.size*0.9,it.size*1.8,it.size*1.8);

ctx.beginPath(); ctx.moveTo(0,-it.size); ctx.lineTo(0,it.size); ctx.moveTo(-it.size,0); ctx.lineTo(it.size,0); ctx.stroke();

}else if(it.type===TYPES.HOA){

// yellow flower (mai)

for(let i=0;i<6;i++){

ctx.rotate(Math.PI/3);

ctx.fillStyle='#fbbf24'; ctx.beginPath();

ctx.ellipse(it.size*0.45,0,it.size*0.45,it.size*0.25,0,0,Math.PI*2);

ctx.fill();

}

ctx.fillStyle='#f59e0b'; ctx.beginPath(); ctx.arc(0,0,it.size*0.22,0,Math.PI*2); ctx.fill();

}else{

// firecracker

ctx.fillStyle='#ef4444';

ctx.fillRect(-it.size*0.4,-it.size*0.9,it.size*0.8,it.size*1.8);

ctx.fillStyle='#fde68a'; ctx.fillRect(-it.size*0.4,-it.size*0.9,it.size*0.8,4);

// fuse

ctx.strokeStyle='#fde047'; ctx.lineWidth=2;

ctx.beginPath(); ctx.moveTo(0,-it.size*0.9); ctx.lineTo(0,-it.size*1.3); ctx.stroke();

}

ctx.restore();

}

// --- Input

const keys=new Set();

addEventListener('keydown',e=>{

if(['ArrowLeft','ArrowRight','a','d','A','D','Enter',' ','p','P','r','R'].includes(e.key)) e.preventDefault();

keys.add(e.key);

if(e.key==='Enter' && state===State.MENU){ startGame(); }

if((e.key==='p'||e.key==='P') && state===State.PLAY){ pauseGame(); }

else if((e.key==='p'||e.key==='P') && state===State.PAUSE){ resumeGame(); }

if((e.key==='r'||e.key==='R') && (state===State.OVER||state===State.PAUSE)){ restartGame(); }

},{passive:false});

addEventListener('keyup',e=>keys.delete(e.key));

// touch buttons

const leftBtn=document.getElementById('left');

const rightBtn=document.getElementById('right');

const bindHold=(el, on, off)=>{let holding=false;

const down=()=>{holding=true; on()};

const up=()=>{holding=false; off()};

el.addEventListener('touchstart',e=>{e.preventDefault();down()},{passive:false});

el.addEventListener('touchend',up); el.addEventListener('touchcancel',up);

el.addEventListener('mousedown',down); el.addEventListener('mouseup',up); el.addEventListener('mouseleave',up);

};

bindHold(leftBtn, ()=>player.moveLeft=true, ()=>player.moveLeft=false);

bindHold(rightBtn, ()=>player.moveRight=true, ()=>player.moveRight=false);

// HUD controls

const btnSound=document.getElementById('toggle-sound');

const btnPause=document.getElementById('pause');

const btnRestart=document.getElementById('restart');

btnSound.onclick=()=>{

const pressed = btnSound.getAttribute('aria-pressed')==='true';

const next=!pressed;

btnSound.setAttribute('aria-pressed',String(next));

btnSound.textContent = next ? '🔊 Âm' : '🔇 Tắt âm';

AudioSys.enable(next);

AudioSys.resume();

};

btnPause.onclick=()=>{ if(state===State.PLAY) pauseGame(); else if(state===State.PAUSE) resumeGame(); };

btnRestart.onclick=()=>restartGame();

// --- Game flow

let last=performance.now(), accSpawn=0;

function startGame(){

state=State.PLAY;

world.score=0; world.combo=1; world.lives=3; world.timeLeft=90; world.slow=0; world.speedScale=1;

player.x=baseW/2; player.vx=0;

items.length=0; accSpawn=0;

AudioSys.resume();

}

function pauseGame(){ state=State.PAUSE; }

function resumeGame(){ state=State.PLAY; last=performance.now(); }

function endGame(){

state=State.OVER;

if(world.score>world.hi){ world.hi=world.score; localStorage.setItem('tet2026_hi', String(world.hi)); }

}

function restartGame(){ startGame(); }

// --- Update

function update(dt){

// time & difficulty

const slowFactor = world.slow>0 ? 0.4 : 1;

if(state===State.PLAY){

world.timeLeft = Math.max(0, world.timeLeft - dt);

world.speedScale = Math.min(2.2, world.speedScale + dt*0.02);

if(world.slow>0) world.slow = Math.max(0, world.slow - dt);

if(world.timeLeft<=0) endGame();

}

// player movement

const moveLeft = keys.has('ArrowLeft') || keys.has('a') || keys.has('A') || player.moveLeft;

const moveRight = keys.has('ArrowRight') || keys.has('d') || keys.has('D') || player.moveRight;

player.vx = (moveRight?1:0) - (moveLeft?1:0);

player.x = clamp(player.x + player.vx * player.speed * dt, 60, baseW-60);

// spawn logic

const spawnRate = 0.8 / world.speedScale; // seconds

accSpawn += dt;

while(accSpawn > spawnRate){

spawnItem(); accSpawn -= spawnRate;

}

// update items

for(let i=items.length-1;i>=0;i--){

const it=items[i];

it.vy += dt*10;

it.y += it.vy * dt * world.speedScale * slowFactor;

it.rot += it.vr * dt;

// collision

if(collidePlayer(it)){

if(it.type===TYPES.LIXI){

world.score += Math.floor(10*world.combo);

world.combo = Math.min(10, world.combo + 0.1);

AudioSys.lixi();

}else if(it.type===TYPES.BANH){

world.score += 50;

world.lives = Math.min(3, world.lives+1);

world.combo = Math.min(10, world.combo + 0.5);

AudioSys.banh();

}else if(it.type===TYPES.HOA){

world.slow = 3;

world.combo = Math.min(10, world.combo + 0.3);

AudioSys.hoa();

}else{

world.lives -= 1;

world.combo = 1;

AudioSys.phaono();

if(world.lives<=0){ endGame(); }

}

items.splice(i,1);

continue;

}

// out of screen

if(it.y > baseH+60){ items.splice(i,1); }

}

// HUD

document.getElementById('score').textContent = `Điểm: ${world.score}`;

document.getElementById('combo').textContent = `Combo: x${world.combo.toFixed(1)}`;

document.getElementById('lives').textContent = `Mạng: ${world.lives}`;

document.getElementById('time').textContent = `Thời gian: ${Math.ceil(world.timeLeft)}s`;

btnPause.textContent = state===State.PAUSE ? '▶️ Tiếp tục' : '⏸️ Tạm dừng';

}

function collidePlayer(it){

const pw=player.width, ph=player.height;

const px=player.x - pw/2, py=player.y - ph/2;

const iw=it.size*0.9, ih=it.size*0.9;

const ix=it.x - iw/2, iy=it.y - ih/2;

return !(px+pw<ix || px>ix+iw || py+ph<iy || py>iy+ih);

}

// --- Render

function draw(t){

drawBackground(t);

// ground line

ctx.fillStyle='#11162e'; ctx.fillRect(0, baseH-40, baseW, 40);

// items

for(const it of items) drawItem(it);

// player

drawPlayer();

// overlays

if(state===State.MENU){

drawTitle('Tết 2026 – Bắt Lì Xì!', 'Nhấn Enter để bắt đầu • ← → để di chuyển • Bắt lì xì, né pháo nổ');

drawBadge();

}else if(state===State.PAUSE){

drawCenter('⏸️ Tạm dừng\nNhấn P để tiếp tục');

}else if(state===State.OVER){

drawCenter(`🎉 Hết giờ!\nĐiểm: ${world.score}\nKỷ lục: ${world.hi}\nNhấn R để chơi lại`);

}

// slow-mo vignette

if(world.slow>0){

ctx.fillStyle='rgba(251, 191, 36, 0.12)';

ctx.fillRect(0,0,baseW,baseH);

}

}

function drawTitle(title, subtitle){

ctx.fillStyle='rgba(0,0,0,0.55)';

ctx.fillRect(40,60,baseW-80,180);

ctx.fillStyle='#e11d48';

ctx.font='bold 46px ui-sans-serif,Segoe UI,Roboto';

ctx.textAlign='center';

ctx.fillText(title, baseW/2, 140);

ctx.fillStyle='#f8fafc';

ctx.font='20px ui-sans-serif,Segoe UI,Roboto';

ctx.fillText(subtitle, baseW/2, 180);

ctx.font='18px ui-sans-serif,Segoe UI,Roboto';

ctx.fillText(`Mục tiêu: ghi thật nhiều điểm trong 90 giây!`, baseW/2, 210);

}

function drawCenter(text){

ctx.fillStyle='rgba(0,0,0,0.55)'; ctx.fillRect(120,130,baseW-240,baseH-260);

ctx.fillStyle='#f8fafc'; ctx.textAlign='center';

ctx.font='bold 34px ui-sans-serif,Segoe UI,Roboto';

const lines=String(text).split('\n');

let y=baseH/2 - (lines.length-1)*24;

for(const ln of lines){ ctx.fillText(ln, baseW/2, y); y+=48; }

}

function drawBadge(){

ctx.textAlign='left';

ctx.font='16px ui-sans-serif,Segoe UI,Roboto';

ctx.fillStyle='#93c5fd';

ctx.fillText(`Kỷ lục cá nhân: ${world.hi} điểm`, 54, 250);

ctx.fillStyle='#cbd5e1';

ctx.fillText(`Mẹo: Bánh chưng (+50 & hồi 1 mạng), Hoa mai (làm chậm 3s), Pháo nổ (-1 mạng).`, 54, 278);

}

// --- Main loop

function loop(now){

const dt=Math.min(0.05,(now-last)/1000);

last=now;

if(state===State.PLAY) update(dt);

draw(now/1000);

requestAnimationFrame(loop);

}

requestAnimationFrame(loop);

</script>

</body>

</html>

Hướng dẫn cài đặt

Tạo file index.html
Dán toàn bộ code vào
Mở bằng Chrome, Firefox hoặc Safari
Tùy chỉnh theo nhu cầu:
- Thay hình bao lì xì
- Thay tốc độ rơi
- Thêm âm thanh Tết
- Thêm nút bắt đầu/chơi lại
- Gắn API quay số trúng thưởng

Cách tùy chỉnh mini game theo thương hiệu

Bạn có thể đổi:

Logo doanh nghiệp
Màu sắc giao diện
Nội dung chúc Tết
Thời gian chơi hoặc độ khó
Thêm bảng xếp hạng theo điểm

Nếu bạn muốn mình chỉnh sửa theo đúng phong cách của bạn (ví dụ: Tết 2026, rồng vàng, đào mai, phong thủy…), chỉ cần gửi yêu cầu.

Kết luận

Game Tết 2026 dạng giật lì xì là lựa chọn tuyệt vời cho các chiến dịch marketing dịp đầu năm.
Mã nguồn nhẹ, dễ tùy chỉnh và phù hợp để thu hút người chơi trong mọi sự kiện.

👉 Nếu bạn cần thêm hiệu ứng pháo hoa, thêm âm thanh, hoặc biến game thành phiên bản quay thưởng có tỉ lệ, mình có thể chỉnh sửa ngay.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Share Code WordPress, Topcode và Sharecode.vn – Có an toàn không?

Mục LụcGiới thiệu game “Giật Lì Xì Tết 2026”Share Code Game Tết Giật Lì Xì (HTML + CSS + JS)Hướng dẫn cài đặtCách tùy chỉnh...
Tổng Hợp Những Tính Năng Mới Nổi Bật Của WordPress 6.9

WordPress 6.9 chính thức ra mắt vào ngày 02/12/2025, mang theo một loạt cải tiến quan trọng tập trung vào Phase 3 của Gutenberg: Collaboration...
Mua Hosting và Máy chủ cao cấp tại AZDIGI có uy tín không?

Mục LụcGiới thiệu game “Giật Lì Xì Tết 2026”Share Code Game Tết Giật Lì Xì (HTML + CSS + JS)Hướng dẫn cài đặtCách tùy chỉnh...
Những bước đơn giản để tối ưu SEO cho website mới của bạn

Mục LụcGiới thiệu game “Giật Lì Xì Tết 2026”Share Code Game Tết Giật Lì Xì (HTML + CSS + JS)Hướng dẫn cài đặtCách tùy chỉnh...
Google Discover là gì? Tìm hiểu về tính năng này

Mục LụcGiới thiệu game “Giật Lì Xì Tết 2026”Share Code Game Tết Giật Lì Xì (HTML + CSS + JS)Hướng dẫn cài đặtCách tùy chỉnh...
Tổng hợp kiến thức toàn diện về SEO Google cho người mới bắt đầu

Mục LụcGiới thiệu game “Giật Lì Xì Tết 2026”Share Code Game Tết Giật Lì Xì (HTML + CSS + JS)Hướng dẫn cài đặtCách tùy chỉnh...
Hosting Sinh Viên Giá Rẻ – Chất Lượng – Uy Tín tại Muathemewpgiare.com

Bạn là sinh viên, người mới bắt đầu làm website, hoặc đang cần một gói hosting giá rẻ nhưng vẫn đảm bảo tốc độ –...
Avada vs Flatsome – Đâu là theme bán hàng tốt nhất cho WordPress & WooCommerce?

Mục LụcGiới thiệu game “Giật Lì Xì Tết 2026”Share Code Game Tết Giật Lì Xì (HTML + CSS + JS)Hướng dẫn cài đặtCách tùy chỉnh...
ThemeForest là gì? Giải thích chi tiết & Hướng dẫn mua theme WordPress siêu đơn giản (chuẩn SEO – Update 2025)

Nếu bạn đang xây dựng website và cảm thấy như lạc vào “ma trận” theme WordPress, thì xin chúc mừng – bạn sắp khám phá...
CodeCanyon – Kho plugin, script và source code cao cấp cho mọi dự án website

CodeCanyon là một trong những marketplace uy tín nhất trên thế giới dành cho lập trình viên, webmaster và nhà phát triển web. Nền tảng...
Cloudflare gặp sự cố máy chủ khiến ChatGPT Và Grok tê liệt

Cộng đồng công nghệ toàn cầu đang xôn xao khi hai siêu trí tuệ nhân tạo hàng đầu là ChatGPT (OpenAI) và Grok (xAI) đồng...
Hướng Dẫn Fix Lỗi Vui lòng bỏ chặn challenges.cloudflare.com để tiếp tục

Bạn đang hào hứng truy cập website để tải Theme/Plugin thì màn hình đứng khựng lại với dòng thông báo đỏ: “Vui lòng bỏ chặn...
Tại sao hiện tại Cloudflare bị lỗi toàn cầu

Nếu bạn đang đọc bài viết này, có lẽ bạn hoặc nhiều người dùng khác vừa trải qua những phút giây bối rối khi không...
Khuyến Mãi Black Friday Mua Theme WordPress – Tặng Ngay Drive 2TB

Black Friday đã trở lại với hàng loạt ưu đãi hấp dẫn dành cho cộng đồng làm web WordPress. Nếu bạn đang muốn sở hữu...
Tối ưu hiển thị và sao chép code trong Flatsome bằng Blockquote

Trong quá trình xây dựng website bằng Flatsome, rất nhiều người gặp phải tình trạng mỗi khi đăng code lên bài viết thì nội dung...
Dịch vụ thiết kế website uy tín tại TP. Hồ Chí Minh

Việc sở hữu một website chuyên nghiệp không chỉ giúp doanh nghiệp khẳng định thương hiệu mà còn là công cụ mạnh mẽ để tiếp...

Tìm kiếm:
Trang chủ
Giới thiệu
Danh Mục Theme WordPress
Theme WordPress Premium
Dịch vụ
- Thiết kế website bán hàng
- Dịch vụ chăm sóc website
Kho tài nguyên
Video Theme Hot
Khóa Học
Dự án thực hiện
Bài Viết
Liên hệ
Đăng nhập
🔔 0
- 🎉 Khuyến mãi lớn
  Giảm giá đến 30% tất cả theme Flatsome. ( Giá đã được khấu trừ trực tiếp)
  01/10/2025 – 07/10/2025
- 📢 Cập nhật chính sách
  Bảo hành theme trọn đời cho khách VIP.
  Áp dụng từ 02/10/2025
- 🔥 Sản phẩm mới
  Theme dịch vụ visa chuẩn SEO vừa ra mắt.
  Ra mắt: 03/10/2025
- ⚠️ Tăng giá
  Một số theme cao cấp sẽ điều chỉnh giá.
  Bắt đầu: 10/10/2025
- 💎 VIP Update (Trả phí)
  Truy cập bản cập nhật đặc biệt chỉ dành cho khách trả phí.
  01/10/2025 – 31/10/2025
- 📰 Tin tức
  Plugin bảo mật mới đã được ra mắt.
  05/10/2025
- 💡 Mẹo SEO
  Cách tối ưu Google Core Web Vitals cho WordPress.
  06/10/2025
- 🚫 Chống Copy & Bản quyền
  Nội dung website được bảo vệ bản quyền © muathemewpgiare.com.
  Hệ thống tự động chặn copy và ghi nhận vi phạm.
  Nếu copy trái phép sẽ bị report Google DMCA.
  Cập nhật: 01/10/2025
© 2025 muathemewpgiare.com