SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课堂知识消消乐</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #b3e5fc;
  font-family: "Arial Rounded MT Bold", "黑体", sans-serif;
}
h1 {
  text-align: center;
  font-size: 42px;
  color: #000;
  font-weight: 900;
  margin: 20px 0;
  text-shadow: 2px 2px 3px #fff;
}
.time-bar {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 25px;
}
.time-bar input {
  width: 70px;
  font-size: 26px;
  text-align: center;
  border: 3px solid #222;
  border-radius: 10px;
  padding: 5px;
  font-weight: bold;
  margin: 0 5px;
}
.time-bar button {
  font-size: 24px;
  padding: 6px 25px;
  font-weight: bold;
  border-radius: 8px;
  border: none;
  background: #4CAF50;
  color: #fff;
  cursor: pointer;
  margin-left: 10px;
}
.game-box {
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin-bottom: 100px;
}
.bubble {
  padding: 16px 28px;
  border-radius: 60px;
  font-size: 24px;
  font-weight: bold;
  color: #000;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
.bubble.highlight {
  transform: scale(1.1);
  filter: brightness(1.2);
}
.bubble.hide {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.import-bottom {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
}
#importBtn {
  font-size: 28px;
  padding: 12px 45px;
  border-radius: 12px;
  border: none;
  background: #ff9800;
  color: #000;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 12px #888;
}
/* 导入弹窗 */
.pop-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
.pop-content {
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  width: 90%;
  max-width: 520px;
}
.pop-content p {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}
.pop-content textarea {
  width: 100%;
  height: 230px;
  font-size: 20px;
  padding: 12px;
  border: 3px solid #333;
  border-radius: 10px;
  resize: none;
}
.pop-btn {
  margin-top: 20px;
  text-align: center;
}
.pop-btn button {
  font-size: 24px;
  padding: 8px 35px;
  margin: 0 15px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  border: none;
}
/* 结果弹窗 */
.result-msg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  padding: 50px 80px;
  font-size: 40px;
  font-weight: 900;
  border-radius: 20px;
  box-shadow: 0 0 30px #000;
  display: none;
  z-index: 100;
}
</style>
</head>
<body>

<h1>课堂知识消消乐</h1>

<div class="time-bar">
  倒计时：
  <input type="number" id="minInput" value="2">
  分
  <input type="number" id="secInput" value="0">
  秒
  <button id="startBtn">开始游戏</button>
</div>

<div class="game-box" id="gameContainer"></div>

<div class="import-bottom">
  <button id="importBtn">导入知识点</button>
</div>

<!-- 导入弹窗 -->
<div class="pop-mask" id="popMask">
  <div class="pop-content">
    <p>每行一对知识点，用逗号隔开</p >
    <textarea id="textArea" placeholder="例子：
孔子,儒家创始人
牛顿,万有引力
氧气,支持燃烧"></textarea>
    <div class="pop-btn">
      <button style="background:#4CAF50;color:#fff;" onclick="doImport()">确定导入</button>
      <button style="background:#999;color:#fff;" onclick="closePop()">取消</button>
    </div>
  </div>
</div>

<!-- 结果提示 -->
<div class="result-msg" id="resultMsg"></div>

<script>
// 气泡配色
const colorArr = [
  '#ffcdd2','#c8e6c9','#bbdefb',
  '#ffe082','#ce93d8','#80deea','#ffccbc','#d1c4e9'
];

let pairList = [];
let firstBubble = null;
let timer = null;
let totalTime = 120;
let gameIsRun = false;

// 打开导入弹窗
document.getElementById('importBtn').onclick = function(){
  document.getElementById('popMask').style.display = 'flex';
}
function closePop(){
  document.getElementById('popMask').style.display = 'none';
}

// 导入解析
function doImport(){
  let text = document.getElementById('textArea').value.trim();
  if(!text){
    alert('请输入知识点内容');
    return;
  }
  let lines = text.split('\n');
  pairList = [];
  for(let line of lines){
    line = line.trim();
    if(!line) continue;
    let sp = line.split(',');
    if(sp.length >= 2){
      let a = sp[0].trim();
      let b = sp[1].trim();
      pairList.push({a,b});
    }
  }
  closePop();
  createBubbles();
}

// 生成气泡
function createBubbles(){
  let wrap = document.getElementById('gameContainer');
  wrap.innerHTML = '';
  firstBubble = null;

  let bubbleArr = [];
  pairList.forEach((item,idx)=>{
    bubbleArr.push({txt:item.a, id:idx});
    bubbleArr.push({txt:item.b, id:idx});
  });

  // 打乱顺序
  bubbleArr.sort(() => Math.random() - 0.5);

  bubbleArr.forEach(item=>{
    let div = document.createElement('div');
    div.className = 'bubble';
    div.innerText = item.txt;
    div.dataset.id = item.id;
    div.style.background = colorArr[item.id % colorArr.length];
    div.onclick = function(){
      if(!gameIsRun) return;
      selectBubble(this);
    }
    wrap.appendChild(div);
  });
}

// 点击气泡逻辑
function selectBubble(dom){
  if(firstBubble === dom) return;

  if(!firstBubble){
    firstBubble = dom;
    dom.classList.add('highlight');
  }else{
    // 第二次点击
    let id1 = firstBubble.dataset.id;
    let id2 = dom.dataset.id;

    if(id1 === id2){
      // 匹配成功 消除
      firstBubble.classList.add('hide');
      dom.classList.add('hide');
    }
    // 取消高亮
    firstBubble.classList.remove('highlight');
    firstBubble = null;

    // 检查是否全部消除
    setTimeout(checkAllClear,300);
  }
}

// 检查全部消除
function checkAllClear(){
  let allBubble = document.querySelectorAll('.bubble');
  let remain = 0;
  allBubble.forEach(b=>{
    if(!b.classList.contains('hide')) remain++;
  });
  if(remain === 0){
    gameIsRun = false;
    clearInterval(timer);
    showResult('�� 挑战成功！');
  }
}

// 开始倒计时游戏
document.getElementById('startBtn').onclick = function(){
  if(pairList.length === 0){
    alert('请先导入知识点！');
    return;
  }
  let m = parseInt(document.getElementById('minInput').value) || 0;
  let s = parseInt(document.getElementById('secInput').value) || 0;
  totalTime = m * 60 + s;
  if(totalTime <= 0){
    alert('时间必须大于0');
    return;
  }

  gameIsRun = true;
  let left = totalTime;

  if(timer) clearInterval(timer);
  timer = setInterval(()=>{
    left--;
    let lm = Math.floor(left / 60);
    let ls = left % 60;
    document.getElementById('minInput').value = lm;
    document.getElementById('secInput').value = ls;

    if(left <= 0){
      clearInterval(timer);
      gameIsRun = false;
      // 还有没消除的
      let remain = document.querySelectorAll('.bubble:not(.hide)').length;
      if(remain > 0){
        showResult('⏰ 挑战失败！');
      }
    }
  },1000);
}

// 弹出结果
function showResult(txt){
  let msg = document.getElementById('resultMsg');
  msg.innerText = txt;
  msg.style.display = 'block';
  setTimeout(()=>{
    msg.style.display = 'none';
  },2500);
}
</script>

</body>
</html>