File: /var/www/html/simulink/byd/BYD_Qin_plus_DMi_HV_Stucture.html
<!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>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.game-container {
background-color: #ffffff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
width: 95%;
max-width: 950px;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.info-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #e9ecef;
border-radius: 8px;
margin-bottom: 20px;
font-size: 1.2em;
}
.timer-container { color: #1a73e8; font-weight: bold; }
#timer { display: inline-block; min-width: 50px; }
.results-container { color: #555; font-weight: 500; }
#diagram-wrapper {
position: relative;
width: 100%;
margin: 0 auto;
background-color: #030D19; /*Svg的背景色*/
overflow: hidden; /* 确保内容不会超出容器 */
}
.diagram-svg {
width: 100%;
height: auto;
display: block;
}
/* SVG 元素样式 */
.axle-bg { fill: #030D19; }
.wheel { fill: #7a7a7a; }
.axle { fill: #b0b0b0; }
.component-box {
fill: #fbe5d6; /* 浅橙色背景 */
stroke: #b1a091;
stroke-width: 1;
}
.battery { fill: #fbe5d6; }
.motor-symbol {
fill: none;
stroke: #888;
stroke-width: 2;
}
.component-label {
font-size: 17px;
text-anchor: middle;
fill: #333;
font-family: sans-serif;
}
.wiring .wire {
fill: none;
stroke: #ed7d31; /* 橙色线 */
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.drop-zone {
position: absolute;
border: 2px dashed #aaa;
background-color: #fbd7bb;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.8vw; /* 字体大小根据视口宽度自适应 */
font-weight: bold;
color: #333;
transition: background-color 0.3s, border-color 0.3s;
overflow: hidden;
box-sizing: border-box;
z-index: 10;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* 为数字添加阴影，使其更清晰 */
}
/* === 针对SVG的精准定位 (基于百分比) === */
/* === top: 方框上边缘距离SVG画布顶部的百分比。值越小，越靠上。=== */
/* === left: 方框左边缘距离SVG画布左侧的百分比。值越小，越靠左。=== */
/* === width: 方框的宽度（占SVG画布宽度的百分比）。=== */
height: 方框的高度（占SVG画布高度的百分比）。=== */
/* 车轮组件 */
/* 左车轮 */
.wheel-assembly .wheel:nth-of-type(1) { /* 假设是第一个车轮 */
/* 在 SVG 中，车轮的位置已经在 html 中定义了，这里不需要额外的 CSS 定位 */
}
.wheel-assembly .wheel:nth-of-type(3) { /* 假设是第三个车轮 */
/* 同上 */
}
/* 车轴组件 */
.wheel-assembly .axle:nth-of-type(1) {
/* 同上 */
}
.wheel-assembly .axle:nth-of-type(2) {
/* 同上 */
}
/* 主要组件的Drop Zone定位 */
/* 1. ACP */
#drop-1 { top: 27.6%; left: 1.5%; width: 6.5%; height: 8%; }
/* 2. PTC */
#drop-2 { top: 14.3%; left: 22.6%; width: 6.5%; height: 8%; }
/* 3. PDU */
#drop-3 { top: 27.0%; left: 20.7%; width: 9.5%; height: 9%; }
/* 5. IPU */
#drop-5 { top: 46.0%; left: 21.4%; width: 8%; height: 10%; }
/* 4. 双电机 */
#drop-4 { top: 43.7%; left: 8%; width: 11%; height: 18%; }
/* 6. 动力电池 */
#drop-6 { top: 34%; left: 33%; width: 32%; height: 28%; }
/* 7. OBC */
#drop-7 { top: 27.3%; left: 68.6%; width: 6.3%; height: 6.7%; }
/* 8. 交流充电口 */
#drop-8 { top: 11.3%; left: 69%; width: 5%; height: 6%; }
/* 9. 直流充电口 */
/*#drop-9 { top: 11.3%; left: 77.2%; width: 5%; height: 6%; }*/
/* 10. 直流充电配电盒 */
/*#drop-10 { top: 43.0%; left: 91.5%; width: 7%; height: 8%; }*/
/* 拖拽和放置时的样式 */
.drop-zone.drag-over { background-color: rgba(144, 238, 144, 0.7); border-color: #28a745; }
.drop-zone.correct { background-color: rgba(40, 167, 69, 0.8); border: 2px solid #1a5d2a; color: white; }
.drop-zone.incorrect { background-color: rgba(220, 53, 69, 0.8); border: 2px solid #8d1c27; color: white; }
#answer-bank { margin-top: 25px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #dee2e6; }
.answers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; min-height: 50px; padding: 10px; border: 2px dashed transparent; transition: background-color 0.3s, border-color 0.3s; }
.answers.drag-over { background-color: #e9ecef; border-color: #007bff; }
.draggable {
padding: 10px 15px;
background-color: #007bff;
color: white;
border-radius: 6px;
cursor: grab;
transition: transform 0.2s, box-shadow 0.2s;
user-select: none;
font-size: 0.9em;
flex-shrink: 0;
}
.draggable.dragging { opacity: 0.5; cursor: grabbing; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: scale(1.05); }
/* 当答案被放置在目标区域时，其样式 */
.drop-zone .draggable {
width: 100%;
height: 100%;
padding: 2px;
font-size: 13px;
line-height: 1.2;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
cursor: grab;
background-color: #6c757d !important; /* 覆盖默认的答案颜色 */
border: none; /* 移除拖拽元素的边框 */
border-radius: 0; /* 移除拖拽元素的圆角 */
color: white; /* 确保文字颜色正确 */
}
.drop-zone.correct .draggable,
.drop-zone.incorrect .draggable {
cursor: default;
background-color: transparent !important; /* 放置后移除背景色 */
color: white; /* 确保文本仍然可见 */
}
#submit-btn { margin-top: 25px; padding: 12px 30px; font-size: 1.1em; font-weight: bold; color: white; background-color: #28a745; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s; }
#submit-btn:hover { background-color: #218838; }
#submit-btn:disabled { background-color: #6c757d; cursor: not-allowed; }
</style>
</head>
<body>
<div class="game-container">
<h1>比亚迪秦高压系统 闯关游戏</h1>
<div class="info-bar">
<div class="timer-container">
用时: <span id="timer">00:00</span>
</div>
<div id="results" class="results-container">
请将答案拖拽到对应的数字上
</div>
</div>
<div id="diagram-wrapper">
<!-- 使用SVG绘制的结构图 -->
<svg viewBox="0 0 950 600" preserveAspectRatio="xMidYMid meet" class="diagram-svg">
<!-- 背景和车轴框架 -->
<rect class="axle-bg" x="0" y="0" width="180" height="600" />
<rect class="axle-bg" x="770" y="0" width="180" height="600" />
<!-- 车轮和车轴 -->
<g class="wheel-assembly">
<!-- 左侧 -->
<rect class="wheel" x="50" y="20" width="80" height="40" rx="15"/>
<rect class="axle" x="85" y="60" width="10" height="480"/>
<rect class="wheel" x="50" y="540" width="80" height="40" rx="15"/>
<!-- 右侧 -->
<rect class="wheel" x="820" y="20" width="80" height="40" rx="15"/>
<rect class="axle" x="855" y="60" width="10" height="480"/>
<rect class="wheel" x="820" y="540" width="80" height="40" rx="15"/>
</g>
<!-- 主要部件 -->
<g class="components">
<!-- 1. ACP (电动空调压缩机) -->
<!-- <rect class="component-box" id="component-1" x="195" y="370" width="100" height="30"/>-->
<!-- <text class="component-label" x="245" y="390">ACP</text>-->
<!-- 2. PTC (PTC加热器) -->
<!-- <rect class="component-box" id="component-2" x="205" y="350" width="60" height="30"/>-->
<!-- <text class="component-label" x="235" y="370">PTC</text>-->
<!-- 3. PDU (高压配电箱) -->
<!-- <rect class="component-box" id="component-3" x="225" y="240" width="90" height="40"/>-->
<!-- <text class="component-label" x="270" y="265">PDU</text>-->
<!-- 4. 双电机变速器 -->
<!-- <rect class="component-box" id="component-5" x="280" y="280" width="150" height="70"/>-->
<!-- <ellipse class="motor-symbol" cx="355" cy="315" rx="25" ry="15"/>-->
<!-- <text class="component-label" x="355" y="340">双电机</text>-->
<!-- 5. IPU (集成桥式整流模块 - 推测为 inverter/converter 单元) -->
<!-- <rect class="component-box" id="component-4" x="650" y="240" width="70" height="40"/>-->
<!-- <text class="component-label" x="685" y="265">IPU</text>-->
<!-- 发动机 -->
<rect class="component-box" id="component-5" x="105" y="215" width="65" height="50"/>
<text class="component-label" x="138" y="244">发动机</text>
<!-- 6. 动力电池 -->
<!-- <rect class="component-box battery" id="component-6" x="320" y="215" width="310" height="150"/>-->
<!-- <text class="component-label" x="475" y="255">动力电池</text>-->
<!-- 7. OBC (车载充电机) -->
<!-- <rect class="component-box" id="component-7" x="880" y="340" width="60" height="40"/>-->
<!-- <text class="component-label" x="910" y="365">OBC</text>-->
<!-- 8. 交流充电口 -->
<!-- <rect class="component-box charge-port" id="component-8" x="800" y="110" width="30" height="30"/>-->
<!-- <text class="component-label" x="795" y="105">交流充电口</text>-->
<!-- 9. 直流充电口 -->
<!-- <rect class="component-box charge-port" id="component-9" x="750" y="110" width="30" height="30"/>-->
<!-- <text class="component-label" x="745" y="105">直流充电口</text>-->
<!-- 10. 直流充电配电盒 -->
<!-- <rect class="component-box" id="component-10" x="660" y="140" width="100" height="30"/>-->
<!-- <text class="component-label" x="710" y="160">直流充电配电盒</text>-->
</g>
<!-- 电路连接线 -->
<g class="wiring">
<!-- 1 (ACP) -> 3 (PDU) -->
<path class="wire" d="M 55 185 H 200" />
<path class="wire" d="M 55 195 H 200" />
<!-- 2 (PTC) -> 3 (PDU) -->
<path class="wire" d="M 238 130 V 180" />
<path class="wire" d="M 248 130 V 180" />
<!-- 3 (PDU) -> 5 (IPU) -->
<path class="wire" d="M 238 210 V 290" />
<path class="wire" d="M 248 210 V 290" />
<!-- 5 (IPU) -> 6 (动力电池) -->
<path class="wire" d="M 275 300 H 320" />
<path class="wire" d="M 275 310 H 320" />
<!-- 5 (IPU) -> 4 (双电机变速器) -->
<path class="wire" d="M 205 285 H 170" />
<path class="wire" d="M 205 290 H 170" />
<path class="wire" d="M 205 295 H 170" />
<path class="wire" d="M 205 320 H 170" />
<path class="wire" d="M 205 325 H 170" />
<path class="wire" d="M 205 330 H 170" />
<!-- 3 (PDU) -> 7 (OBC) -->
<path class="wire" d="M 245 180 H 660" />
<path class="wire" d="M 245 190 H 660" />
<!-- 7 (OBC) -> 8 (交流充电口) -->
<path class="wire" d="M 670 170 V 100" />
<path class="wire" d="M 680 170 V 100" />
<!-- 6 (动力电池) -> 10 (直流充电配电盒) -->
<!-- <path class="wire" d="M 320 340 H 290 V 400 H 905 V 300" /> -->
<!-- <path class="wire" d="M 320 350 H 300 V 390 H 895 V 300" /> -->
<!-- 9 (直流充电口) -> 10 (直流充电配电盒) -->
<!-- <path class="wire" d="M 755 100 V 165 H 895 V 260" /> -->
<!-- <path class="wire" d="M 765 100 V 155 H 905 V 260" /> -->
</g>
</svg>
<!-- 答题区 (Drop Zones) - 覆盖在SVG之上 -->
<div class="drop-zone" id="drop-1" data-answer="ACP">1</div>
<div class="drop-zone" id="drop-2" data-answer="PTC">2</div>
<div class="drop-zone" id="drop-3" data-answer="PDU">3</div>
<div class="drop-zone" id="drop-4" data-answer="双电机变速器">4</div>
<div class="drop-zone" id="drop-5" data-answer="IPU">5</div>
<div class="drop-zone" id="drop-6" data-answer="动力电池">6</div>
<div class="drop-zone" id="drop-7" data-answer="二合一OBC/DCDC">7</div>
<div class="drop-zone" id="drop-8" data-answer="交流充电口">8</div>
<!-- <div class="drop-zone" id="drop-9" data-answer="直流充电口">9</div>-->
<!-- <div class="drop-zone" id="drop-10" data-answer="直流充电配电盒">10</div>-->
</div>
<div id="answer-bank">
<h3>备选答案区 (请拖拽)</h3>
<div class="answers">
<!-- 正确答案 -->
<div class="draggable" draggable="true" data-id="ans-1">ACP</div>
<div class="draggable" draggable="true" data-id="ans-2">PTC</div>
<div class="draggable" draggable="true" data-id="ans-3">PDU</div>
<div class="draggable" draggable="true" data-id="ans-4">双电机变速器</div>
<div class="draggable" draggable="true" data-id="ans-5">IPU</div>
<div class="draggable" draggable="true" data-id="ans-6">动力电池</div>
<div class="draggable" draggable="true" data-id="ans-7">二合一OBC/DCDC</div>
<div class="draggable" draggable="true" data-id="ans-8">交流充电口</div>
<!-- <div class="draggable" draggable="true" data-id="ans-9">直流充电口</div>-->
<!-- <div class="draggable" draggable="true" data-id="ans-10">直流充电配电盒</div> -->
<!-- 干扰项 -->
<div class="draggable" draggable="true" data-id="dist-1">OBC</div>
<div class="draggable" draggable="true" data-id="dist-2">后电机控制器</div>
<div class="draggable" draggable="true" data-id="dist-3">后电机</div>
</div>
</div>
<button id="submit-btn">提交答案</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- 状态变量 ---
let timerInterval;
let seconds = 0;
let gameEnded = false;
let draggedItem = null;
let confettiInstance = null; // 用于烟花效果的实例
// --- DOM 元素 ---
const draggables = document.querySelectorAll('.draggable');
const dropZones = document.querySelectorAll('.drop-zone');
const answerBankContainer = document.querySelector('.answers');
const submitBtn = document.getElementById('submit-btn');
const timerDisplay = document.getElementById('timer');
const resultsDisplay = document.getElementById('results');
// --- 计时器功能 ---
const startTimer = () => {
const startTime = Date.now();
timerInterval = setInterval(() => {
if (gameEnded) return;
seconds = Math.floor((Date.now() - startTime) / 1000);
const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
const secs = (seconds % 60).toString().padStart(2, '0');
timerDisplay.textContent = `${mins}:${secs}`;
}, 1000);
};
const stopTimer = () => {
clearInterval(timerInterval);
};
// --- 随机化答案功能 ---
const shuffleAnswers = () => {
const answersArray = Array.from(draggables);
for (let i = answersArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[answersArray[i], answersArray[j]] = [answersArray[j], answersArray[i]];
}
// 清空原有的答案区内容，然后添加打乱后的
answerBankContainer.innerHTML = '';
answersArray.forEach(answer => answerBankContainer.appendChild(answer));
};
// --- 拖放事件处理 ---
function handleDragStart(e) {
if (gameEnded) return;
draggedItem = e.target;
e.dataTransfer.setData('text/plain', draggedItem.dataset.id);
// 使用 setTimeout 确保在添加类名之前，元素已经被渲染
setTimeout(() => {
if (draggedItem) draggedItem.classList.add('dragging');
}, 0);
}
function handleDragEnd() {
if (draggedItem) {
draggedItem.classList.remove('dragging');
}
draggedItem = null;
}
function handleDragOver(e) {
e.preventDefault(); // 阻止默认行为，允许放置
if (gameEnded) return;
// 检查放置的目标是否是 drop-zone 且未满
const targetZone = e.target.closest('.drop-zone');
if (targetZone && targetZone.children.length === 0) {
e.target.classList.add('drag-over');
} else if (e.target === answerBankContainer) {
// 如果拖拽到答案银行，也添加视觉反馈
e.target.classList.add('drag-over');
}
}
function handleDragLeave(e) {
if (gameEnded) return;
const targetZone = e.target.closest('.drop-zone');
if (targetZone) {
targetZone.classList.remove('drag-over');
} else if (e.target === answerBankContainer) {
e.target.classList.remove('drag-over');
}
}
function handleDrop(e) {
e.preventDefault();
if (gameEnded || !draggedItem) return;
const targetZone = e.target.closest('.drop-zone');
const targetBank = e.target.closest('.answers');
// 如果拖拽的是一个答案，并且目标是一个空的 drop-zone
if (targetZone && targetZone.children.length === 0) {
targetZone.classList.remove('drag-over'); // 移除拖拽时的样式
targetZone.appendChild(draggedItem); // 将答案放置到目标区域
// 移除目标区域的占位符文本，如果存在的话
targetZone.style.color = 'transparent';
} else if (targetBank && draggedItem.parentElement !== answerBankContainer) {
// 如果拖拽回到答案银行，并且不是从答案银行拖出的
targetBank.classList.remove('drag-over');
const originalZone = draggedItem.parentElement; // 记录原来所在的区域
if (originalZone && originalZone.classList.contains('drop-zone')) {
// 如果是从一个 drop-zone 拖出，则该 drop-zone 变回可用状态
originalZone.style.color = ''; // 恢复占位符文本颜色
originalZone.classList.remove('correct', 'incorrect'); // 清除可能存在的评价样式
}
targetBank.appendChild(draggedItem); // 将答案放回答案银行
}
// 无论是否成功放置，都需要重置拖拽项的样式和状态
if (draggedItem) draggedItem.classList.remove('dragging');
draggedItem = null;
}
// --- 烟花效果函数 ---
function startConfetti() {
// 确保 Confetti.js 已加载，并且只有一个实例
if (typeof confetti === 'undefined') {
console.error("Confetti.js is not loaded!");
return;
}
if (confettiInstance) {
confettiInstance.destroy(); // 如果已存在，先销毁
}
confettiInstance = confetti.create(null, {
resize: true,
useWorker: true
});
confettiInstance({
particleCount: 200,
spread: 160,
origin: { y: 0.6 }
});
}
// --- 游戏逻辑 ---
const checkAnswers = () => {
gameEnded = true;
stopTimer();
submitBtn.disabled = true;
let score = 0;
// 总问题数量根据 dropZone 的数量确定
const totalQuestions = dropZones.length;
dropZones.forEach(zone => {
const answerElement = zone.querySelector('.draggable');
if (answerElement) {
const droppedAnswer = answerElement.textContent.trim();
const correctAnswer = zone.dataset.answer;
if (droppedAnswer === correctAnswer) {
zone.classList.add('correct');
score++;
} else {
zone.classList.add('incorrect');
}
} else {
// 如果区域为空，也算错误
zone.classList.add('incorrect');
}
// 清除拖拽时的样式
zone.classList.remove('drag-over');
});
const percentageScore = Math.round((score / totalQuestions) * 100);
const finalTime = timerDisplay.textContent;
// 根据分数显示不同的祝福语和效果
let message = "";
if (percentageScore === 100) {
message = `🎉 太棒了！满分100分！您的知识渊博，就像秦PLUS DM-i一样强大！`;
startConfetti(); // 播放烟花
} else if (percentageScore >= 90) {
message = `👍 非常出色！您对高压系统了如指掌，继续保持！`;
startConfetti(); // 播放烟花
} else if (percentageScore >= 60) {
message = `😊 表现不错！您已经掌握了大部分知识，再接再厉！`;
} else if (percentageScore >= 40) {
message = `🙂 继续努力！您对高压系统有了初步了解，多加练习会更好！`;
} else {
message = `😔 还需要一些时间！不要气馁，多学习高压系统知识，下次一定能通过！`;
}
// 更新结果显示
resultsDisplay.innerHTML = `<strong>${message}</strong> <br> 用时: <strong>${finalTime}</strong>`;
};
// --- 初始化 ---
// 为所有可拖拽元素添加事件监听器
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', handleDragStart);
draggable.addEventListener('dragend', handleDragEnd);
});
// 为所有放置区域添加事件监听器
dropZones.forEach(zone => {
zone.addEventListener('dragover', handleDragOver);
zone.addEventListener('dragleave', handleDragLeave);
zone.addEventListener('drop', handleDrop);
});
// 为答案银行也添加监听器，允许拖拽回银行
answerBankContainer.addEventListener('dragover', handleDragOver);
answerBankContainer.addEventListener('dragleave', handleDragLeave);
answerBankContainer.addEventListener('drop', handleDrop);
// 提交按钮事件
submitBtn.addEventListener('click', checkAnswers);
// 开始游戏前随机打乱答案
shuffleAnswers();
// 启动计时器
startTimer();
});
</script>
</body>
</html>