commit c3f84acaef171dbb9f03ec5afa3009f06165409a
Author: M1ngdaXie <156019134+M1ngdaXie@users.noreply.github.com>
Date: Fri Mar 27 00:19:20 2026 -0700
first commit
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a4cf0fe
--- /dev/null
+++ b/README.md
@@ -0,0 +1,27 @@
+# 梅子的成语填字
+
+A Chinese idiom (成语) fill-in-the-blank game made by Mingda for his mom.
+
+## How to Play
+
+Open `index.html` in a browser. No server or installation needed.
+
+Choose a difficulty (简单 / 中等 / 困难), then fill in the missing character(s) of each idiom by tapping the options. Complete 5 questions per round.
+
+## Features
+
+- Three difficulty levels (1, 2, or 3 blanks)
+- Combo streak tracking
+- Wrong answer notebook (错题本) for review
+- Daily check-in calendar
+- Sound effects
+- Large font mode
+
+## Files
+
+| File | Description |
+|------|-------------|
+| `index.html` | Main page |
+| `style.css` | Styles |
+| `data.js` | Idiom database (~7,000 entries) |
+| `app.js` | Game logic |
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..8e8ce20
--- /dev/null
+++ b/app.js
@@ -0,0 +1,828 @@
+const DAILY_GOAL = 5,
+ ROUND_SIZE = 5;
+
+// === AUDIO with mobile unlock ===
+var AudioCtx = window.AudioContext || window.webkitAudioContext;
+var audioCtx = null,
+ audioUnlocked = false;
+function unlockAudio() {
+ if (audioUnlocked || !audioCtx) return;
+ var buf = audioCtx.createBuffer(1, 1, 22050);
+ var src = audioCtx.createBufferSource();
+ src.buffer = buf;
+ src.connect(audioCtx.destination);
+ src.start(0);
+ if (audioCtx.state === "suspended") audioCtx.resume();
+ audioUnlocked = true;
+}
+function ensureAudio() {
+ if (!audioCtx) audioCtx = new AudioCtx();
+ unlockAudio();
+}
+document.addEventListener(
+ "touchstart",
+ function () {
+ ensureAudio();
+ },
+ { once: true },
+);
+document.addEventListener(
+ "click",
+ function () {
+ ensureAudio();
+ },
+ { once: true },
+);
+function playTone(f, d, t, v) {
+ if (!state.sound) return;
+ t = t || "sine";
+ v = v || 0.3;
+ try {
+ ensureAudio();
+ var o = audioCtx.createOscillator(),
+ g = audioCtx.createGain();
+ o.type = t;
+ o.frequency.value = f;
+ g.gain.setValueAtTime(v, audioCtx.currentTime);
+ g.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + d);
+ o.connect(g);
+ g.connect(audioCtx.destination);
+ o.start();
+ o.stop(audioCtx.currentTime + d);
+ } catch (e) {}
+}
+function sfxCorrect() {
+ playTone(523, 0.12);
+ setTimeout(function () {
+ playTone(659, 0.12);
+ }, 80);
+ setTimeout(function () {
+ playTone(784, 0.2);
+ }, 160);
+}
+function sfxWrong() {
+ playTone(200, 0.15, "square", 0.2);
+ setTimeout(function () {
+ playTone(160, 0.2, "square", 0.2);
+ }, 120);
+}
+function sfxClick() {
+ playTone(440, 0.06, "sine", 0.15);
+}
+function sfxCombo() {
+ playTone(523, 0.1);
+ setTimeout(function () {
+ playTone(659, 0.1);
+ }, 60);
+ setTimeout(function () {
+ playTone(784, 0.1);
+ }, 120);
+ setTimeout(function () {
+ playTone(1047, 0.25);
+ }, 180);
+}
+function sfxComplete() {
+ [523, 587, 659, 784, 1047].forEach(function (n, i) {
+ setTimeout(function () {
+ playTone(n, 0.2, "sine", 0.25);
+ }, i * 100);
+ });
+}
+
+// === STATE ===
+const APP_VERSION = 2;
+var state = {
+ sound: true,
+ bigFont: false,
+ difficulty: 1,
+ score: 0,
+ combo: 0,
+ maxCombo: 0,
+ todayCount: 0,
+ totalCount: 0,
+ streak: 0,
+ checkinDays: [],
+ round: 0,
+ roundResults: [],
+ currentIdiom: null,
+ blankIndices: [],
+ selectedBlank: -1,
+ filledChars: {},
+ hintUsed: false,
+ answered: false,
+ usedIdiomIndices: {},
+ wrongBook: [],
+ reviewMode: false,
+};
+var currentOptions = [];
+function getToday() {
+ return new Date().toISOString().slice(0, 10);
+}
+function saveState() {
+ localStorage.setItem(
+ "chengyu_s",
+ JSON.stringify({
+ sound: state.sound,
+ bigFont: state.bigFont,
+ difficulty: state.difficulty,
+ totalCount: state.totalCount,
+ streak: state.streak,
+ checkinDays: state.checkinDays,
+ maxCombo: state.maxCombo,
+ }),
+ );
+}
+function saveWrongBook() {
+ localStorage.setItem("chengyu_wb", JSON.stringify(state.wrongBook));
+}
+function loadWrongBook() {
+ try {
+ state.wrongBook = JSON.parse(localStorage.getItem("chengyu_wb") || "[]");
+ } catch (e) {
+ state.wrongBook = [];
+ }
+}
+function addToWrongBook(idiom) {
+ var ex = null;
+ for (var i = 0; i < state.wrongBook.length; i++) {
+ if (state.wrongBook[i].w === idiom.w) {
+ ex = state.wrongBook[i];
+ break;
+ }
+ }
+ if (ex) {
+ ex.count++;
+ ex.last = getToday();
+ } else {
+ state.wrongBook.push({
+ w: idiom.w,
+ p: idiom.p,
+ e: idiom.e,
+ l: idiom.l,
+ count: 1,
+ last: getToday(),
+ });
+ }
+ saveWrongBook();
+ renderWbBadge();
+}
+function removeFromWrongBook(w) {
+ state.wrongBook = state.wrongBook.filter(function (x) {
+ return x.w !== w;
+ });
+ saveWrongBook();
+ renderWbBadge();
+}
+function renderWbBadge() {
+ var b = document.getElementById("wbBadge");
+ if (!b) return;
+ b.textContent = state.wrongBook.length;
+ b.className = "wb-badge" + (state.wrongBook.length === 0 ? " empty" : "");
+}
+function showWrongBookModal() {
+ document.getElementById("wrongBookModal").classList.add("show");
+ document.getElementById("wbCount").textContent = state.wrongBook.length;
+ var list = document.getElementById("wbList");
+ var startBtn = document.getElementById("btnStartReview");
+ if (!state.wrongBook.length) {
+ list.innerHTML = '🎉 暂无错题，梅子很棒！
';
+ startBtn.style.display = "none";
+ } else {
+ startBtn.style.display = "";
+ list.innerHTML = "";
+ var sorted = state.wrongBook.slice().sort(function (a, b) {
+ return b.count - a.count;
+ });
+ sorted.forEach(function (item) {
+ var d = document.createElement("div");
+ d.className = "wb-item";
+ d.innerHTML =
+ '' +
+ item.w +
+ '
' +
+ item.p +
+ '
' +
+ item.e +
+ '
错误 ' +
+ item.count +
+ " 次
";
+ list.appendChild(d);
+ });
+ }
+}
+function startReview() {
+ document.getElementById("wrongBookModal").classList.remove("show");
+ state.reviewMode = true;
+ state.usedIdiomIndices = {};
+ startRound();
+}
+function checkWhatsNew() {
+ var v = parseInt(localStorage.getItem("chengyu_v") || "0");
+ if (v < APP_VERSION) {
+ document.getElementById("whatsNewModal").classList.add("show");
+ }
+}
+function saveTodayState() {
+ localStorage.setItem(
+ "chengyu_t",
+ JSON.stringify({
+ d: getToday(),
+ s: state.score,
+ c: state.todayCount,
+ cb: state.combo,
+ }),
+ );
+}
+function loadState() {
+ try {
+ var s = JSON.parse(localStorage.getItem("chengyu_s") || "{}");
+ state.sound = s.sound !== undefined ? s.sound : true;
+ state.bigFont = s.bigFont || false;
+ state.totalCount = s.totalCount || 0;
+ state.streak = s.streak || 0;
+ state.checkinDays = s.checkinDays || [];
+ state.maxCombo = s.maxCombo || 0;
+ state.difficulty = s.difficulty || 1;
+ var t = JSON.parse(localStorage.getItem("chengyu_t") || "{}");
+ if (t.d === getToday()) {
+ state.score = t.s || 0;
+ state.todayCount = t.c || 0;
+ state.combo = t.cb || 0;
+ }
+ updateStreak();
+ } catch (e) {}
+}
+function updateStreak() {
+ var today = getToday(),
+ days = state.checkinDays;
+ if (!days.length) {
+ state.streak = 0;
+ return;
+ }
+ var sorted = days.slice().sort().reverse();
+ var streak = 0,
+ cd = new Date(today + "T00:00:00");
+ if (sorted[0] === today) {
+ for (var i = 0; i < sorted.length; i++) {
+ var e = new Date(cd);
+ e.setDate(e.getDate() - i);
+ if (sorted[i] === e.toISOString().slice(0, 10)) streak++;
+ else break;
+ }
+ } else {
+ var y = new Date(cd);
+ y.setDate(y.getDate() - 1);
+ var ys = y.toISOString().slice(0, 10);
+ if (sorted[0] === ys) {
+ for (var i = 0; i < sorted.length; i++) {
+ var e = new Date(y);
+ e.setDate(e.getDate() - i);
+ if (sorted[i] === e.toISOString().slice(0, 10)) streak++;
+ else break;
+ }
+ }
+ }
+ state.streak = streak;
+}
+function tryCheckin() {
+ var t = getToday();
+ if (state.todayCount >= DAILY_GOAL && state.checkinDays.indexOf(t) === -1) {
+ state.checkinDays.push(t);
+ if (state.checkinDays.length > 60)
+ state.checkinDays = state.checkinDays.slice(-60);
+ updateStreak();
+ saveState();
+ return true;
+ }
+ return false;
+}
+
+// === GAME LOGIC ===
+function pickIdiom() {
+ if (state.reviewMode && state.wrongBook.length) {
+ var pool = state.wrongBook.filter(function (x) {
+ return !state.usedIdiomIndices[x.w];
+ });
+ if (!pool.length) {
+ state.usedIdiomIndices = {};
+ pool = state.wrongBook.slice();
+ }
+ var item = pool[Math.floor(Math.random() * pool.length)];
+ state.usedIdiomIndices[item.w] = 1;
+ return item;
+ }
+ var pool = IDIOMS.filter(function (i) {
+ return i.l <= state.difficulty;
+ });
+ var a = 0,
+ idx;
+ do {
+ idx = Math.floor(Math.random() * pool.length);
+ a++;
+ } while (state.usedIdiomIndices[pool[idx].w] && a < 100);
+ state.usedIdiomIndices[pool[idx].w] = 1;
+ return pool[idx];
+}
+function generateBlanks(w, d) {
+ var n = d === 1 ? 1 : d === 2 ? 2 : 3;
+ var idx = [0, 1, 2, 3];
+ for (var i = 3; i > 0; i--) {
+ var j = Math.floor(Math.random() * (i + 1));
+ var tmp = idx[i];
+ idx[i] = idx[j];
+ idx[j] = tmp;
+ }
+ return idx.slice(0, n).sort();
+}
+function generateOptions(idiom, blanks) {
+ var correct = blanks.map(function (i) {
+ return idiom.w[i];
+ });
+ var decoyN = blanks.length <= 1 ? 3 : blanks.length === 2 ? 4 : 5;
+ var allC = {};
+ IDIOMS.forEach(function (it) {
+ for (var i = 0; i < it.w.length; i++) allC[it.w[i]] = 1;
+ });
+ var pool = Object.keys(allC).filter(function (c) {
+ return correct.indexOf(c) === -1;
+ });
+ var decoys = [],
+ used = {};
+ correct.forEach(function (c) {
+ used[c] = 1;
+ });
+ while (decoys.length < decoyN && pool.length) {
+ var i = Math.floor(Math.random() * pool.length);
+ if (!used[pool[i]]) {
+ decoys.push(pool[i]);
+ used[pool[i]] = 1;
+ }
+ pool.splice(i, 1);
+ }
+ var opts = correct.concat(decoys);
+ for (var i = opts.length - 1; i > 0; i--) {
+ var j = Math.floor(Math.random() * (i + 1));
+ var tmp = opts[i];
+ opts[i] = opts[j];
+ opts[j] = tmp;
+ }
+ return opts;
+}
+
+// === RENDER ===
+function renderStats() {
+ document.getElementById("statScore").textContent = state.score;
+ document.getElementById("statCombo").textContent = state.combo;
+ document.getElementById("statTotal").textContent = state.totalCount;
+ document.getElementById("statStreak").textContent = state.streak;
+}
+function renderProgress() {
+ var bar = document.getElementById("progressBar");
+ bar.innerHTML = "";
+ for (var i = 0; i < ROUND_SIZE; i++) {
+ var d = document.createElement("div");
+ d.className =
+ "progress-dot" +
+ (i < state.round
+ ? state.roundResults[i]
+ ? " done"
+ : " skip"
+ : i === state.round
+ ? " current"
+ : "");
+ bar.appendChild(d);
+ }
+}
+function renderIdiom() {
+ var el = document.getElementById("idiomDisplay");
+ el.innerHTML = "";
+ var idiom = state.currentIdiom,
+ pp = idiom.p.split(" ");
+ for (var i = 0; i < idiom.w.length; i++) {
+ var box = document.createElement("div");
+ box.className = "char-box";
+ if (state.blankIndices.indexOf(i) !== -1) {
+ box.classList.add("blank");
+ if (state.filledChars[i]) {
+ box.classList.remove("blank");
+ box.classList.add("filled");
+ box.textContent = state.filledChars[i];
+ } else {
+ box.textContent = "?";
+ if (state.selectedBlank === i) box.classList.add("selected");
+ }
+ (function (idx) {
+ box.addEventListener("click", function () {
+ selectBlank(idx);
+ });
+ })(i);
+ } else {
+ box.textContent = idiom.w[i];
+ var py = document.createElement("span");
+ py.className = "pinyin-hint";
+ py.textContent = pp[i] || "";
+ box.appendChild(py);
+ }
+ el.appendChild(box);
+ }
+}
+function renderOptions(opts) {
+ var grid = document.getElementById("optionsGrid");
+ grid.innerHTML = "";
+ var filled = Object.keys(state.filledChars).map(function (k) {
+ return state.filledChars[k];
+ });
+ opts.forEach(function (ch) {
+ var btn = document.createElement("button");
+ btn.className = "option-btn";
+ btn.textContent = ch;
+ if (filled.indexOf(ch) !== -1) btn.classList.add("used");
+ if (state.answered) btn.classList.add("disabled");
+ btn.addEventListener("click", function () {
+ selectOption(ch);
+ });
+ grid.appendChild(btn);
+ });
+}
+function renderCombo() {
+ var el = document.getElementById("comboDisplay");
+ var toast = document.getElementById("comboToast");
+ if (state.combo >= 3) {
+ var msgs = [
+ "梅子不错哦~",
+ "太棒了梅子!",
+ "梅子真厉害!",
+ "学富五车!",
+ "梅子无人能挡!",
+ "登峰造极!",
+ ];
+ var i = Math.min(Math.floor((state.combo - 3) / 2), msgs.length - 1);
+ var txt = "🔥 连击 ×" + state.combo + " " + msgs[i];
+ el.innerHTML = '' + txt + "";
+ if (toast) {
+ toast.textContent = txt;
+ toast.classList.add("show");
+ clearTimeout(window._comboTimer);
+ window._comboTimer = setTimeout(function () {
+ toast.classList.remove("show");
+ }, 2200);
+ }
+ } else {
+ el.innerHTML = "";
+ if (toast) toast.classList.remove("show");
+ }
+}
+
+// === ACTIONS ===
+function startRound() {
+ state.round = 0;
+ state.roundResults = [];
+ nextQuestion();
+}
+function nextQuestion() {
+ if (state.round >= ROUND_SIZE) {
+ finishRound();
+ return;
+ }
+ state.currentIdiom = pickIdiom();
+ state.blankIndices = generateBlanks(state.currentIdiom.w, state.difficulty);
+ state.selectedBlank = state.blankIndices[0];
+ state.filledChars = {};
+ state.hintUsed = false;
+ state.answered = false;
+ currentOptions = generateOptions(state.currentIdiom, state.blankIndices);
+ document.getElementById("btnNext").style.display = "none";
+ document.getElementById("btnHint").style.display = "";
+ document.getElementById("btnHint").style.opacity = "1";
+ document.getElementById("btnHint").style.pointerEvents = "";
+ document.getElementById("btnSkip").style.display = "";
+ document.getElementById("resultArea").innerHTML = "";
+ document.getElementById("optLabel").style.display = "";
+ renderProgress();
+ renderIdiom();
+ renderOptions(currentOptions);
+ renderCombo();
+ renderStats();
+}
+function selectBlank(i) {
+ if (state.answered) return;
+ if (state.filledChars[i]) {
+ delete state.filledChars[i];
+ state.selectedBlank = i;
+ sfxClick();
+ renderIdiom();
+ renderOptions(currentOptions);
+ return;
+ }
+ state.selectedBlank = i;
+ sfxClick();
+ renderIdiom();
+}
+function selectOption(ch) {
+ if (state.answered || state.selectedBlank === -1) return;
+ sfxClick();
+ state.filledChars[state.selectedBlank] = ch;
+ var next = -1;
+ for (var j = 0; j < state.blankIndices.length; j++) {
+ if (!state.filledChars[state.blankIndices[j]]) {
+ next = state.blankIndices[j];
+ break;
+ }
+ }
+ state.selectedBlank = next;
+ renderIdiom();
+ renderOptions(currentOptions);
+ var allFilled = true;
+ for (var j = 0; j < state.blankIndices.length; j++) {
+ if (!state.filledChars[state.blankIndices[j]]) {
+ allFilled = false;
+ break;
+ }
+ }
+ if (allFilled) checkAnswer();
+}
+function checkAnswer() {
+ state.answered = true;
+ var idiom = state.currentIdiom,
+ ok = true;
+ state.blankIndices.forEach(function (i) {
+ if (state.filledChars[i] !== idiom.w[i]) ok = false;
+ });
+ var boxes = document.querySelectorAll(".char-box");
+ state.blankIndices.forEach(function (i) {
+ boxes[i].classList.remove("filled");
+ boxes[i].classList.add(
+ state.filledChars[i] === idiom.w[i] ? "correct" : "wrong",
+ );
+ });
+ if (ok) {
+ state.combo++;
+ if (state.combo > state.maxCombo) state.maxCombo = state.combo;
+ state.score += Math.round(
+ state.difficulty *
+ 10 *
+ (state.hintUsed ? 0.5 : 1) *
+ (1 + state.combo * 0.1),
+ );
+ state.todayCount++;
+ state.totalCount++;
+ state.roundResults.push(true);
+ state.combo >= 5 ? sfxCombo() : sfxCorrect();
+ if (state.reviewMode) removeFromWrongBook(idiom.w);
+ var nc = tryCheckin();
+ showResult(true, nc);
+ } else {
+ state.combo = 0;
+ state.roundResults.push(false);
+ sfxWrong();
+ addToWrongBook(idiom);
+ setTimeout(function () {
+ state.blankIndices.forEach(function (i) {
+ boxes[i].textContent = idiom.w[i];
+ boxes[i].classList.remove("wrong");
+ boxes[i].classList.add("correct");
+ });
+ }, 800);
+ showResult(false, false);
+ }
+ renderOptions(currentOptions);
+ renderCombo();
+ renderStats();
+ renderProgress();
+ saveTodayState();
+ saveState();
+ document.getElementById("btnNext").style.display = "";
+ document.getElementById("btnHint").style.display = "none";
+ document.getElementById("btnSkip").style.display = "none";
+}
+function showResult(ok, nc) {
+ var idiom = state.currentIdiom,
+ a = document.getElementById("resultArea");
+ var ch = "";
+ if (nc)
+ ch =
+ '🎉 梅子今日打卡成功！ 连续 ' +
+ state.streak +
+ " 天
";
+ var pg = "";
+ if (!nc && state.todayCount < DAILY_GOAL)
+ pg =
+ '今日进度：' +
+ state.todayCount +
+ "/" +
+ DAILY_GOAL +
+ " 题（完成" +
+ DAILY_GOAL +
+ "题即可打卡）
";
+ a.innerHTML =
+ '' +
+ (ok ? "✅ 回答正确！" : "❌ 答错了~") +
+ (ok && state.combo >= 3 ? " 🔥" : "") +
+ '
' +
+ idiom.w +
+ '
' +
+ idiom.p +
+ '
释义：' +
+ idiom.e +
+ "
" +
+ ch +
+ pg +
+ "
' +
+ (wasReview ? "📖 错题练习结束!" : "🏆 本轮结束!") +
+ '
' +
+ c +
+ " / " +
+ ROUND_SIZE +
+ '
' +
+ msg +
+ '
' +
+ reviewBtn +
+ "
+
今日 0分
+
+
+ 🔥 0 连击
+
+
+
+ 📖 错题本 0
+
+
+ 00
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📖
+
+
错题本
+
+ 答错的成语自动收录，随时可以回来专项练习，越练越强！
+
+
+
+
+
🎨
+
+
全新界面
+
+ 更清爽的布局，手机上看更舒服，为妈妈优化 💕
+
+
+
+
+
+
+