几何建筑师

<!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>
*{box-sizing:border-box;font-family:system-ui,sans-serif;}
body{background:#f0f7ff;margin:0;padding:16px;text-align:center;}
.container{max-width:900px;margin:0 auto;}
h1{color:#1f4e96;}
.info{background:#dcebff;padding:10px;border-radius:10px;margin-bottom:12px;}
.game-box{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px #0002;}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:16px 0;}
.card{border:2px solid #6688dd;padding:12px;border-radius:8px;width:140px;cursor:grab;background:#f6f9ff;}
.card:active{cursor:grabbing;}
.drop-area{border:2px dashed #999;width:220px;padding:16px;border-radius:8px;min-height:90px;}
.right{border-color:#28a745;background:#eafbed;}
.wrong{border-color:#dc3545;background:#ffe9eb;animation:shake 0.4s;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.btns button{padding:8px 14px;margin:4px;border:none;border-radius:6px;background:#3472d9;color:white;font-size:15px;}
#build{margin-top:12px;font-size:18px;font-weight:bold;color:#28a745;min-height:30px;}
</style>
</head>
<body>
<div class="container">
<h1>🏗️ 几何建筑师</h1>
<div class="info">
第 <span id="lv">1</span> 关｜连续答对：<span id="cnt">0</span>
<p>观察两个三角形已知条件，拖拽正确判定定理到方框，证明全等，加固建筑！</p>
</div>
<div class="game-box">
<div id="q">已知：△ABC与△DEF，AB=DE，BC=EF，AC=DF。请选择判定依据</div>
<div class="row">
<div draggable="true" class="card" data-ans="SSS">SSS 边边边</div>
<div draggable="true" class="card" data-ans="SAS">SAS 边角边</div>
<div draggable="true" class="card" data-ans="ASA">ASA 角边角</div>
<div draggable="true" class="card" data-ans="AAS">AAS 角角边</div>
<div draggable="true" class="card" data-ans="HL">HL 斜边直角边</div>
</div>
<div class="row">
<div class="drop-area" id="drop">拖拽判定定理到这里</div>
</div>
<div id="build"></div>
<div class="btns">
<button onclick="next()">下一关</button>
<button onclick="reset()">重置本关</button>
</div>
</div>
</div>
<script>
const levels = [
{q:"已知：△ABC与△DEF，AB=DE，BC=EF，AC=DF。",ans:"SSS",ok:"✅ 全等成立！桥梁搭建完成"},
{q:"已知：△ABC与△DEF，AB=DE，∠B=∠E，BC=EF。",ans:"SAS",ok:"✅ 全等成立！塔吊搭建完成"},
{q:"已知：△ABC与△DEF，∠A=∠D，AB=DE，∠B=∠E。",ans:"ASA",ok:"✅ 全等成立！穹顶搭建完成"},
{q:"已知：△ABC与△DEF，∠A=∠D，∠B=∠E，BC=EF。",ans:"AAS",ok:"✅ 全等成立！支撑柱加固成功"},
{q:"Rt△ABC与Rt△DEF，斜边AB=DE，直角边AC=DF。",ans:"HL",ok:"✅ 全等成立！地基加固完成"},
{q:"△ABC、△ADC共用公共边AC，AB=AD，BC=DC。",ans:"SSS",ok:"✅ 全等成立！廊道拼接成功"},
{q:"△AOB、△COD，OA=OC，对顶角∠AOB=∠COD，OB=OD。",ans:"SAS",ok:"✅ 全等成立！横梁拼接成功"}
];
let lv=0, streak=0;
const qDom=document.getElementById('q');
const lvDom=document.getElementById('lv');
const cntDom=document.getElementById('cnt');
const drop=document.getElementById('drop');
const build=document.getElementById('build');
function load(){
let d=levels[lv];
qDom.innerText=d.q;
lvDom.innerText=lv+1;
cntDom.innerText=streak;
drop.className="drop-area";
drop.innerText="拖拽判定定理到这里";
build.innerText="";
}
document.querySelectorAll('.card').forEach(card=>{
card.ondragstart=e=>{
e.dataTransfer.setData('text',card.dataset.ans);
}
})
drop.ondragover=e=>e.preventDefault();
drop.ondrop=e=>{
e.preventDefault();
let sel=e.dataTransfer.getData('text');
let d=levels[lv];
if(sel===d.ans){
drop.className="drop-area right";
drop.innerText=sel;
build.innerText=d.ok;
streak++;
if(streak>=3) build.innerText+=" 🎉解锁黄金蓝图！获得提示";
}else{
drop.className="drop-area wrong";
build.innerText="❌ 建筑倾斜！选错定理，重新思考";
streak=0;
}
cntDom.innerText=streak;
}
function next(){
lv=(lv+1)%levels.length;load();
}
function reset(){load();}
load();
</script>
</body>
</html>