![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/02\/20260211004233-698bd079a7a3b.png\")
<\/p>\n\u5355\u4eba\u58c1\u7403\u6311\u6218\u8d5b<\/p>\n
<\/p>\n
\u7528\u7403\u62cd\u63a7\u5236\u5c0f\u7403，\u51fb\u4e2d\u4e0a\u65b9\u76ee\u6807\u5f97\u5206，\u5c3d\u53ef\u80fd\u83b7\u5f97\u9ad8\u5206\u3002<\/p>\n
\u2190 \u2192 \u7bad\u5934\u952e\u00a0\u6216\u00a0A\/D\u952e：\u5de6\u53f3\u79fb\u52a8\u7403\u62cd<\/p>\n<\/li>\n
\u7a7a\u683c\u952e：\u53d1\u5c04\u7403\/\u6682\u505c\u6e38\u620f<\/p>\n<\/li>\n
R\u952e：\u91cd\u65b0\u5f00\u59cb\u6e38\u620f<\/p>\n<\/li>\n<\/ul>\n
\u5de6\u53f3\u7bad\u5934\u6309\u94ae：\u79fb\u52a8\u7403\u62cd<\/p>\n<\/li>\n
\u53d1\u5c04\u6309\u94ae：\u53d1\u5c04\u7403\/\u6682\u505c\u6e38\u620f<\/p>\n<\/li>\n
\u6ed1\u52a8\u5c4f\u5e55：\u76f4\u63a5\u79fb\u52a8\u7403\u62cd（\u89e6\u6478\u63a7\u5236）<\/p>\n<\/li>\n
\u70b9\u51fb\u753b\u5e03：\u53d1\u5c04\u7403<\/p>\n<\/li>\n<\/ul>\n
\u7403\u521d\u59cb\u505c\u5728\u7403\u62cd\u4e0a（\u95ea\u70c1\u63d0\u793a）<\/p>\n<\/li>\n
\u6309\u7a7a\u683c\u952e\u6216\u70b9\u51fb\u53d1\u5c04\u6309\u94ae\u5c06\u7403\u5c04\u51fa<\/p>\n<\/li>\n
\u7403\u51fb\u4e2d\u7403\u62cd\u4f1a\u53cd\u5f39，\u6839\u636e\u51fb\u4e2d\u4f4d\u7f6e\u6539\u53d8\u53cd\u5f39\u89d2\u5ea6<\/p>\n<\/li>\n<\/ul>\n
\u5c4f\u5e55\u4e0a\u65b9\u6709\u591a\u884c\u591a\u5217\u5f69\u8272\u76ee\u6807<\/p>\n<\/li>\n
\u4e0d\u540c\u989c\u8272\u7684\u76ee\u6807\u6709\u4e0d\u540c\u5206\u6570：<\/p>\n
\u666e\u901a\u76ee\u6807：10\u5206（\u84dd\u8272\u7cfb）<\/p>\n<\/li>\n
\u91d1\u8272\u76ee\u6807：50\u5206（\u91d1\u8272，\u9ad8\u5206\u5956\u52b1）<\/p>\n<\/li>\n
\u7ea2\u8272\u751f\u547d\u76ee\u6807：10\u5206 + \u6062\u590d1\u6761\u751f\u547d<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u6bcf\u6b21\u51fb\u4e2d\u76ee\u6807\u83b7\u5f97\u76f8\u5e94\u5206\u6570<\/p>\n<\/li>\n
\u6bcf\u5f97100\u5206：\u89e6\u53d1\u82b1\u6735\u7279\u6548\u5e86\u795d<\/p>\n<\/li>\n
\u7b49\u7ea7\u7cfb\u7edf：\u6bcf100\u5206\u53471\u7ea7，\u7403\u901f\u968f\u7b49\u7ea7\u63d0\u9ad8<\/p>\n<\/li>\n<\/ul>\n
\u521d\u59cb\u751f\u547d\u503c：3\u6761\u547d<\/p>\n<\/li>\n
\u635f\u5931\u751f\u547d：\u7403\u6389\u843d\u5230\u5e95\u90e8<\/p>\n<\/li>\n
\u751f\u547d\u6062\u590d：\u51fb\u4e2d\u7ea2\u8272\u751f\u547d\u76ee\u6807<\/p>\n<\/li>\n
\u6700\u5927\u751f\u547d\u503c：\u6700\u591a5\u6761\u547d<\/p>\n<\/li>\n
\u6e38\u620f\u7ed3\u675f：\u751f\u547d\u503c\u4e3a0<\/p>\n<\/li>\n<\/ul>\n
\u6bcf\u83b7\u5f97100\u5206\u89e6\u53d1\u4e00\u6b21<\/p>\n<\/li>\n
\u5c4f\u5e55\u4e0a\u65b9\u98d8\u843d\u5f69\u8272\u82b1\u6735<\/p>\n<\/li>\n
\u82b1\u6735\u6709\u4e0d\u540c\u5f62\u72b6\u548c\u989c\u8272<\/p>\n<\/li>\n<\/ul>\n
\u6bcf\u6b21\u51fb\u4e2d\u76ee\u6807\u663e\u793a"+"\u5206\u6570\u52a8\u753b<\/p>\n<\/li>\n
\u52a8\u753b\u4ece\u51fb\u4e2d\u4f4d\u7f6e\u5411\u4e0a\u98d8\u6563<\/p>\n<\/li>\n<\/ul>\n
\u5206\u6570：\u5f53\u524d\u5f97\u5206<\/p>\n<\/li>\n
\u751f\u547d\u503c：\u5269\u4f59\u751f\u547d\u6570<\/p>\n<\/li>\n
\u7b49\u7ea7：\u5f53\u524d\u6e38\u620f\u7b49\u7ea7<\/p>\n<\/li>\n<\/ul>\n
PC\u7aef：\u663e\u793a\u952e\u76d8\u63a7\u5236\u63d0\u793a\u548c\u64cd\u4f5c\u6309\u94ae<\/p>\n<\/li>\n
\u79fb\u52a8\u7aef：\u663e\u793a\u89e6\u6478\u63a7\u5236\u6309\u94ae<\/p>\n<\/li>\n<\/ul>\n
\u6682\u505c\u72b6\u6001：\u53ef\u4ee5\u6682\u505c\u548c\u7ee7\u7eed\u6e38\u620f<\/p>\n<\/li>\n
\u6e38\u620f\u7ed3\u675f：\u663e\u793a\u6700\u7ec8\u5f97\u5206\u548c\u91cd\u73a9\u6309\u94ae<\/p>\n<\/li>\n<\/ul>\n
\u80cc\u666f\u97f3\u4e50：\u653e\u677e\u7684\u80cc\u666f\u97f3\u4e50（\u53ef\u5f00\u5173）<\/p>\n<\/li>\n
\u5f97\u5206\u97f3\u6548：\u51fb\u4e2d\u76ee\u6807\u65f6\u64ad\u653e<\/p>\n<\/li>\n
\u82b1\u6735\u7279\u6548\u97f3\u6548：\u6bcf100\u5206\u65f6\u64ad\u653e<\/p>\n<\/li>\n<\/ul>\n
\u952e\u76d8\u63a7\u5236<\/p>\n<\/li>\n
\u5927\u5c3a\u5bf8\u76ee\u6807<\/p>\n<\/li>\n
\u5b8c\u6574\u63a7\u5236\u9762\u677f<\/p>\n<\/li>\n<\/ul>\n
\u89e6\u6478\u63a7\u5236\u6309\u94ae<\/p>\n<\/li>\n
\u6ed1\u52a8\u63a7\u5236<\/p>\n<\/li>\n
\u81ea\u9002\u5e94\u76ee\u6807\u5927\u5c0f<\/p>\n<\/li>\n
\u4f18\u5316\u7684\u753b\u5e03\u5c3a\u5bf8<\/p>\n<\/li>\n<\/ul>\n
\u63a7\u5236\u53cd\u5f39\u89d2\u5ea6：\u7403\u51fb\u4e2d\u7403\u62cd\u7684\u4e0d\u540c\u4f4d\u7f6e\u4f1a\u6539\u53d8\u53cd\u5f39\u89d2\u5ea6<\/p>\n<\/li>\n
\u4f18\u5148\u51fb\u4e2d\u7279\u6b8a\u76ee\u6807：\u91d1\u8272\u76ee\u6807（50\u5206）\u548c\u7ea2\u8272\u751f\u547d\u76ee\u6807<\/p>\n<\/li>\n
\u8282\u594f\u63a7\u5236：\u4e0d\u8981\u6025\u4e8e\u53d1\u5c04，\u7b49\u5f85\u5408\u9002\u65f6\u673a<\/p>\n<\/li>\n
\u751f\u547d\u7ba1\u7406：\u4fdd\u6301\u81f3\u5c111\u6761\u751f\u547d\u4f5c\u4e3a\u5b89\u5168\u7f13\u51b2<\/p>\n<\/li>\n
\u5229\u7528\u5899\u58c1\u53cd\u5f39：\u8ba9\u7403\u4ece\u4fa7\u9762\u5899\u58c1\u53cd\u5f39\u51fb\u4e2d\u96be\u4ee5\u76f4\u63a5\u51fb\u4e2d\u7684\u76ee\u6807<\/p>\n<\/li>\n
\u81ea\u9002\u5e94\u96be\u5ea6：\u7403\u901f\u968f\u7b49\u7ea7\u63d0\u9ad8，\u6311\u6218\u6027\u9010\u6e10\u589e\u52a0<\/p>\n<\/li>\n
\u53cc\u91cd\u63a7\u5236：\u540c\u65f6\u652f\u6301\u952e\u76d8\u548c\u89e6\u6478\u63a7\u5236<\/p>\n<\/li>\n
\u89c6\u89c9\u53cd\u9988：\u4e30\u5bcc\u7684\u52a8\u753b\u548c\u7279\u6548<\/p>\n<\/li>\n
\u653e\u677e\u4f53\u9a8c：\u67d4\u548c\u7684\u80cc\u666f\u97f3\u4e50\u548c\u89c6\u89c9\u6548\u679c<\/p>\n<\/li>\n
\u8de8\u5e73\u53f0：\u5728PC\u548c\u79fb\u52a8\u8bbe\u5907\u4e0a\u90fd\u80fd\u826f\u597d\u8fd0\u884c<\/p>\n<\/li>\n<\/ul>\n
<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n <meta charset="UTF-8">
\n <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
\n <title>\u5355\u4eba\u58c1\u7403\u6311\u6218\u8d5b<\/title>
\n <link rel="stylesheet" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css">
\n <style>
\n * {
\n margin: 0;
\n padding: 0;
\n box-sizing: border-box;
\n -webkit-tap-highlight-color: transparent;
\n -webkit-overflow-scrolling: touch;
\n }<\/p>\n
html, body {
\n font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
\n background: #000;
\n color: white;
\n overflow-x: hidden;
\n min-height: 100vh;
\n display: flex;
\n flex-direction: column;
\n align-items: center;
\n padding: 0;
\n position: fixed;
\n width: 100%;
\n height: 100%;
\n overscroll-behavior: none;
\n }<\/p>\n
\/* \u9632\u6b62iOS\u6a61\u76ae\u7b4b\u6548\u679c *\/
\n body {
\n overflow: hidden;
\n position: fixed;
\n top: 0;
\n left: 0;
\n right: 0;
\n bottom: 0;
\n }<\/p>\n
\/* \u80cc\u666f\u56fe\u7247 *\/
\n #background-image {
\n position: fixed;
\n top: 0;
\n left: 0;
\n width: 100%;
\n height: 100%;
\n background-image: url('https:\/\/amitofo.icu\/lianchi.jpg');
\n background-size: cover;
\n background-position: center;
\n background-repeat: no-repeat;
\n opacity: 0.7;
\n z-index: -2;
\n }<\/p>\n
\/* \u80cc\u666f\u906e\u7f69 *\/
\n #background-overlay {
\n position: fixed;
\n top: 0;
\n left: 0;
\n width: 100%;
\n height: 100%;
\n background: rgba(10, 20, 40, 0.85);
\n z-index: -1;
\n }<\/p>\n
\/* \u66f4\u591a\u6e38\u620f\u89d2\u6807 *\/
\n .more-games-corner {
\n position: absolute;
\n top: 15px;
\n left: 15px;
\n z-index: 100;
\n padding: 8px 15px;
\n background: linear-gradient(135deg, #ff3366, #ff6633);
\n border-radius: 20px;
\n box-shadow: 0 4px 12px rgba(255, 51, 102, 0.4);
\n transition: all 0.3s ease;
\n }<\/p>\n
.more-games-corner:hover, .more-games-corner:active {
\n transform: translateY(-2px);
\n box-shadow: 0 6px 16px rgba(255, 51, 102, 0.6);
\n }<\/p>\n
.more-games-link {
\n color: white;
\n text-decoration: none;
\n font-size: 14px;
\n font-weight: 600;
\n display: flex;
\n align-items: center;
\n gap: 6px;
\n }<\/p>\n
.more-games-link i {
\n font-size: 16px;
\n }<\/p>\n
\/* \u6e38\u620f\u5bb9\u5668 *\/
\n .game-container {
\n width: 100%;
\n max-width: 900px;
\n margin: 0 auto;
\n padding: 20px;
\n padding-top: 70px;
\n display: flex;
\n flex-direction: column;
\n align-items: center;
\n flex: 1;
\n overflow: hidden;
\n }<\/p>\n
\/* \u6807\u9898 *\/
\n .header {
\n text-align: center;
\n margin-bottom: 25px;
\n width: 100%;
\n }<\/p>\n
h1 {
\n font-size: 2.8rem;
\n margin-bottom: 8px;
\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
\n background: linear-gradient(90deg, #FFD700, #FFA500, #FF6347);
\n -webkit-background-clip: text;
\n background-clip: text;
\n color: transparent;
\n letter-spacing: 1px;
\n font-weight: 800;
\n }<\/p>\n
.subtitle {
\n font-size: 1.1rem;
\n opacity: 0.9;
\n color: #e0e0ff;
\n max-width: 600px;
\n margin: 0 auto;
\n line-height: 1.5;
\n }<\/p>\n
\/* \u6e38\u620fUI *\/
\n .game-ui {
\n display: flex;
\n justify-content: space-between;
\n width: 100%;
\n margin-bottom: 20px;
\n flex-wrap: wrap;
\n gap: 15px;
\n }<\/p>\n
.stats {
\n display: flex;
\n gap: 20px;
\n flex-wrap: wrap;
\n justify-content: center;
\n width: 100%;
\n }<\/p>\n
.stat-box {
\n background: rgba(255, 255, 255, 0.12);
\n padding: 15px 20px;
\n border-radius: 12px;
\n min-width: 120px;
\n text-align: center;
\n backdrop-filter: blur(8px);
\n border: 1px solid rgba(255, 255, 255, 0.2);
\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
\n }<\/p>\n
.stat-label {
\n font-size: 0.95rem;
\n opacity: 0.8;
\n margin-bottom: 5px;
\n color: #b0b0ff;
\n }<\/p>\n
.stat-value {
\n font-size: 2.2rem;
\n font-weight: 800;
\n color: #FFD700;
\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
\n }<\/p>\n
\/* \u6e38\u620f\u753b\u5e03\u5bb9\u5668 *\/
\n .canvas-container {
\n width: 100%;
\n max-width: 800px;
\n overflow: hidden;
\n border-radius: 12px;
\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
\n border: 2px solid rgba(255, 215, 0, 0.3);
\n position: relative;
\n background-color: rgba(10, 15, 35, 0.85);
\n touch-action: manipulation;
\n height: 500px; \/* \u56fa\u5b9a\u9ad8\u5ea6 *\/
\n margin: 0 auto;
\n }<\/p>\n
\/* \u6e38\u620f\u753b\u5e03 *\/
\n #gameCanvas {
\n display: block;
\n width: 100%;
\n height: 100%;
\n }<\/p>\n
\/* \u63a7\u5236\u533a\u57df – PC\u7aef *\/
\n .pc-controls {
\n display: flex;
\n flex-direction: column;
\n align-items: center;
\n margin-top: 25px;
\n width: 100%;
\n max-width: 800px;
\n }<\/p>\n
.control-info {
\n display: flex;
\n flex-wrap: wrap;
\n justify-content: center;
\n gap: 25px;
\n margin-bottom: 20px;
\n background: rgba(0, 0, 0, 0.3);
\n padding: 18px;
\n border-radius: 12px;
\n width: 100%;
\n border: 1px solid rgba(255, 255, 255, 0.1);
\n }<\/p>\n
.control-item {
\n display: flex;
\n align-items: center;
\n gap: 10px;
\n }<\/p>\n
.key {
\n background: rgba(255, 255, 255, 0.15);
\n padding: 8px 16px;
\n border-radius: 8px;
\n font-weight: 700;
\n border: 1px solid rgba(255, 255, 255, 0.3);
\n min-width: 50px;
\n text-align: center;
\n color: #FFD700;
\n }<\/p>\n
\/* \u6309\u94ae *\/
\n .buttons {
\n display: flex;
\n gap: 15px;
\n margin-top: 10px;
\n flex-wrap: wrap;
\n justify-content: center;
\n }<\/p>\n
button {
\n background: linear-gradient(to bottom, #4a6ee0, #3a5ed0);
\n color: white;
\n border: none;
\n padding: 14px 28px;
\n border-radius: 10px;
\n font-size: 1.05rem;
\n cursor: pointer;
\n transition: all 0.2s;
\n font-weight: 600;
\n letter-spacing: 0.5px;
\n box-shadow: 0 4px 12px rgba(58, 94, 208, 0.4);
\n display: flex;
\n align-items: center;
\n gap: 8px;
\n }<\/p>\n
button:hover {
\n background: linear-gradient(to bottom, #5a7ef0, #4a6ee0);
\n transform: translateY(-3px);
\n box-shadow: 0 6px 18px rgba(58, 94, 208, 0.6);
\n }<\/p>\n
button:active {
\n transform: translateY(1px);
\n }<\/p>\n
button#restartBtn {
\n background: linear-gradient(to bottom, #FF9800, #F57C00);
\n box-shadow: 0 4px 12px rgba(245, 124, 0, 0.4);
\n }<\/p>\n
button#restartBtn:hover {
\n background: linear-gradient(to bottom, #FFB74D, #FF9800);
\n box-shadow: 0 6px 18px rgba(245, 124, 0, 0.6);
\n }<\/p>\n
\/* \u82b1\u6735\u7279\u6548\u5bb9\u5668 *\/
\n #flower-effects {
\n position: fixed;
\n top: 0;
\n left: 0;
\n width: 100%;
\n height: 100%;
\n pointer-events: none;
\n z-index: 10;
\n overflow: hidden;
\n }<\/p>\n
.flower {
\n position: absolute;
\n font-size: 24px;
\n opacity: 0;
\n animation: fall linear forwards;
\n }<\/p>\n
@keyframes fall {
\n 0% {
\n transform: translateY(-50px) rotate(0deg);
\n opacity: 0;
\n }
\n 10% {
\n opacity: 1;
\n }
\n 100% {
\n transform: translateY(100vh) rotate(360deg);
\n opacity: 0;
\n }
\n }<\/p>\n
\/* \u5f97\u5206\u52a8\u753b *\/
\n .score-popup {
\n position: absolute;
\n font-size: 28px;
\n font-weight: 900;
\n color: #FFD700;
\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
\n z-index: 5;
\n pointer-events: none;
\n animation: scorePopup 1s ease-out forwards;
\n }<\/p>\n
@keyframes scorePopup {
\n 0% {
\n opacity: 0;
\n transform: translateY(0) scale(0.5);
\n }
\n 50% {
\n opacity: 1;
\n transform: translateY(-30px) scale(1.2);
\n }
\n 100% {
\n opacity: 0;
\n transform: translateY(-60px) scale(0.8);
\n }
\n }<\/p>\n
\/* \u6e38\u620f\u7ed3\u675f\u754c\u9762 *\/
\n .game-over {
\n position: absolute;
\n top: 50%;
\n left: 50%;
\n transform: translate(-50%, -50%);
\n background: rgba(0, 0, 0, 0.92);
\n padding: 45px;
\n border-radius: 16px;
\n text-align: center;
\n display: none;
\n z-index: 100;
\n width: 90%;
\n max-width: 500px;
\n border: 2px solid #FFD700;
\n box-shadow: 0 0 50px rgba(255, 215, 0, 0.4);
\n backdrop-filter: blur(10px);
\n }<\/p>\n
.game-over h2 {
\n font-size: 2.8rem;
\n color: #FFD700;
\n margin-bottom: 20px;
\n }<\/p>\n
.game-over p {
\n font-size: 1.4rem;
\n margin-bottom: 35px;
\n color: #e0e0ff;
\n }<\/p>\n
\/* \u79fb\u52a8\u7aef\u63a7\u5236\u6309\u94ae *\/
\n .mobile-controls {
\n display: none;
\n margin-top: 25px;
\n width: 100%;
\n max-width: 300px;
\n justify-content: center;
\n gap: 20px;
\n }<\/p>\n
.mobile-btn {
\n width: 80px;
\n height: 80px;
\n border-radius: 50%;
\n background: rgba(255, 255, 255, 0.2);
\n border: 2px solid rgba(255, 215, 0, 0.5);
\n display: flex;
\n align-items: center;
\n justify-content: center;
\n font-size: 32px;
\n color: white;
\n cursor: pointer;
\n user-select: none;
\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
\n touch-action: manipulation;
\n }<\/p>\n
\/* \u97f3\u9891\u63a7\u5236 *\/
\n .audio-control {
\n position: fixed;
\n bottom: 20px;
\n right: 20px;
\n z-index: 50;
\n background: rgba(0, 0, 0, 0.7);
\n border-radius: 50%;
\n width: 50px;
\n height: 50px;
\n display: flex;
\n align-items: center;
\n justify-content: center;
\n cursor: pointer;
\n border: 1px solid rgba(255, 255, 255, 0.3);
\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
\n }<\/p>\n
\/* PC\u7aef\u4e13\u7528\u6837\u5f0f *\/
\n @media (min-width: 769px) {
\n .mobile-controls {
\n display: none !important;
\n }<\/p>\n
.pc-controls {
\n display: flex !important;
\n }
\n }<\/p>\n
\/* \u79fb\u52a8\u7aef\u6837\u5f0f *\/
\n @media (max-width: 768px) {
\n .pc-controls {
\n display: none !important; \/* \u79fb\u52a8\u7aef\u9690\u85cf\u63a7\u5236\u533a\u57df *\/
\n }<\/p>\n
.mobile-controls {
\n display: flex;
\n }<\/p>\n
h1 {
\n font-size: 2.2rem;
\n }<\/p>\n
.subtitle {
\n font-size: 1rem;
\n padding: 0 10px;
\n }<\/p>\n
.game-ui {
\n flex-direction: column;
\n align-items: center;
\n gap: 15px;
\n }<\/p>\n
.stats {
\n width: 100%;
\n justify-content: center;
\n }<\/p>\n
.stat-box {
\n min-width: 100px;
\n padding: 12px 15px;
\n }<\/p>\n
.stat-value {
\n font-size: 1.8rem;
\n }<\/p>\n
.more-games-corner {
\n top: 10px;
\n left: 10px;
\n padding: 6px 12px;
\n }<\/p>\n
.more-games-link {
\n font-size: 13px;
\n }<\/p>\n
\/* \u79fb\u52a8\u7aef\u8c03\u6574\u753b\u5e03\u9ad8\u5ea6 *\/
\n .canvas-container {
\n height: 400px;
\n }<\/p>\n
\/* \u79fb\u52a8\u7aef\u6e38\u620f\u5bb9\u5668\u8c03\u6574 *\/
\n .game-container {
\n padding: 15px;
\n padding-top: 60px;
\n }
\n }<\/p>\n
@media (max-width: 480px) {
\n .game-container {
\n padding: 15px;
\n padding-top: 60px;
\n }<\/p>\n
.stat-box {
\n min-width: 85px;
\n padding: 10px 12px;
\n }<\/p>\n
.stat-label {
\n font-size: 0.85rem;
\n }<\/p>\n
.stat-value {
\n font-size: 1.6rem;
\n }<\/p>\n
.game-over {
\n padding: 30px 20px;
\n width: 95%;
\n }<\/p>\n
.game-over h2 {
\n font-size: 2.2rem;
\n }<\/p>\n
.game-over p {
\n font-size: 1.2rem;
\n }<\/p>\n
\/* iPhone\u7ad6\u5c4f\u4f18\u5316 *\/
\n .canvas-container {
\n height: 350px;
\n }<\/p>\n
h1 {
\n font-size: 1.8rem;
\n }<\/p>\n
.subtitle {
\n font-size: 0.9rem;
\n margin-bottom: 10px;
\n }<\/p>\n
.game-ui {
\n margin-bottom: 10px;
\n }
\n }<\/p>\n
\/* iPhone\u7ad6\u5c4f\u7279\u6b8a\u4f18\u5316 *\/
\n @media (max-width: 480px) and (max-height: 850px) {
\n .game-container {
\n padding-top: 50px;
\n }<\/p>\n
.canvas-container {
\n height: 300px;
\n }<\/p>\n
.header {
\n margin-bottom: 15px;
\n }<\/p>\n
.stat-box {
\n padding: 8px 10px;
\n min-width: 70px;
\n }<\/p>\n
.stat-value {
\n font-size: 1.4rem;
\n }<\/p>\n
.mobile-controls {
\n margin-top: 15px;
\n }<\/p>\n
.mobile-btn {
\n width: 70px;
\n height: 70px;
\n font-size: 28px;
\n }
\n }<\/p>\n
\/* iPhone\u5c0f\u5c4f\u5e55\u7279\u6b8a\u4f18\u5316 *\/
\n @media (max-width: 375px) and (max-height: 670px) {
\n .canvas-container {
\n height: 280px;
\n }<\/p>\n
.game-container {
\n padding-top: 40px;
\n padding: 10px;
\n padding-top: 40px;
\n }<\/p>\n
h1 {
\n font-size: 1.6rem;
\n }<\/p>\n
.stat-box {
\n padding: 6px 8px;
\n min-width: 65px;
\n }<\/p>\n
.stat-label {
\n font-size: 0.75rem;
\n }<\/p>\n
.stat-value {
\n font-size: 1.2rem;
\n }<\/p>\n
.mobile-btn {
\n width: 65px;
\n height: 65px;
\n font-size: 24px;
\n }
\n }<\/p>\n
\/* \u6a2a\u5c4f\u4f18\u5316 *\/
\n @media (orientation: landscape) and (max-height: 600px) {
\n .game-container {
\n padding-top: 15px;
\n }<\/p>\n
.header {
\n margin-bottom: 10px;
\n }<\/p>\n
h1 {
\n font-size: 1.8rem;
\n }<\/p>\n
.subtitle {
\n font-size: 0.9rem;
\n margin-bottom: 10px;
\n }<\/p>\n
.game-ui {
\n margin-bottom: 10px;
\n }<\/p>\n
.stat-box {
\n padding: 8px 12px;
\n min-width: 80px;
\n }<\/p>\n
.stat-value {
\n font-size: 1.4rem;
\n }<\/p>\n
.canvas-container {
\n height: 280px;
\n }<\/p>\n
.mobile-controls {
\n margin-top: 15px;
\n }
\n }
\n <\/style>
\n<\/head>
\n<body>
\n <!– \u80cc\u666f\u56fe\u7247 –>
\n <div id="background-image"><\/div>
\n <div id="background-overlay"><\/div><\/p>\n
<!– \u82b1\u6735\u7279\u6548\u5bb9\u5668 –>
\n <div id="flower-effects"><\/div><\/p>\n
<!– \u66f4\u591a\u6e38\u620f\u89d2\u6807 –>
\n <div class="more-games-corner">
\n <a href="https:\/\/game.amitofo.icu" class="more-games-link">
\n <i class="fas fa-gamepad"><\/i>
\n <span>\u66f4\u591a\u6e38\u620f<\/span>
\n <\/a>
\n <\/div><\/p>\n
<!– \u97f3\u9891\u63a7\u5236 –>
\n <div class="audio-control" id="audioToggle">
\n <i class="fas fa-volume-up" id="audioIcon"><\/i>
\n <\/div><\/p>\n
<!– \u6e38\u620f\u4e3b\u5bb9\u5668 –>
\n <div class="game-container">
\n <div class="header">
\n <h1>\u5355\u4eba\u58c1\u7403\u6311\u6218\u8d5b<\/h1>
\n <p class="subtitle">\u6309\u7a7a\u683c\u952e\u4ece\u7403\u62cd\u53d1\u5c04\u7403，\u51fb\u4e2d\u76ee\u6807\u5f97\u5206！\u6bcf100\u5206\u89e6\u53d1\u82b1\u6735\u7279\u6548\u3002<\/p>
\n <\/div><\/p>\n
<div class="game-ui">
\n <div class="stats">
\n <div class="stat-box">
\n <div class="stat-label">\u5206\u6570<\/div>
\n <div id="score" class="stat-value">0<\/div>
\n <\/div>
\n <div class="stat-box">
\n <div class="stat-label">\u751f\u547d\u503c<\/div>
\n <div id="lives" class="stat-value">3<\/div>
\n <\/div>
\n <div class="stat-box">
\n <div class="stat-label">\u7b49\u7ea7<\/div>
\n <div id="level" class="stat-value">1<\/div>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
<!– \u6e38\u620f\u753b\u5e03\u5bb9\u5668 –>
\n <div class="canvas-container">
\n <canvas id="gameCanvas" width="800" height="500"><\/canvas>
\n <\/div><\/p>\n
<!– \u79fb\u52a8\u7aef\u63a7\u5236\u6309\u94ae –>
\n <div class="mobile-controls">
\n <div class="mobile-btn" id="mobileLeft">
\n <i class="fas fa-arrow-left"><\/i>
\n <\/div>
\n <div class="mobile-btn" id="mobileSpace">
\n <i class="fas fa-arrow-up"><\/i>
\n <span style="font-size: 12px; margin-left: 5px;">\u53d1\u5c04<\/span>
\n <\/div>
\n <div class="mobile-btn" id="mobileRight">
\n <i class="fas fa-arrow-right"><\/i>
\n <\/div>
\n <\/div><\/p>\n
<!– \u6e38\u620f\u63a7\u5236\u6309\u94ae – PC\u7aef\u663e\u793a –>
\n <div class="pc-controls">
\n <div class="control-info">
\n <div class="control-item">
\n <div class="key">\u2190 \u2192<\/div>
\n <span>\u79fb\u52a8\u7403\u62cd<\/span>
\n <\/div>
\n <div class="control-item">
\n <div class="key">\u7a7a\u683c<\/div>
\n <span>\u53d1\u5c04\u7403\/\u6682\u505c<\/span>
\n <\/div>
\n <div class="control-item">
\n <div class="key">R<\/div>
\n <span>\u91cd\u65b0\u5f00\u59cb<\/span>
\n <\/div>
\n <\/div><\/p>\n
<div class="buttons">
\n <button id="startBtn">
\n <i class="fas fa-play"><\/i>
\n <span>\u5f00\u59cb\u6e38\u620f<\/span>
\n <\/button>
\n <button id="pauseBtn">
\n <i class="fas fa-pause"><\/i>
\n <span>\u6682\u505c\u6e38\u620f<\/span>
\n <\/button>
\n <button id="restartBtn">
\n <i class="fas fa-redo"><\/i>
\n <span>\u91cd\u65b0\u5f00\u59cb<\/span>
\n <\/button>
\n <\/div>
\n <\/div><\/p>\n
<!– \u6e38\u620f\u7ed3\u675f\u754c\u9762 –>
\n <div id="gameOver" class="game-over">
\n <h2>\u6e38\u620f\u7ed3\u675f<\/h2>
\n <p>\u6700\u7ec8\u5f97\u5206: <span id="finalScore">0<\/span><\/p>
\n <button id="playAgainBtn">
\n <i class="fas fa-redo"><\/i>
\n <span>\u518d\u6765\u4e00\u5c40<\/span>
\n <\/button>
\n <\/div>
\n <\/div><\/p>\n
<!– \u80cc\u666f\u97f3\u4e50 –>
\n <audio id="backgroundMusic" loop>
\n <source src="https:\/\/amitofo.icu\/beijing.ogg" type="audio\/ogg">
\n <\/audio><\/p>\n
<!– \u5f97\u5206\u97f3\u6548 –>
\n <audio id="scoreSound">
\n <source src="https:\/\/amitofo.icu\/xiaochu.mp3" type="audio\/mpeg">
\n <\/audio><\/p>\n
<!– \u65b0\u7684\u51fb\u7403\u5f97\u5206\u97f3\u6548 –>
\n <audio id="winSound" preload="auto">
\n <source src="https:\/\/amitofo.icu\/win.mp3" type="audio\/mpeg">
\n <\/audio><\/p>\n
<script>
\n \/\/ \u83b7\u53d6Canvas\u5143\u7d20\u548c\u4e0a\u4e0b\u6587
\n const canvas = document.getElementById('gameCanvas');
\n const ctx = canvas.getContext('2d');<\/p>\n
\/\/ \u6e38\u620f\u72b6\u6001
\n let gameRunning = false;
\n let gamePaused = false;
\n let score = 0;
\n let lives = 3;
\n let level = 1;
\n let animationId = null;
\n let ballOnPaddle = true; \/\/ \u7403\u662f\u5426\u5728\u7403\u62cd\u4e0a（\u7b49\u5f85\u53d1\u5c04）
\n let lastScoreForEffect = 0; \/\/ \u4e0a\u6b21\u89e6\u53d1\u7279\u6548\u7684\u5206\u6570
\n let isMobile = false; \/\/ \u662f\u5426\u662f\u79fb\u52a8\u8bbe\u5907<\/p>\n
\/\/ \u7403\u62cd\u5c5e\u6027
\n const paddle = {
\n width: 100,
\n height: 15,
\n x: canvas.width \/ 2 – 50,
\n y: canvas.height – 30,
\n speed: 8,
\n color: '#4a6ee0',
\n borderColor: '#5a7ef0'
\n };<\/p>\n
\/\/ \u7403\u5c5e\u6027
\n const ball = {
\n x: canvas.width \/ 2,
\n y: canvas.height – 45, \/\/ \u521d\u59cb\u4f4d\u7f6e\u5728\u7403\u62cd\u4e0a\u65b9
\n radius: 10,
\n speedX: 0, \/\/ \u521d\u59cb\u901f\u5ea6\u4e3a0，\u7b49\u5f85\u53d1\u5c04
\n speedY: 0,
\n color: '#FFD700',
\n borderColor: '#FFA500'
\n };<\/p>\n
\/\/ \u76ee\u6807\u5c5e\u6027 – \u6839\u636e\u8bbe\u5907\u7c7b\u578b\u8c03\u6574
\n let targets = [];
\n let targetRows = 5;
\n let targetCols = 10;
\n let targetWidth = 70;
\n let targetHeight = 20;
\n let targetPadding = 5;
\n let targetOffsetTop = 50;
\n let targetOffsetLeft = 25;<\/p>\n
\/\/ \u97f3\u9891\u5143\u7d20
\n const backgroundMusic = document.getElementById('backgroundMusic');
\n const scoreSound = document.getElementById('scoreSound');
\n const winSound = document.getElementById('winSound');
\n let musicEnabled = true;<\/p>\n
\/\/ \u82b1\u6735\u989c\u8272\u6570\u7ec4
\n const flowerColors = ['#FF3366', '#FF6633', '#FF33CC', '#33FF99', '#33CCFF', '#FFCC00', '#9966FF'];
\n const flowerIcons = ['\u2740', '\u273f', '\u2741', '🌸', '🌺', '🌼', '🌻'];<\/p>\n
\/\/ \u68c0\u6d4b\u8bbe\u5907\u7c7b\u578b
\n function detectDevice() {
\n isMobile = \/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini\/i.test(navigator.userAgent);
\n return isMobile;
\n }<\/p>\n
\/\/ \u6839\u636e\u5c4f\u5e55\u5c3a\u5bf8\u8c03\u6574\u76ee\u6807\u53c2\u6570（\u4f18\u5316\u7248\u672c）
\n function adjustTargetParameters() {
\n const canvasWidth = canvas.width;
\n const canvasHeight = canvas.height;<\/p>\n
if (isMobile && window.innerWidth < 768) {
\n \/\/ \u79fb\u52a8\u7aef\u7ad6\u5c4f\u8c03\u6574
\n if (canvasWidth < 400) {
\n targetCols = 6;
\n targetRows = 4;
\n targetWidth = Math.max(40, (canvasWidth – targetOffsetLeft * 2 – targetPadding * (targetCols – 1)) \/ targetCols);
\n targetHeight = 15;
\n targetPadding = 3;
\n targetOffsetTop = 40;
\n targetOffsetLeft = (canvasWidth – (targetCols * targetWidth + (targetCols – 1) * targetPadding)) \/ 2;
\n } else {
\n targetCols = 8;
\n targetRows = 5;
\n targetWidth = Math.max(45, (canvasWidth – targetOffsetLeft * 2 – targetPadding * (targetCols – 1)) \/ targetCols);
\n targetHeight = 18;
\n targetPadding = 4;
\n targetOffsetTop = 45;
\n targetOffsetLeft = (canvasWidth – (targetCols * targetWidth + (targetCols – 1) * targetPadding)) \/ 2;
\n }<\/p>\n
\/\/ \u786e\u4fdd\u76ee\u6807\u4e0d\u4f1a\u592a\u5c0f\u6216\u592a\u5927
\n targetWidth = Math.min(Math.max(targetWidth, 40), 70);
\n targetHeight = Math.min(Math.max(targetHeight, 12), 20);<\/p>\n
\/\/ \u786e\u4fdd\u76ee\u6807\u4e0d\u4f1a\u8d85\u51fa\u5c4f\u5e55
\n const totalWidth = targetCols * targetWidth + (targetCols – 1) * targetPadding;
\n if (totalWidth > canvasWidth – 10) {
\n targetWidth = (canvasWidth – 10 – (targetCols – 1) * targetPadding) \/ targetCols;
\n }
\n } else {
\n \/\/ PC\u7aef\u9ed8\u8ba4\u53c2\u6570
\n targetCols = 10;
\n targetRows = 5;
\n targetWidth = 70;
\n targetHeight = 20;
\n targetPadding = 5;
\n targetOffsetTop = 50;
\n targetOffsetLeft = 25;<\/p>\n
\/\/ \u5982\u679c\u753b\u5e03\u8f83\u5c0f，\u9002\u5f53\u8c03\u6574
\n if (canvasWidth < 600) {
\n targetCols = 8;
\n targetWidth = Math.max(50, (canvasWidth – targetOffsetLeft * 2 – targetPadding * (targetCols – 1)) \/ targetCols);
\n }
\n }
\n }<\/p>\n
\/\/ \u521d\u59cb\u5316\u76ee\u6807
\n function initTargets() {
\n targets = [];
\n adjustTargetParameters();<\/p>\n
for (let r = 0; r < targetRows; r++) {
\n for (let c = 0; c < targetCols; c++) {
\n \/\/ \u968f\u673a\u751f\u6210\u7279\u6b8a\u76ee\u6807
\n let isSpecial = Math.random() < 0.1; \/\/ 10%\u6982\u7387\u751f\u6210\u7279\u6b8a\u76ee\u6807
\n let color, points, isLife;<\/p>\n
if (isSpecial) {
\n \/\/ \u968f\u673a\u9009\u62e9\u7279\u6b8a\u76ee\u6807\u7c7b\u578b
\n if (Math.random() < 0.5) {
\n color = '#FFD700'; \/\/ \u91d1\u8272\u76ee\u6807 – \u9ad8\u5206
\n points = 50;
\n isLife = false;
\n } else {
\n color = '#FF5252'; \/\/ \u7ea2\u8272\u76ee\u6807 – \u6062\u590d\u751f\u547d
\n points = 10;
\n isLife = true;
\n }
\n } else {
\n \/\/ \u666e\u901a\u76ee\u6807
\n const hue = 200 + (r * 20); \/\/ \u4e0d\u540c\u884c\u7684\u989c\u8272\u4e0d\u540c
\n color = `hsl(${hue}, 70%, 60%)`;
\n points = 10;
\n isLife = false;
\n }<\/p>\n
targets.push({
\n x: c * (targetWidth + targetPadding) + targetOffsetLeft,
\n y: r * (targetHeight + targetPadding) + targetOffsetTop,
\n width: targetWidth,
\n height: targetHeight,
\n color: color,
\n points: points,
\n isLife: isLife,
\n visible: true
\n });
\n }
\n }
\n }<\/p>\n
\/\/ \u521d\u59cb\u5316\u6e38\u620f
\n function initGame() {
\n score = 0;
\n lives = 3;
\n level = 1;
\n ballOnPaddle = true;
\n lastScoreForEffect = 0;<\/p>\n
\/\/ \u91cd\u7f6e\u7403\u62cd\u4f4d\u7f6e
\n paddle.x = canvas.width \/ 2 – paddle.width \/ 2;<\/p>\n
\/\/ \u6839\u636e\u8bbe\u5907\u8c03\u6574\u7403\u62cd\u5927\u5c0f
\n if (isMobile) {
\n paddle.width = Math.min(120, canvas.width * 0.2);
\n paddle.speed = 6;
\n } else {
\n paddle.width = 100;
\n paddle.speed = 8;
\n }<\/p>\n
\/\/ \u8c03\u6574\u7403\u7684\u5927\u5c0f
\n ball.radius = isMobile ? Math.min(10, canvas.width * 0.02) : 10;<\/p>\n
\/\/ \u91cd\u7f6e\u7403\u4f4d\u7f6e\u548c\u901f\u5ea6（\u5728\u7403\u62cd\u4e0a\u7b49\u5f85\u53d1\u5c04）
\n ball.x = paddle.x + paddle.width \/ 2;
\n ball.y = paddle.y – ball.radius;
\n ball.speedX = 0;
\n ball.speedY = 0;<\/p>\n
\/\/ \u521d\u59cb\u5316\u76ee\u6807
\n initTargets();<\/p>\n
\/\/ \u66f4\u65b0UI
\n updateUI();<\/p>\n
\/\/ \u9690\u85cf\u6e38\u620f\u7ed3\u675f\u754c\u9762
\n document.getElementById('gameOver').style.display = 'none';<\/p>\n
\/\/ \u64ad\u653e\u80cc\u666f\u97f3\u4e50
\n if (musicEnabled) {
\n backgroundMusic.volume = 0.5;
\n backgroundMusic.play().catch(e => console.log("\u81ea\u52a8\u64ad\u653e\u88ab\u963b\u6b62，\u9700\u8981\u7528\u6237\u4ea4\u4e92"));
\n }
\n }<\/p>\n
\/\/ \u7ed8\u5236\u7403\u62cd
\n function drawPaddle() {
\n \/\/ \u7ed8\u5236\u7403\u62cd\u9634\u5f71
\n ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
\n ctx.shadowBlur = 5;
\n ctx.shadowOffsetX = 2;
\n ctx.shadowOffsetY = 2;<\/p>\n
\/\/ \u7ed8\u5236\u7403\u62cd\u4e3b\u4f53
\n ctx.fillStyle = paddle.color;
\n ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);<\/p>\n
\/\/ \u7ed8\u5236\u7403\u62cd\u8fb9\u6846
\n ctx.strokeStyle = paddle.borderColor;
\n ctx.lineWidth = 2;
\n ctx.strokeRect(paddle.x, paddle.y, paddle.width, paddle.height);<\/p>\n
\/\/ \u7ed8\u5236\u7403\u62cd\u5185\u90e8\u7ec6\u8282
\n ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
\n ctx.fillRect(paddle.x + 5, paddle.y + 3, paddle.width – 10, paddle.height – 6);<\/p>\n
\/\/ \u91cd\u7f6e\u9634\u5f71
\n ctx.shadowColor = 'transparent';
\n ctx.shadowBlur = 0;
\n ctx.shadowOffsetX = 0;
\n ctx.shadowOffsetY = 0;
\n }<\/p>\n
\/\/ \u7ed8\u5236\u7403
\n function drawBall() {
\n \/\/ \u5982\u679c\u7403\u5728\u7403\u62cd\u4e0a\u7b49\u5f85\u53d1\u5c04，\u7ed8\u5236\u7279\u6b8a\u6548\u679c
\n if (ballOnPaddle) {
\n \/\/ \u7ed8\u5236\u8109\u52a8\u6548\u679c
\n const pulseSize = Math.sin(Date.now() \/ 200) * 2;<\/p>\n
\/\/ \u7ed8\u5236\u7403\u9634\u5f71
\n ctx.shadowColor = 'rgba(255, 215, 0, 0.5)';
\n ctx.shadowBlur = 10 + pulseSize * 3;
\n ctx.shadowOffsetX = 0;
\n ctx.shadowOffsetY = 0;<\/p>\n
\/\/ \u7ed8\u5236\u7403\u4f53
\n ctx.beginPath();
\n ctx.arc(ball.x, ball.y, ball.radius + pulseSize, 0, Math.PI * 2);
\n ctx.fillStyle = '#FFD700';
\n ctx.fill();<\/p>\n
\/\/ \u7ed8\u5236\u7403\u8fb9\u6846
\n ctx.strokeStyle = '#FFA500';
\n ctx.lineWidth = 2;
\n ctx.stroke();<\/p>\n
\/\/ \u53ea\u5728PC\u7aef\u663e\u793a\u63d0\u793a\u6587\u5b57
\n if (!isMobile) {
\n ctx.font = "14px Arial";
\n ctx.fillStyle = "#FFFFFF";
\n ctx.textAlign = "center";
\n ctx.fillText("\u6309\u7a7a\u683c\u53d1\u5c04", ball.x, ball.y – ball.radius – 15);
\n }<\/p>\n
\/\/ \u91cd\u7f6e\u9634\u5f71
\n ctx.shadowColor = 'transparent';
\n ctx.shadowBlur = 0;
\n } else {
\n \/\/ \u6b63\u5e38\u7ed8\u5236\u7403
\n ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
\n ctx.shadowBlur = 8;
\n ctx.shadowOffsetX = 2;
\n ctx.shadowOffsetY = 2;<\/p>\n
ctx.beginPath();
\n ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
\n ctx.fillStyle = ball.color;
\n ctx.fill();<\/p>\n
ctx.strokeStyle = ball.borderColor;
\n ctx.lineWidth = 2;
\n ctx.stroke();<\/p>\n
ctx.shadowColor = 'transparent';
\n ctx.shadowBlur = 0;
\n }<\/p>\n
\/\/ \u7ed8\u5236\u7403\u9ad8\u5149
\n ctx.beginPath();
\n ctx.arc(ball.x – ball.radius\/3, ball.y – ball.radius\/3, ball.radius\/3, 0, Math.PI * 2);
\n ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
\n ctx.fill();
\n }<\/p>\n
\/\/ \u7ed8\u5236\u76ee\u6807
\n function drawTargets() {
\n targets.forEach(target => {
\n if (!target.visible) return;<\/p>\n
\/\/ \u7ed8\u5236\u76ee\u6807\u9634\u5f71
\n ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
\n ctx.shadowBlur = 3;
\n ctx.shadowOffsetX = 1;
\n ctx.shadowOffsetY = 1;<\/p>\n
\/\/ \u7ed8\u5236\u76ee\u6807\u4e3b\u4f53
\n ctx.fillStyle = target.color;
\n ctx.fillRect(target.x, target.y, target.width, target.height);<\/p>\n
\/\/ \u7ed8\u5236\u76ee\u6807\u8fb9\u6846
\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
\n ctx.lineWidth = 1;
\n ctx.strokeRect(target.x, target.y, target.width, target.height);<\/p>\n
\/\/ \u7279\u6b8a\u76ee\u6807\u6dfb\u52a0\u989d\u5916\u6548\u679c
\n if (target.points === 50) {
\n \/\/ \u91d1\u8272\u76ee\u6807\u7684\u7279\u6b8a\u6548\u679c
\n ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
\n ctx.fillRect(target.x + 5, target.y + 3, target.width – 10, target.height – 6);
\n } else if (target.isLife) {
\n \/\/ \u751f\u547d\u76ee\u6807\u7684\u7279\u6b8a\u6548\u679c
\n ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
\n ctx.beginPath();
\n ctx.arc(target.x + target.width\/2, target.y + target.height\/2, target.height\/3, 0, Math.PI * 2);
\n ctx.fill();
\n }<\/p>\n
\/\/ \u91cd\u7f6e\u9634\u5f71
\n ctx.shadowColor = 'transparent';
\n ctx.shadowBlur = 0;
\n ctx.shadowOffsetX = 0;
\n ctx.shadowOffsetY = 0;
\n });
\n }<\/p>\n
\/\/ \u7ed8\u5236\u80cc\u666f
\n function drawBackground() {
\n \/\/ \u6e05\u9664\u753b\u5e03，\u4f7f\u7528\u534a\u900f\u660e\u9ed1\u8272\u5b9e\u73b0\u6e10\u9690\u6548\u679c
\n ctx.fillStyle = 'rgba(10, 15, 35, 0.2)';
\n ctx.fillRect(0, 0, canvas.width, canvas.height);<\/p>\n
\/\/ \u7ed8\u5236\u7f51\u683c\u7ebf
\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
\n ctx.lineWidth = 1;<\/p>\n
\/\/ \u5782\u76f4\u7ebf
\n for (let x = 0; x < canvas.width; x += 40) {
\n ctx.beginPath();
\n ctx.moveTo(x, 0);
\n ctx.lineTo(x, canvas.height);
\n ctx.stroke();
\n }<\/p>\n
\/\/ \u6c34\u5e73\u7ebf
\n for (let y = 0; y < canvas.height; y += 40) {
\n ctx.beginPath();
\n ctx.moveTo(0, y);
\n ctx.lineTo(canvas.width, y);
\n ctx.stroke();
\n }
\n }<\/p>\n
\/\/ \u521b\u5efa\u5f97\u5206\u52a8\u753b
\n function createScoreAnimation(x, y, points) {
\n const canvasContainer = document.querySelector('.canvas-container');
\n const scorePopup = document.createElement('div');
\n scorePopup.className = 'score-popup';
\n scorePopup.textContent = `+${points}`;<\/p>\n
\/\/ \u6839\u636e\u8bbe\u5907\u8c03\u6574\u5b57\u4f53\u5927\u5c0f
\n const fontSize = isMobile ? '20px' : '28px';
\n scorePopup.style.fontSize = fontSize;<\/p>\n
\/\/ \u8ba1\u7b97\u76f8\u5bf9\u4e8e\u5bb9\u5668\u7684\u4f4d\u7f6e
\n const rect = canvas.getBoundingClientRect();
\n const containerRect = canvasContainer.getBoundingClientRect();
\n const relativeX = x * (rect.width \/ canvas.width);
\n const relativeY = y * (rect.height \/ canvas.height);<\/p>\n
scorePopup.style.left = `${relativeX}px`;
\n scorePopup.style.top = `${relativeY}px`;<\/p>\n
canvasContainer.appendChild(scorePopup);<\/p>\n
\/\/ \u52a8\u753b\u7ed3\u675f\u540e\u79fb\u9664\u5143\u7d20
\n setTimeout(() => {
\n if (scorePopup.parentNode) {
\n scorePopup.parentNode.removeChild(scorePopup);
\n }
\n }, 1000);
\n }<\/p>\n
\/\/ \u53d1\u5c04\u7403
\n function launchBall() {
\n if (ballOnPaddle && gameRunning && !gamePaused) {
\n ballOnPaddle = false;
\n \/\/ \u8bbe\u7f6e\u7403\u7684\u521d\u59cb\u901f\u5ea6
\n const baseSpeed = isMobile ? 4 : 5;
\n ball.speedX = (Math.random() > 0.5 ? 1 : -1) * baseSpeed;
\n ball.speedY = -baseSpeed;
\n }
\n }<\/p>\n
\/\/ \u66f4\u65b0\u7403\u7684\u4f4d\u7f6e
\n function updateBall() {
\n if (ballOnPaddle) {
\n \/\/ \u7403\u5728\u7403\u62cd\u4e0a，\u8ddf\u968f\u7403\u62cd\u79fb\u52a8
\n ball.x = paddle.x + paddle.width \/ 2;
\n ball.y = paddle.y – ball.radius;
\n } else {
\n \/\/ \u79fb\u52a8\u7403
\n ball.x += ball.speedX;
\n ball.y += ball.speedY;<\/p>\n
\/\/ \u68c0\u6d4b\u4e0e\u5899\u58c1\u7684\u78b0\u649e
\n if (ball.x + ball.radius > canvas.width || ball.x – ball.radius < 0) {
\n ball.speedX = -ball.speedX;
\n }<\/p>\n
\/\/ \u68c0\u6d4b\u4e0e\u5929\u82b1\u677f\u7684\u78b0\u649e
\n if (ball.y – ball.radius < 0) {
\n ball.speedY = -ball.speedY;
\n }<\/p>\n
\/\/ \u68c0\u6d4b\u4e0e\u7403\u62cd\u7684\u78b0\u649e
\n if (
\n ball.y + ball.radius > paddle.y &&
\n ball.y – ball.radius < paddle.y + paddle.height &&
\n ball.x > paddle.x &&
\n ball.x < paddle.x + paddle.width
\n ) {
\n \/\/ \u6839\u636e\u51fb\u4e2d\u7403\u62cd\u7684\u4f4d\u7f6e\u8c03\u6574\u53cd\u5f39\u89d2\u5ea6
\n let hitPoint = (ball.x – paddle.x) \/ paddle.width;
\n const angleMultiplier = isMobile ? 8 : 10;
\n ball.speedX = (hitPoint – 0.5) * angleMultiplier;
\n ball.speedY = -Math.abs(ball.speedY); \/\/ \u786e\u4fdd\u7403\u5411\u4e0a\u53cd\u5f39
\n }<\/p>\n
\/\/ \u68c0\u6d4b\u7403\u662f\u5426\u843d\u5230\u5e95\u90e8
\n if (ball.y + ball.radius > canvas.height) {
\n lives–;
\n updateUI();<\/p>\n
if (lives <= 0) {
\n gameOver();
\n } else {
\n \/\/ \u91cd\u7f6e\u7403\u7684\u4f4d\u7f6e\u5230\u7403\u62cd\u4e0a
\n ballOnPaddle = true;
\n ball.x = paddle.x + paddle.width \/ 2;
\n ball.y = paddle.y – ball.radius;
\n ball.speedX = 0;
\n ball.speedY = 0;
\n }
\n }<\/p>\n
\/\/ \u68c0\u6d4b\u4e0e\u76ee\u6807\u7684\u78b0\u649e
\n targets.forEach(target => {
\n if (!target.visible) return;<\/p>\n
if (
\n ball.x + ball.radius > target.x &&
\n ball.x – ball.radius < target.x + target.width &&
\n ball.y + ball.radius > target.y &&
\n ball.y – ball.radius < target.y + target.height
\n ) {
\n \/\/ \u51fb\u4e2d\u76ee\u6807
\n target.visible = false;
\n ball.speedY = -ball.speedY;<\/p>\n
\/\/ \u66f4\u65b0\u5206\u6570
\n score += target.points;<\/p>\n
\/\/ \u521b\u5efa\u5f97\u5206\u52a8\u753b
\n createScoreAnimation(ball.x, ball.y – 20, target.points);<\/p>\n
\/\/ \u64ad\u653e\u51fb\u7403\u5f97\u5206\u97f3\u6548
\n if (musicEnabled) {
\n winSound.currentTime = 0;
\n winSound.play().catch(e => console.log("\u5f97\u5206\u97f3\u6548\u64ad\u653e\u5931\u8d25"));
\n }<\/p>\n
\/\/ \u68c0\u67e5\u662f\u5426\u9700\u8981\u89e6\u53d1\u82b1\u6735\u7279\u6548
\n if (Math.floor(score \/ 100) > Math.floor(lastScoreForEffect \/ 100)) {
\n createFlowerEffect();
\n lastScoreForEffect = score;<\/p>\n
\/\/ \u64ad\u653e\u989d\u5916\u7684\u5f97\u5206\u97f3\u6548
\n if (musicEnabled) {
\n scoreSound.currentTime = 0;
\n scoreSound.play().catch(e => console.log("\u97f3\u6548\u64ad\u653e\u5931\u8d25"));
\n }
\n }<\/p>\n
\/\/ \u5982\u679c\u662f\u751f\u547d\u76ee\u6807，\u589e\u52a0\u751f\u547d\u503c
\n if (target.isLife) {
\n lives = Math.min(lives + 1, 5); \/\/ \u6700\u591a5\u6761\u547d
\n }<\/p>\n
\/\/ \u66f4\u65b0\u7b49\u7ea7
\n let newLevel = Math.floor(score \/ 100) + 1;
\n if (newLevel > level) {
\n level = newLevel;
\n \/\/ \u6bcf\u5347\u4e00\u7ea7，\u7403\u901f\u589e\u52a0
\n const speedIncrease = isMobile ? 1.05 : 1.1;
\n ball.speedX *= speedIncrease;
\n ball.speedY *= speedIncrease;
\n }<\/p>\n
updateUI();<\/p>\n
\/\/ \u68c0\u67e5\u662f\u5426\u6240\u6709\u76ee\u6807\u90fd\u88ab\u51fb\u4e2d
\n if (targets.every(t => !t.visible)) {
\n \/\/ \u6240\u6709\u76ee\u6807\u88ab\u51fb\u4e2d，\u91cd\u65b0\u751f\u6210
\n initTargets();
\n \/\/ \u5956\u52b1\u989d\u5916\u751f\u547d
\n lives = Math.min(lives + 1, 5);
\n updateUI();
\n }
\n }
\n });
\n }
\n }<\/p>\n
\/\/ \u521b\u5efa\u82b1\u6735\u7279\u6548
\n function createFlowerEffect() {
\n const flowerContainer = document.getElementById('flower-effects');
\n const flowerCount = isMobile ? 20 : 30; \/\/ \u79fb\u52a8\u7aef\u51cf\u5c11\u82b1\u6735\u6570\u91cf<\/p>\n
for (let i = 0; i < flowerCount; i++) {
\n const flower = document.createElement('div');
\n flower.className = 'flower';<\/p>\n
\/\/ \u968f\u673a\u9009\u62e9\u82b1\u6735\u56fe\u6807\u548c\u989c\u8272
\n const iconIndex = Math.floor(Math.random() * flowerIcons.length);
\n const colorIndex = Math.floor(Math.random() * flowerColors.length);<\/p>\n
flower.textContent = flowerIcons[iconIndex];
\n flower.style.color = flowerColors[colorIndex];
\n flower.style.left = Math.random() * 100 + 'vw';
\n flower.style.fontSize = (isMobile ? 16 : 20) + Math.random() * (isMobile ? 15 : 20) + 'px';<\/p>\n
\/\/ \u968f\u673a\u52a8\u753b\u53c2\u6570
\n const duration = 3 + Math.random() * 4; \/\/ 3-7\u79d2
\n const delay = Math.random() * 2; \/\/ 0-2\u79d2\u5ef6\u8fdf
\n const horizontalMove = (Math.random() – 0.5) * 100; \/\/ \u6c34\u5e73\u79fb\u52a8\u8ddd\u79bb<\/p>\n
flower.style.animation = `fall ${duration}s linear ${delay}s forwards`;
\n flower.style.transform = `translateX(${horizontalMove}px)`;<\/p>\n
flowerContainer.appendChild(flower);<\/p>\n
\/\/ \u52a8\u753b\u7ed3\u675f\u540e\u79fb\u9664\u82b1\u6735\u5143\u7d20
\n setTimeout(() => {
\n if (flower.parentNode) {
\n flower.parentNode.removeChild(flower);
\n }
\n }, (duration + delay) * 1000);
\n }
\n }<\/p>\n
\/\/ \u66f4\u65b0UI
\n function updateUI() {
\n document.getElementById('score').textContent = score;
\n document.getElementById('lives').textContent = lives;
\n document.getElementById('level').textContent = level;
\n }<\/p>\n
\/\/ \u6e38\u620f\u7ed3\u675f
\n function gameOver() {
\n gameRunning = false;
\n cancelAnimationFrame(animationId);<\/p>\n
document.getElementById('finalScore').textContent = score;
\n document.getElementById('gameOver').style.display = 'block';
\n }<\/p>\n
\/\/ \u6e38\u620f\u4e3b\u5faa\u73af
\n function gameLoop() {
\n \/\/ \u7ed8\u5236\u6e38\u620f\u80cc\u666f
\n drawBackground();<\/p>\n
\/\/ \u7ed8\u5236\u6e38\u620f\u5143\u7d20
\n drawTargets();
\n drawPaddle();
\n drawBall();<\/p>\n
\/\/ \u66f4\u65b0\u6e38\u620f\u72b6\u6001
\n if (!gamePaused && gameRunning) {
\n updateBall();
\n }<\/p>\n
\/\/ \u7ee7\u7eed\u6e38\u620f\u5faa\u73af
\n if (gameRunning) {
\n animationId = requestAnimationFrame(gameLoop);
\n }
\n }<\/p>\n
\/\/ \u952e\u76d8\u63a7\u5236
\n const keys = {};<\/p>\n
window.addEventListener('keydown', (e) => {
\n keys[e.key] = true;<\/p>\n
\/\/ \u7a7a\u683c\u952e\u53d1\u5c04\u7403\u6216\u6682\u505c\u6e38\u620f
\n if (e.key === ' ' && gameRunning) {
\n if (ballOnPaddle) {
\n launchBall();
\n } else {
\n togglePause();
\n }
\n e.preventDefault(); \/\/ \u9632\u6b62\u7a7a\u683c\u952e\u6eda\u52a8\u9875\u9762
\n }<\/p>\n
\/\/ R\u952e\u91cd\u65b0\u5f00\u59cb
\n if (e.key === 'r' || e.key === 'R') {
\n restartGame();
\n }
\n });<\/p>\n
window.addEventListener('keyup', (e) => {
\n keys[e.key] = false;
\n });<\/p>\n
\/\/ \u5904\u7406\u7403\u62cd\u79fb\u52a8
\n function handlePaddleMovement() {
\n if (keys['ArrowLeft'] || keys['Left'] || keys['a'] || keys['A']) {
\n paddle.x = Math.max(0, paddle.x – paddle.speed);
\n }<\/p>\n
if (keys['ArrowRight'] || keys['Right'] || keys['d'] || keys['D']) {
\n paddle.x = Math.min(canvas.width – paddle.width, paddle.x + paddle.speed);
\n }<\/p>\n
\/\/ \u6bcf\u5e27\u8c03\u7528
\n if (gameRunning && !gamePaused) {
\n requestAnimationFrame(handlePaddleMovement);
\n }
\n }<\/p>\n
\/\/ \u5207\u6362\u6682\u505c\u72b6\u6001
\n function togglePause() {
\n gamePaused = !gamePaused;
\n \/\/ PC\u7aef\u66f4\u65b0\u6309\u94ae\u6587\u672c
\n if (!isMobile) {
\n document.getElementById('pauseBtn').innerHTML = gamePaused ?
\n '<i class="fas fa-play"><\/i><span>\u7ee7\u7eed\u6e38\u620f<\/span>' :
\n '<i class="fas fa-pause"><\/i><span>\u6682\u505c\u6e38\u620f<\/span>';
\n }<\/p>\n
if (!gamePaused && gameRunning) {
\n handlePaddleMovement();
\n }
\n }<\/p>\n
\/\/ \u5f00\u59cb\u6e38\u620f
\n function startGame() {
\n if (!gameRunning) {
\n initGame();
\n gameRunning = true;
\n gamePaused = false;
\n if (!isMobile) {
\n document.getElementById('pauseBtn').innerHTML = '<i class="fas fa-pause"><\/i><span>\u6682\u505c\u6e38\u620f<\/span>';
\n }
\n gameLoop();
\n handlePaddleMovement();
\n }
\n }<\/p>\n
\/\/ \u6682\u505c\u6e38\u620f
\n function pauseGame() {
\n if (gameRunning) {
\n togglePause();
\n }
\n }<\/p>\n
\/\/ \u91cd\u65b0\u5f00\u59cb\u6e38\u620f
\n function restartGame() {
\n gameRunning = false;
\n gamePaused = false;
\n cancelAnimationFrame(animationId);
\n startGame();
\n }<\/p>\n
\/\/ \u97f3\u9891\u63a7\u5236
\n document.getElementById('audioToggle').addEventListener('click', function() {
\n musicEnabled = !musicEnabled;
\n const icon = document.getElementById('audioIcon');<\/p>\n
if (musicEnabled) {
\n icon.className = 'fas fa-volume-up';
\n backgroundMusic.volume = 0.5;
\n backgroundMusic.play().catch(e => console.log("\u97f3\u9891\u64ad\u653e\u9700\u8981\u7528\u6237\u4ea4\u4e92"));
\n } else {
\n icon.className = 'fas fa-volume-mute';
\n backgroundMusic.pause();
\n }
\n });<\/p>\n
\/\/ \u79fb\u52a8\u7aef\u63a7\u5236
\n document.getElementById('mobileLeft').addEventListener('touchstart', function(e) {
\n e.preventDefault();
\n keys['ArrowLeft'] = true;
\n });<\/p>\n
document.getElementById('mobileLeft').addEventListener('touchend', function(e) {
\n e.preventDefault();
\n keys['ArrowLeft'] = false;
\n });<\/p>\n
document.getElementById('mobileRight').addEventListener('touchstart', function(e) {
\n e.preventDefault();
\n keys['ArrowRight'] = true;
\n });<\/p>\n
document.getElementById('mobileRight').addEventListener('touchend', function(e) {
\n e.preventDefault();
\n keys['ArrowRight'] = false;
\n });<\/p>\n
document.getElementById('mobileSpace').addEventListener('touchstart', function(e) {
\n e.preventDefault();
\n if (gameRunning) {
\n if (ballOnPaddle) {
\n launchBall();
\n } else {
\n togglePause();
\n }
\n }
\n });<\/p>\n
\/\/ \u4e8b\u4ef6\u76d1\u542c – PC\u7aef\u6309\u94ae
\n document.getElementById('startBtn').addEventListener('click', startGame);
\n document.getElementById('pauseBtn').addEventListener('click', pauseGame);
\n document.getElementById('restartBtn').addEventListener('click', restartGame);
\n document.getElementById('playAgainBtn').addEventListener('click', restartGame);<\/p>\n
\/\/ \u7a97\u53e3\u8c03\u6574\u5927\u5c0f\u65f6\u8c03\u6574Canvas
\n function resizeCanvas() {
\n const container = document.querySelector('.canvas-container');
\n const containerWidth = Math.min(container.clientWidth, 800);
\n const containerHeight = container.clientHeight;<\/p>\n
\/\/ \u8bbe\u7f6eCanvas\u5c3a\u5bf8
\n canvas.width = containerWidth;
\n canvas.height = containerHeight;<\/p>\n
\/\/ \u91cd\u65b0\u8c03\u6574\u7403\u62cd\u4f4d\u7f6e
\n paddle.y = canvas.height – 30;<\/p>\n
\/\/ \u6839\u636e\u8bbe\u5907\u8c03\u6574\u7403\u62cd\u5bbd\u5ea6
\n if (isMobile) {
\n paddle.width = Math.min(120, containerWidth * 0.2);
\n paddle.speed = 6;
\n } else {
\n paddle.width = 100;
\n paddle.speed = 8;
\n }<\/p>\n
\/\/ \u8c03\u6574\u7403\u7684\u5927\u5c0f
\n ball.radius = isMobile ? Math.min(10, containerWidth * 0.02) : 10;<\/p>\n
\/\/ \u5982\u679c\u7403\u5728\u7403\u62cd\u4e0a，\u8c03\u6574\u7403\u7684\u4f4d\u7f6e
\n if (ballOnPaddle) {
\n ball.x = paddle.x + paddle.width \/ 2;
\n ball.y = paddle.y – ball.radius;
\n }<\/p>\n
\/\/ \u5982\u679c\u6e38\u620f\u8fd0\u884c\u4e2d，\u91cd\u65b0\u521d\u59cb\u5316\u76ee\u6807\u4ee5\u9002\u5e94\u65b0\u5c3a\u5bf8
\n if (gameRunning) {
\n initTargets();
\n }
\n }<\/p>\n
\/\/ \u521d\u59cb\u8c03\u6574Canvas\u5927\u5c0f
\n window.addEventListener('load', () => {
\n \/\/ \u68c0\u6d4b\u8bbe\u5907\u7c7b\u578b
\n detectDevice();<\/p>\n
\/\/ \u521d\u59cb\u5316Canvas
\n resizeCanvas();<\/p>\n
\/\/ \u81ea\u52a8\u5f00\u59cb\u6e38\u620f
\n setTimeout(() => {
\n startGame();
\n }, 500);<\/p>\n
\/\/ \u9884\u52a0\u8f7d\u97f3\u9891
\n winSound.load();<\/p>\n
\/\/ \u5c1d\u8bd5\u64ad\u653e\u80cc\u666f\u97f3\u4e50（\u9700\u8981\u7528\u6237\u4ea4\u4e92）
\n document.addEventListener('click', function initAudio() {
\n if (musicEnabled) {
\n backgroundMusic.volume = 0.5;
\n backgroundMusic.play().catch(e => console.log("\u97f3\u9891\u64ad\u653e\u9700\u8981\u7528\u6237\u4ea4\u4e92"));
\n }
\n document.removeEventListener('click', initAudio);
\n });
\n });<\/p>\n
window.addEventListener('resize', resizeCanvas);<\/p>\n
\/\/ \u89e6\u6478\u8bbe\u5907\u652f\u6301
\n let touchStartX = 0;<\/p>\n
canvas.addEventListener('touchstart', (e) => {
\n if (!gameRunning || gamePaused) return;<\/p>\n
e.preventDefault();
\n const touch = e.touches[0];
\n const rect = canvas.getBoundingClientRect();
\n touchStartX = touch.clientX – rect.left;
\n }, { passive: false });<\/p>\n
canvas.addEventListener('touchmove', (e) => {
\n if (!gameRunning || gamePaused) return;<\/p>\n
e.preventDefault();
\n const touch = e.touches[0];
\n const rect = canvas.getBoundingClientRect();
\n const touchX = touch.clientX – rect.left;<\/p>\n
\/\/ \u8ba1\u7b97\u79fb\u52a8\u8ddd\u79bb\u5e76\u66f4\u65b0\u7403\u62cd\u4f4d\u7f6e
\n const deltaX = touchX – touchStartX;
\n paddle.x += deltaX;<\/p>\n
\/\/ \u9650\u5236\u7403\u62cd\u5728\u753b\u5e03\u5185
\n if (paddle.x < 0) paddle.x = 0;
\n if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width – paddle.width;<\/p>\n
\/\/ \u66f4\u65b0\u8d77\u59cb\u89e6\u6478\u4f4d\u7f6e
\n touchStartX = touchX;<\/p>\n
\/\/ \u5982\u679c\u7403\u5728\u7403\u62cd\u4e0a，\u66f4\u65b0\u7403\u7684\u4f4d\u7f6e
\n if (ballOnPaddle) {
\n ball.x = paddle.x + paddle.width \/ 2;
\n }
\n }, { passive: false });<\/p>\n
\/\/ \u70b9\u51fb\u753b\u5e03\u53d1\u5c04\u7403（\u79fb\u52a8\u7aef）
\n canvas.addEventListener('touchend', (e) => {
\n if (!gameRunning || gamePaused) return;<\/p>\n
e.preventDefault();
\n \/\/ \u79fb\u52a8\u7aef\u70b9\u51fb\u53d1\u5c04\u7403
\n if (ballOnPaddle) {
\n launchBall();
\n }
\n }, { passive: false });<\/p>\n
\/\/ \u9632\u6b62\u9875\u9762\u6eda\u52a8
\n document.addEventListener('touchmove', function(e) {
\n if (gameRunning) {
\n e.preventDefault();
\n }
\n }, { passive: false });<\/p>\n
\/\/ \u9632\u6b62\u53cc\u51fb\u7f29\u653e
\n let lastTouchEnd = 0;
\n document.addEventListener('touchend', function(event) {
\n const now = (new Date()).getTime();
\n if (now – lastTouchEnd <= 300) {
\n event.preventDefault();
\n }
\n lastTouchEnd = now;
\n }, false);
\n <\/script>
\n<\/body>
\n<\/html> <\/p>\n","protected":false},"excerpt":{"rendered":"
\u5355\u4eba\u58c1\u7403\u6311\u6218\u8d5b 🎯 \u6838\u5fc3\u76ee\u6807
\n\u7528\u7403\u62cd\u63a7\u5236\u5c0f\u7403，\u51fb\u4e2d\u4e0a\u65b9\u76ee\u6807\u5f97\u5206，\u5c3d\u53ef\u80fd\u83b7\u5f97\u9ad8\u5206\u3002
\n🕹\ufe0f \u57fa\u7840\u64cd\u4f5c
\nPC\u7aef\u63a7\u5236： \u2190 \u2192 \u7bad\u5934\u952e\u00a0\u6216\u00a0A\/D\u952e：\u5de6\u53f3\u79fb\u52a8\u7403\u62cd \u7a7a\u683c\u952e：\u53d1\u5c04\u7403\/\u6682\u505c\u6e38\u620f R\u952e：\u91cd\u65b0\u5f00\u59cb\u6e38\u620f
\n\u79fb\u52a8\u7aef\u63a7\u5236： \u5de6\u53f3\u7bad\u5934\u6309\u94ae：\u79fb\u52a8\u7403\u62cd \u53d1\u5c04\u6309\u94ae：\u53d1\u5c04\u7403\/\u6682\u505c\u6e38\u620f \u6ed1\u52a8\u5c4f\u5e55：\u76f4\u63a5\u79fb\u52a8\u7403\u62cd<\/p>\n","protected":false},"author":2,"featured_media":75023,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[573,964,187,248],"topic":[],"class_list":["post-75024","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-css","tag-html5","tag-javascript","tag-248"],"yoast_head":"\n