坦克大战：钢铁防线
by QuantumComet964212 lines197.9 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cdefs%3E%3ClinearGradient id='tankBodyGradient' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%234CAF50'/%3E%3Cstop offset='100%25' stop-color='%232E7D32'/%3E%3C/linearGradient%3E%3ClinearGradient id='turretGradient' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23388E3C'/%3E%3Cstop offset='100%25' stop-color='%231B5E20'/%3E%3C/linearGradient%3E%3ClinearGradient id='cannonGradient' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23616161'/%3E%3Cstop offset='100%25' stop-color='%23212121'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='14' width='20' height='10' rx='2' fill='url(%23tankBodyGradient)'/%3E%3Crect x='4' y='14' width='2' height='10' fill='%23212121'/%3E%3Crect x='26' y='14' width='2' height='10' fill='%23212121'/%3E%3Crect x='4' y='14' width='2' height='2' fill='%23424242'/%3E%3Crect x='4' y='18' width='2' height='2' fill='%23424242'/%3E%3Crect x='4' y='22' width='2' height='2' fill='%23424242'/%3E%3Crect x='26' y='14' width='2' height='2' fill='%23424242'/%3E%3Crect x='26' y='18' width='2' height='2' fill='%23424242'/%3E%3Crect x='26' y='22' width='2' height='2' fill='%23424242'/%3E%3Ccircle cx='16' cy='16' r='6' fill='url(%23turretGradient)'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%231B5E20'/%3E%3Crect x='15' y='4' width='2' height='12' fill='url(%23cannonGradient)'/%3E%3Crect x='13' y='2' width='6' height='2' fill='%23212121'/%3E%3Crect x='14' y='3' width='4' height='1' fill='%23616161'/%3E%3C/svg%3E"
type="image/svg+xml">
<title>坦克大战：钢铁防线</title>
<style>
.menu-button {
padding: 8px 15px;
font-size: 16px;
background-color: #2196F3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 5px;
transition: background-color 0.3s;
}
.menu-button:hover {
background-color: #1976D2;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #333;
font-family: Arial, sans-serif;
}
#game-container {
position: relative;
}
#gameCanvas {
border: 2px solid #fff;
background-color: #000;
}
#start-screen,
#game-over-screen,
#win-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button {
padding: 10px 20px;
font-size: 18px;
margin-top: 20px;
cursor: pointer;
background-color: #2196F3;
color: white;
border: none;
border-radius: 5px;
position: relative;
z-index: 1;
}
button:hover {
background-color: #1976D2;
}
h1 {
margin-bottom: 40px;
margin-top: -50px;
position: relative;
z-index: 1;
}
.start-screen-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
z-index: 0;
}
</style>
</head>
<body>
<div id="game-container">
<!-- BOSS血条 -->
<div id="boss-health-bar-container"
style="display: none; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10; width: 400px;">
<div id="boss-label"
style="text-align: center; color: #ff0000; font-size: 18px; font-weight: bold; margin-bottom: 5px;"
data-translate="boss">BOSS</div>
<div id="boss-health-bar"
style="width: 100%; height: 20px; background-color: #333; border-radius: 10px; overflow: hidden; border: 2px solid #ff0000;">
<div id="boss-health-fill"
style="width: 100%; height: 100%; background: linear-gradient(90deg, #ff0000, #ff6600); transition: width 0.3s ease;">
</div>
</div>
<div id="boss-health-text" style="text-align: center; color: white; font-size: 14px; margin-top: 5px;">15/15
</div>
</div>
<canvas id="gameCanvas" width="950" height="650"></canvas>
<div id="start-screen">
<!-- 语言切换按钮 -->
<button id="language-btn"
style="position: absolute; top: 10px; right: 10px; padding: 5px 10px; font-size: 14px; background-color: #2196F3; color: white; border: none; border-radius: 5px; cursor: pointer; z-index: 2;">语言/Language</button>
<!-- 语言切换弹窗 -->
<div id="language-modal"
style="display: none; position: absolute; top: 45px; right: 10px; background-color: #333; padding: 10px; border-radius: 5px; z-index: 2;">
<button id="lang-zh"
style="display: block; width: 100%; padding: 8px 16px; margin-bottom: 5px; background-color: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer;">中文</button>
<button id="lang-en"
style="display: block; width: 100%; padding: 8px 16px; background-color: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer;">English</button>
</div>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='950' height='650' viewBox='0 0 950 650'%3E%3Crect width='950' height='650' fill='%23333333'/%3E%3Cg%3E%3Cpath d='M0 50 H950 M0 100 H950 M0 150 H950 M0 200 H950 M0 250 H950 M0 300 H950 M0 350 H950 M0 400 H950 M0 450 H950 M0 500 H950 M0 550 H950 M0 600 H950' stroke='%23666' stroke-width='1'/%3E%3Cpath d='M50 0 V650 M100 0 V650 M150 0 V650 M200 0 V650 M250 0 V650 M300 0 V650 M350 0 V650 M400 0 V650 M450 0 V650 M500 0 V650 M550 0 V650 M600 0 V650 M650 0 V650 M700 0 V650 M750 0 V650 M800 0 V650 M850 0 V650 M900 0 V650' stroke='%23666' stroke-width='1'/%3E%3Ccircle cx='130' cy='80' r='2' fill='%23999'/%3E%3Ccircle cx='250' cy='150' r='1' fill='%23999'/%3E%3Ccircle cx='370' cy='230' r='2' fill='%23999'/%3E%3Ccircle cx='475' cy='320' r='1' fill='%23999'/%3E%3Ccircle cx='590' cy='390' r='2' fill='%23999'/%3E%3Ccircle cx='710' cy='470' r='1' fill='%23999'/%3E%3Ccircle cx='830' cy='530' r='2' fill='%23999'/%3E%3Ccircle cx='190' cy='590' r='1' fill='%23999'/%3E%3Ccircle cx='310' cy='520' r='2' fill='%23999'/%3E%3Ccircle cx='420' cy='450' r='1' fill='%23999'/%3E%3Ccircle cx='540' cy='370' r='2' fill='%23999'/%3E%3Ccircle cx='660' cy='290' r='1' fill='%23999'/%3E%3Ccircle cx='780' cy='210' r='2' fill='%23999'/%3E%3Ccircle cx='85' cy='140' r='1' fill='%23999'/%3E%3C/g%3E%3Cg transform='translate(475, 325) scale(2)'%3E%3Crect x='-30' y='-15' width='60' height='30' fill='%23000'/%3E%3Crect x='-40' y='-10' width='10' height='20' fill='%23000'/%3E%3Crect x='30' y='-10' width='10' height='20' fill='%23000'/%3E%3Crect x='-5' y='-25' width='10' height='10' fill='%23000'/%3E%3Cline x1='0' y1='-25' x2='0' y2='-45' stroke='%23000' stroke-width='6'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M100 100 L120 100 L120 120 L100 120 Z M140 100 L160 100 L160 120 L140 120 Z M100 140 L120 140 L120 160 L100 160 Z M140 140 L160 140 L160 160 L140 160 Z' fill='%23666'/%3E%3Cpath d='M790 100 L810 100 L810 120 L790 120 Z M830 100 L850 100 L850 120 L830 120 Z M790 140 L810 140 L810 160 L790 160 Z M830 140 L850 140 L850 160 L830 160 Z' fill='%23666'/%3E%3Cpath d='M100 490 L120 490 L120 510 L100 510 Z M140 490 L160 490 L160 510 L140 510 Z M100 530 L120 530 L120 550 L100 550 Z M140 530 L160 530 L160 550 L140 550 Z' fill='%23666'/%3E%3Cpath d='M790 490 L810 490 L810 510 L790 510 Z M830 490 L850 490 L850 510 L830 510 Z M790 530 L810 530 L810 550 L790 550 Z M830 530 L850 530 L850 550 L830 550 Z' fill='%23666'/%3E%3C/g%3E%3C/svg%3E"
alt="坦克大战游戏背景" class="start-screen-image">
<h1 id="game-title" data-translate="game-title">坦克大战：钢铁防线</h1>
· <div style="display: flex; align-items: center; gap: 10px;">
· <div id="total-score"
style="font-size: 24px; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); opacity: 0.9;"><span
data-translate="total-score">总分数：</span><span id="total-score-value">0</span></div>
· <button id="reset-score-button" style="padding: 3px 8px; font-size: 14px;"
data-translate="reset-score-button">重置分数</button>
· </div>
<!-- 重置分数确认弹窗 -->
<div id="reset-confirm-dialog"
style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #333; padding: 20px; border-radius: 10px; z-index: 1000;">
<p style="color: white; text-align: center; margin-bottom: 20px; font-size: 18px;"
data-translate="reset-confirm-message">确定重置分数？</p>
<div style="display: flex; justify-content: center; gap: 15px;">
<button id="confirm-reset"
style="padding: 5px 15px; background: #ff4444; color: white; border: none; border-radius: 5px; cursor: pointer;"
data-translate="confirm-reset">确定</button>
<button id="cancel-reset"
style="padding: 5px 15px; background: #444444; color: white; border: none; border-radius: 5px; cursor: pointer;"
data-translate="cancel-reset">取消</button>
</div>
</div>
<div id="dialog-overlay"
style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 999;">
</div>
<!-- 敌人介绍弹窗 -->
<div id="enemy-info-dialog"
style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #333; padding: 20px; border-radius: 10px; z-index: 1000; max-width: 800px; max-height: 80vh; overflow-y: auto;">
<h2 style="color: white; text-align: center; margin-bottom: 20px;" data-translate="enemy-info-title">
敌人介绍</h2>
<div style="color: white; margin-bottom: 20px;">
<h3 data-translate="normal-enemy">普通敌人</h3>
<p data-translate="normal-enemy-desc">速度中等，生命值较低，武器伤害一般。是游戏中最常见的敌人类型。</p>
<svg width="60" height="60" viewBox="0 0 60 60">
<!-- 车身 -->
<rect x="16" y="16" width="28" height="28" fill="#E53935" />
<rect x="18" y="18" width="24" height="24" fill="#C62828" stroke="#B71C1C" stroke-width="1" />
<!-- 炮塔 -->
<circle cx="30" cy="30" r="9" fill="#D32F2F" />
<circle cx="30" cy="30" r="5" fill="#B71C1C" />
<!-- 炮管 -->
<rect x="28" y="0" width="4" height="28" fill="#444" />
<rect x="29" y="-8" width="2" height="8" fill="#333" />
<!-- 履带 -->
<rect x="0" y="14" width="12" height="32" fill="#444" />
<rect x="48" y="14" width="12" height="32" fill="#444" />
<!-- 履带细节 -->
<rect x="1" y="16" width="10" height="6" fill="#555" />
<rect x="1" y="30" width="10" height="6" fill="#555" />
<rect x="1" y="44" width="10" height="6" fill="#555" />
<rect x="49" y="16" width="10" height="6" fill="#555" />
<rect x="49" y="30" width="10" height="6" fill="#555" />
<rect x="49" y="44" width="10" height="6" fill="#555" />
</svg>
</div>
<div style="color: white; margin-bottom: 20px;">
<h3 data-translate="medium-enemy">中型敌人</h3>
<p data-translate="medium-enemy-desc">速度较慢，但生命值比普通敌人高。需要多次攻击才能消灭。</p>
<svg width="70" height="70" viewBox="0 0 70 70">
<!-- 车身 -->
<rect x="18" y="18" width="34" height="34" fill="#FFA726" />
<rect x="20" y="20" width="30" height="30" fill="#FB8C00" stroke="#EF6C00" stroke-width="1" />
<!-- 炮塔 -->
<circle cx="35" cy="35" r="11" fill="#F57C00" />
<circle cx="35" cy="35" r="6" fill="#E65100" />
<!-- 炮管 -->
<rect x="33" y="0" width="4" height="32" fill="#444" />
<rect x="34" y="-10" width="2" height="10" fill="#333" />
<!-- 履带 -->
<rect x="0" y="16" width="14" height="38" fill="#444" />
<rect x="56" y="16" width="14" height="38" fill="#444" />
<!-- 履带细节 -->
<rect x="1" y="18" width="12" height="7" fill="#555" />
<rect x="1" y="35" width="12" height="7" fill="#555" />
<rect x="1" y="52" width="12" height="7" fill="#555" />
<rect x="57" y="18" width="12" height="7" fill="#555" />
<rect x="57" y="35" width="12" height="7" fill="#555" />
<rect x="57" y="52" width="12" height="7" fill="#555" />
</svg>
</div>
<div style="color: white; margin-bottom: 20px;">
<h3 data-translate="boss-enemy">BOSS</h3>
<p data-translate="boss-enemy-desc">
只在第十关现身的终极敌人，体型极为庞大，生命值超高，伤害输出惊人，并且具备一次发射多枚子弹的能力。该敌人战斗时分为三个阶段：第一阶段为普通状态，第二阶段进入加速状态，第三阶段则开启威力强悍的超级状态。
</p>
<svg width="100" height="100" viewBox="0 0 100 100">
<!-- 车身 -->
<rect x="26" y="26" width="48" height="48" fill="#AB47BC" />
<rect x="28" y="28" width="44" height="44" fill="#9C27B0" stroke="#7B1FA2" stroke-width="1" />
<rect x="30" y="30" width="40" height="40" fill="#8E24AA" stroke="#6A1B9A" stroke-width="1" />
<!-- 炮塔 -->
<circle cx="50" cy="50" r="14" fill="#8E24AA" />
<circle cx="50" cy="50" r="8" fill="#7B1FA2" />
<circle cx="50" cy="50" r="4" fill="#6A1B9A" />
<!-- 炮管 -->
<rect x="47" y="0" width="6" height="47" fill="#444" />
<rect x="48" y="-12" width="4" height="12" fill="#333" />
<!-- 履带 -->
<rect x="0" y="24" width="20" height="52" fill="#444" />
<rect x="80" y="24" width="20" height="52" fill="#444" />
<!-- 履带细节 -->
<rect x="1" y="26" width="18" height="10" fill="#555" />
<rect x="1" y="46" width="18" height="10" fill="#555" />
<rect x="1" y="66" width="18" height="10" fill="#555" />
<rect x="81" y="26" width="18" height="10" fill="#555" />
<rect x="81" y="46" width="18" height="10" fill="#555" />
<rect x="81" y="66" width="18" height="10" fill="#555" />
</svg>
</div>
<button id="close-enemy-info"
style="padding: 5px 15px; background: #2196F3; color: white; border: none; border-radius: 5px; cursor: pointer; display: block; margin: 0 auto;"
data-translate="close-enemy-info">关闭</button>
</div>
<!-- 按键介绍弹窗 -->
<div id="control-info-dialog"
style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #333; padding: 20px; border-radius: 10px; z-index: 1000; max-width: 600px;">
<h2 style="color: white; text-align: center; margin-bottom: 20px;" data-translate="control-info-title">
按键介绍</h2>
<div style="color: white; margin-bottom: 15px;">
<h3 data-translate="movement-control">移动控制</h3>
<p><strong data-translate="w-key">W键</strong>: <span data-translate="w-desc">向上移动</span></p>
<p><strong data-translate="s-key">S键</strong>: <span data-translate="s-desc">向下移动</span></p>
<p><strong data-translate="a-key">A键</strong>: <span data-translate="a-desc">向左移动</span></p>
<p><strong data-translate="d-key">D键</strong>: <span data-translate="d-desc">向右移动</span></p>
</div>
<div style="color: white; margin-bottom: 15px;">
<h3 data-translate="shoot-control">射击控制</h3>
<p><strong data-translate="space-key">空格键</strong>: <span data-translate="space-desc">发射子弹</span>
</p>
</div>
<button id="close-control-info"
style="padding: 5px 15px; background: #2196F3; color: white; border: none; border-radius: 5px; cursor: pointer; display: block; margin: 0 auto;"
data-translate="close-control-info">关闭</button>
</div>
<!-- 道具和机关介绍弹窗 -->
<div id="prop-trap-info-dialog"
style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #333; padding: 20px; border-radius: 10px; z-index: 1000; max-width: 800px; max-height: 80vh; overflow-y: auto;">
<h2 style="color: white; text-align: center; margin-bottom: 20px;"
data-translate="prop-trap-info-title">道具和机关介绍</h2>
<div style="color: white; margin-bottom: 20px;">
<h3 data-translate="props">道具</h3>
<div style="margin-bottom: 15px;">
<h4 data-translate="extra-life">额外生命</h4>
<p data-translate="extra-life-desc">拾取后增加一条生命。</p>
<svg width="40" height="40" viewBox="0 0 40 40">
<!-- 渐变圆形 -->
<defs>
<radialGradient id="lifeGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#81C784" />
<stop offset="100%" stop-color="#4CAF50" />
</radialGradient>
</defs>
<circle cx="20" cy="20" r="18" fill="url(#lifeGradient)" stroke="#388E3C"
stroke-width="2" />
<!-- 白色三角形图标 -->
<path d="M20 8 L26 24 L14 24 Z" fill="#fff" />
</svg>
</div>
<div style="margin-bottom: 15px;">
<h4 data-translate="speed-boost">速度提升</h4>
<p data-translate="speed-boost-desc">拾取后5秒内提升坦克移动速度。</p>
<svg width="40" height="40" viewBox="0 0 40 40">
<defs>
<radialGradient id="speedGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFEB3B" />
<stop offset="100%" stop-color="#FFC107" />
</radialGradient>
</defs>
<circle cx="20" cy="20" r="18" fill="url(#speedGradient)" stroke="#FF9800"
stroke-width="2" />
<!-- 速度图标（向右箭头） -->
<path d="M14 20 L26 14 L26 26 Z" fill="#fff" />
</svg>
</div>
<div style="margin-bottom: 15px;">
<h4 data-translate="shield">护盾</h4>
<p data-translate="shield-desc">拾取后5秒内获得护盾保护，免疫一次伤害。</p>
<svg width="40" height="40" viewBox="0 0 40 40">
<defs>
<radialGradient id="shieldGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#64B5F6" />
<stop offset="100%" stop-color="#2196F3" />
</radialGradient>
</defs>
<circle cx="20" cy="20" r="18" fill="url(#shieldGradient)" stroke="#1976D2"
stroke-width="2" />
<!-- 护盾图标（同心圆） -->
<circle cx="20" cy="20" r="8" fill="#fff" />
<circle cx="20" cy="20" r="12" fill="none" stroke="#fff" stroke-width="1" />
</svg>
</div>
<div style="margin-bottom: 15px;">
<h4 data-translate="time-freeze">时间冻结</h4>
<p data-translate="time-freeze-desc">拾取后5秒内冻结所有敌人。</p>
<svg width="40" height="40" viewBox="0 0 40 40">
<defs>
<radialGradient id="freezeGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#84FFFF" />
<stop offset="100%" stop-color="#00BCD4" />
</radialGradient>
</defs>
<circle cx="20" cy="20" r="18" fill="url(#freezeGradient)" stroke="#0097A7"
stroke-width="2" />
<!-- 雪花图标 -->
<path
d="M20 8 L22 16 L24 8 L20 14 L16 8 L18 16 L16 20 L24 20 L22 16 L24 28 L20 22 L16 28 L18 20 Z"
fill="#fff" />
</svg>
</div>
<div style="margin-bottom: 15px;">
<h4 data-translate="time-slow">时间减速</h4>
<p data-translate="time-slow-desc">拾取后8秒内降低所有敌人移动和发射速度的50%。</p>
<svg width="40" height="40" viewBox="0 0 40 40">
<defs>
<radialGradient id="slowGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#CE93D8" />
<stop offset="100%" stop-color="#9C27B0" />
</radialGradient>
</defs>
<circle cx="20" cy="20" r="18" fill="url(#slowGradient)" stroke="#7B1FA2"
stroke-width="2" />
<!-- 时钟图标 -->
<circle cx="20" cy="20" r="8" fill="#fff" />
<line x1="20" y1="20" x2="20" y2="14" stroke="#9C27B0" stroke-width="2" />
<line x1="20" y1="20" x2="22" y2="18" stroke="#9C27B0" stroke-width="2" />
</svg>
</div>
</div>
<div style="color: white;">
<h3 data-translate="traps">机关</h3>
<div style="margin-bottom: 15px;">
<h4 data-translate="mine">地雷</h4>
<p data-translate="mine-desc">触碰后爆炸，对坦克造成伤害。</p>
<svg width="30" height="30" viewBox="0 0 30 30">
<defs>
<radialGradient id="mineGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#555" />
<stop offset="100%" stop-color="#333" />
</radialGradient>
</defs>
<circle cx="15" cy="15" r="14" fill="url(#mineGradient)" stroke="#ff0000"
stroke-width="2" />
<!-- 骷髅标志 -->
<path d="M15 7 L18 13 L12 13 Z" fill="#ff0000" />
<!-- 金属纹理 -->
<line x1="15" y1="1" x2="15" y2="14" stroke="#555" stroke-width="1" />
<line x1="1" y1="15" x2="14" y2="15" stroke="#555" stroke-width="1" />
<line x1="15" y1="16" x2="15" y2="29" stroke="#555" stroke-width="1" />
<line x1="16" y1="15" x2="29" y2="15" stroke="#555" stroke-width="1" />
<line x1="5" y1="5" x2="10" y2="10" stroke="#555" stroke-width="1" />
<line x1="25" y1="5" x2="20" y2="10" stroke="#555" stroke-width="1" />
<line x1="5" y1="25" x2="10" y2="20" stroke="#555" stroke-width="1" />
<line x1="25" y1="25" x2="20" y2="20" stroke="#555" stroke-width="1" />
</svg>
</div>
<div style="margin-bottom: 15px;">
<h4 data-translate="oil-barrel">油桶</h4>
<p data-translate="oil-barrel-desc">射击后爆炸，对附近敌人造成伤害。</p>
<svg width="30" height="40" viewBox="0 0 30 40">
<!-- 油桶主体 -->
<rect x="3" y="5" width="24" height="30" fill="#8B4513" rx="3" />
<!-- 金属边缘 -->
<rect x="3" y="5" width="24" height="4" fill="#5D3A1A" />
<rect x="3" y="31" width="24" height="4" fill="#5D3A1A" />
<!-- 高光 -->
<rect x="6" y="10" width="4" height="20" fill="#A0522D" opacity="0.5" />
<!-- 桶盖 -->
<rect x="10" y="2" width="10" height="4" fill="#444" />
<rect x="11" y="1" width="8" height="2" fill="#666" />
</svg>
</div>
<div style="margin-bottom: 15px;">
<h4 data-translate="portal">传送门</h4>
<p data-translate="portal-desc">进入一个传送门后会从对应的另一个传送门出来。</p>
<svg width="40" height="40" viewBox="0 0 40 40">
<defs>
<radialGradient id="portalOuter" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="rgba(255,255,255,0.8)" />
<stop offset="100%" stop-color="rgba(0,0,0,0)" />
</radialGradient>
<radialGradient id="portalInner" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
<stop offset="50%" stop-color="#9c27b0" />
<stop offset="100%" stop-color="#6a1b9a" />
</radialGradient>
</defs>
<!-- 外光环 -->
<circle cx="20" cy="20" r="18" fill="url(#portalOuter)" />
<!-- 主体 -->
<circle cx="20" cy="20" r="14" fill="url(#portalInner)" />
<!-- 内圈 -->
<circle cx="20" cy="20" r="10" fill="rgba(255,255,255,0.5)" />
<!-- 中心 -->
<circle cx="20" cy="20" r="5" fill="#fff" opacity="0.8" />
</svg>
</div>
</div>
<button id="close-prop-trap-info"
style="padding: 5px 15px; background: #2196F3; color: white; border: none; border-radius: 5px; cursor: pointer; display: block; margin: 0 auto; margin-top: 20px;"
data-translate="close-prop-trap-info">关闭</button>
</div>
<div
style="display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; position: relative; z-index: 1;">
<div>
<label for="player-name" style="display: block; margin-bottom: 5px;"
data-translate="player-name-label">玩家名称:</label>
<input type="text" id="player-name" placeholder="输入你的名字"
style="padding: 8px; width: 200px; border-radius: 5px; border: none;">
</div>
<div>
<label style="display: block; margin-bottom: 5px;" data-translate="tank-color-label">坦克颜色:</label>
<div style="display: flex; align-items: center; gap: 10px;">
<input type="color" id="tank-color-picker" value="#2196F3"
style="width: 40px; height: 40px; border: none; cursor: pointer;">
<canvas id="tank-preview" width="60" height="60"
style="border: 1px solid #fff; background-color: #333;"></canvas>
</div>
</div>
</div>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px;">
<button id="difficulty-btn" class="menu-button" data-translate="difficulty-btn">难度</button>
<div id="difficulty-modal"
style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #333; padding: 20px; border-radius: 10px; z-index: 1000;">
<h2 style="color: white; text-align: center;">选择难度</h2>
<div style="display: flex; gap: 10px; justify-content: center;">
<button class="difficulty-option" data-level="1"
style="padding: 10px 20px; background-color: #2196F3; color: white; border: none; border-radius: 5px; cursor: pointer;">初级</button>
<button class="difficulty-option" data-level="2"
style="padding: 10px 20px; background-color: #FF9800; color: white; border: none; border-radius: 5px; cursor: pointer;">中级</button>
<button class="difficulty-option" data-level="3"
style="padding: 10px 20px; background-color: #F44336; color: white; border: none; border-radius: 5px; cursor: pointer;">高级</button>
</div>
</div>
<div id="modal-overlay"
style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.7); z-index: 999;">
</div>
<button id="start-button" class="menu-button" data-translate="start-button">开始游戏</button>
<button id="level-select-button" class="menu-button" data-translate="level-select-button">关卡选择</button>
<button id="toggle-timer-button" class="menu-button" data-translate="toggle-timer-button">模式：正常</button>
<button id="info-button" class="menu-button" data-translate="info-button">游戏介绍</button>
</div>
<!-- 介绍按钮弹窗 -->
<div id="info-dialog"
style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); padding: 20px; border-radius: 10px; z-index: 100; width: 250px;">
<h2 style="color: white; text-align: center; margin-bottom: 20px; margin-top: 0;"
data-translate="info-dialog-title">游戏介绍</h2>
<div style="display: flex; flex-direction: column; gap: 10px;">
<button id="enemy-info-button"
style="padding: 8px 16px; font-size: 16px; background-color: #2196F3; color: white; border: none; border-radius: 5px;"
data-translate="enemy-info-button">敌人介绍</button>
<button id="control-info-button"
style="padding: 8px 16px; font-size: 16px; background-color: #2196F3; color: white; border: none; border-radius: 5px;"
data-translate="control-info-button">按键介绍</button>
<button id="prop-trap-info-button"
style="padding: 8px 16px; font-size: 16px; background-color: #2196F3; color: white; border: none; border-radius: 5px;"
data-translate="prop-trap-info-button">道具和机关介绍</button>
<button id="close-info-button"
style="padding: 8px 16px; font-size: 16px; margin-top: 15px; background-color: #f44336; color: white; border: none; border-radius: 5px;"
data-translate="close-info-button">关闭</button>
</div>
</div>
</div>
<div id="game-over-screen" style="display: none;">
<h1 data-translate="game-over">游戏结束</h1>
<button id="restart-button" data-translate="restart-button">再来一次</button>
</div>
<!-- 关卡选择弹窗 -->
<div id="level-select-modal"
style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #333; padding: 20px; border-radius: 10px; z-index: 1000;">
<h2 style="color: white; text-align: center;" data-translate="level-select-title">选择关卡</h2>
<div id="level-grid"
style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px;">
<!-- 关卡按钮将通过JS动态生成 -->
</div>
<button id="close-level-select"
style="margin-top: 20px; padding: 8px 16px; background-color: #f44336; color: white; border: none; border-radius: 5px;"
data-translate="close-level-select">关闭</button>
</div>
<div id="win-screen" style="display: none;">
<h1 id="win-message" data-translate="win">胜利！</h1>
<button id="next-level-button" data-translate="next-level-button">下一关</button>
</div>
</div>
<script>
let gameDifficulty = 1; // 默认初级难度
// 难度选择模态框控制
const difficultyBtn = document.getElementById('difficulty-btn');
const difficultyModal = document.getElementById('difficulty-modal');
const modalOverlay = document.getElementById('modal-overlay');
const difficultyOptions = document.querySelectorAll('.difficulty-option');
difficultyBtn.addEventListener('click', () => {
difficultyModal.style.display = 'block';
modalOverlay.style.display = 'block';
});
modalOverlay.addEventListener('click', () => {
difficultyModal.style.display = 'none';
modalOverlay.style.display = 'none';
});
difficultyOptions.forEach(option => {
option.addEventListener('click', () => {
gameDifficulty = parseInt(option.dataset.level);
difficultyModal.style.display = 'none';
modalOverlay.style.display = 'none';
alert(`已选择${option.textContent}难度`);
});
});
// 多语言支持
let currentLanguage = 'zh'; // 默认中文
const translations = {
zh: {
'game-title': '坦克大战：钢铁防线',
'total-score': '总分数：',
'reset-score-button': '重置分数',
'confirm-reset': '确定',
'cancel-reset': '取消',
'reset-confirm-message': '确定重置分数？',
'difficulty-btn': '难度',
'difficulty-title': '选择难度',
'easy': '初级',
'medium': '中级',
'hard': '高级',
'start-button': '开始游戏',
'level-select-button': '关卡选择',
'toggle-timer-button': '模式：正常',
'toggle-timer-button-timed': '模式：限时',
'info-button': '游戏介绍',
'player-name-label': '玩家名称:',
'player-name-placeholder': '输入你的名字',
'tank-color-label': '坦克颜色:',
'restart-button': '再来一次',
'next-level-button': '下一关',
'game-over': '游戏结束',
'win': '胜利！',
'level-select-title': '选择关卡',
'close-level-select': '关闭',
'info-dialog-title': '游戏介绍',
'enemy-info-button': '敌人介绍',
'control-info-button': '按键介绍',
'prop-trap-info-button': '道具和机关介绍',
'close-info-button': '关闭',
'close-enemy-info': '关闭',
'close-control-info': '关闭',
'close-prop-trap-info': '关闭',
'enemy-info-title': '敌人介绍',
'normal-enemy': '普通敌人',
'normal-enemy-desc': '速度中等，生命值较低，武器伤害一般。是游戏中最常见的敌人类型。',
'medium-enemy': '中型敌人',
'medium-enemy-desc': '速度较慢，但生命值比普通敌人高。需要多次攻击才能消灭。',
'boss-enemy': 'BOSS',
'boss-enemy-desc': '只在第十关现身的终极敌人，体型极为庞大，生命值超高，伤害输出惊人，并且具备一次发射多枚子弹的能力。该敌人战斗时分为三个阶段：第一阶段为普通状态，第二阶段进入加速状态，第三阶段则开启威力强悍的超级状态。',
'control-info-title': '按键介绍',
'movement-control': '移动控制',
'shoot-control': '射击控制',
'w-key': 'W键',
'w-desc': '向上移动',
's-key': 'S键',
's-desc': '向下移动',
'a-key': 'A键',
'a-desc': '向左移动',
'd-key': 'D键',
'd-desc': '向右移动',
'space-key': '空格键',
'space-desc': '发射子弹',
'prop-trap-info-title': '道具和机关介绍',
'props': '道具',
'traps': '机关',
'extra-life': '额外生命',
'extra-life-desc': '拾取后增加一条生命。',
'speed-boost': '速度提升',
'speed-boost-desc': '拾取后5秒内提升坦克移动速度。',
'shield': '护盾',
'shield-desc': '拾取后5秒内获得护盾保护，免疫一次伤害。',
'time-freeze': '时间冻结',
'time-freeze-desc': '拾取后5秒内冻结所有敌人。',
'time-slow': '时间减速',
'time-slow-desc': '拾取后8秒内降低所有敌人移动和发射速度的50%。',
'mine': '地雷',
'mine-desc': '触碰后爆炸，对坦克造成伤害。',
'oil-barrel': '油桶',
'oil-barrel-desc': '射击后爆炸，对附近敌人造成伤害。',
'portal': '传送门',
'portal-desc': '进入一个传送门后会从对应的另一个传送门出来。',
'language-btn': '中文',
'lang-zh': '中文',
'lang-en': 'English',
'level': '关卡',
'boss': 'BOSS',
'time': '时间',
'score': '分数',
'story-title': '坦克大战：钢铁防线',
'story-p1': '公元2077年，机械军团入侵地球，玩家将扮演最后防线的坦克指挥官。',
'story-p2': '通过10个递增难度的关卡，突破敌人的钢铁洪流，最终摧毁机械核心BOSS。',
'story-p3': '每关需突破敌人防线并摧毁核心目标，随着关卡推进，敌人会出现更先进的坦克型号与防御工事。',
'skip-story': '跳过剧情'
},
en: {
'game-title': 'Tank Battle: Steel Defense',
'total-score': 'Total Score: ',
'reset-score-button': 'Reset Score',
'confirm-reset': 'Confirm',
'cancel-reset': 'Cancel',
'reset-confirm-message': 'Are you sure to reset score?',
'difficulty-btn': 'Difficulty',
'difficulty-title': 'Select Difficulty',
'easy': 'Easy',
'medium': 'Medium',
'hard': 'Hard',
'start-button': 'Start Game',
'level-select-button': 'Level Select',
'toggle-timer-button': 'Mode: Normal',
'toggle-timer-button-timed': 'Mode: Timed',
'info-button': 'Game Info',
'player-name-label': 'Player Name:',
'player-name-placeholder': 'Enter your name',
'tank-color-label': 'Tank Color:',
'restart-button': 'Play Again',
'next-level-button': 'Next Level',
'game-over': 'Game Over',
'win': 'Victory!',
'level-select-title': 'Select Level',
'close-level-select': 'Close',
'info-dialog-title': 'Game Information',
'enemy-info-button': 'Enemy Info',
'control-info-button': 'Controls',
'prop-trap-info-button': 'Power-ups & Traps',
'close-info-button': 'Close',
'close-enemy-info': 'Close',
'close-control-info': 'Close',
'close-prop-trap-info': 'Close',
'enemy-info-title': 'Enemy Information',
'normal-enemy': 'Normal Enemy',
'normal-enemy-desc': 'Medium speed, low health, average damage. The most common enemy type in the game.',
'medium-enemy': 'Medium Enemy',
'medium-enemy-desc': 'Slower speed, but higher health than normal enemies. Requires multiple attacks to destroy.',
'boss-enemy': 'BOSS',
'boss-enemy-desc': 'The ultimate enemy that only appears on level 10. Extremely large size, very high health, devastating damage output, and can fire multiple bullets at once. This enemy has three battle phases: Phase 1 is normal state, Phase 2 is accelerated state, and Phase 3 is super state with powerful attacks.',
'control-info-title': 'Controls',
'movement-control': 'Movement',
'shoot-control': 'Shooting',
'w-key': 'W Key',
'w-desc': 'Move Up',
's-key': 'S Key',
's-desc': 'Move Down',
'a-key': 'A Key',
'a-desc': 'Move Left',
'd-key': 'D Key',
'd-desc': 'Move Right',
'space-key': 'Spacebar',
'space-desc': 'Fire Bullet',
'prop-trap-info-title': 'Power-ups & Traps',
'props': 'Power-ups',
'traps': 'Traps',
'extra-life': 'Extra Life',
'extra-life-desc': 'Gain one additional life.',
'speed-boost': 'Speed Boost',
'speed-boost-desc': 'Increase tank movement speed for 5 seconds.',
'shield': 'Shield',
'shield-desc': 'Gain shield protection for 5 seconds, immune to one damage.',
'time-freeze': 'Time Freeze',
'time-freeze-desc': 'Freeze all enemies for 5 seconds.',
'time-slow': 'Time Slow',
'time-slow-desc': 'Reduce enemy movement and firing speed by 50% for 8 seconds.',
'mine': 'Mine',
'mine-desc': 'Explodes on contact, damaging tanks.',
'oil-barrel': 'Oil Barrel',
'oil-barrel-desc': 'Explodes when shot, damaging nearby enemies.',
'portal': 'Portal',
'portal-desc': 'Enter one portal to exit from the corresponding portal.',
'language-btn': 'English',
'lang-zh': '中文',
'lang-en': 'English',
'level': 'Level',
'boss': 'BOSS',
'time': 'Time',
'score': 'Score',
'story-title': 'Tank Battle: Steel Defense',
'story-p1': 'Year 2077, the Machine Legion invades Earth. You are the last tank commander of the final defense line.',
'story-p2': 'Battle through 10 increasingly difficult levels, break through the enemy steel wave, and destroy the ultimate Machine Core BOSS.',
'story-p3': 'Each level requires breaking enemy defenses and destroying the core target. As you progress, enemies deploy more advanced tanks and fortifications.',
'skip-story': 'Skip Story'
}
};
// 语言切换按钮控制
const languageBtn = document.getElementById('language-btn');
const languageModal = document.getElementById('language-modal');
const langZhBtn = document.getElementById('lang-zh');
const langEnBtn = document.getElementById('lang-en');
languageBtn.addEventListener('click', (e) => {
e.stopPropagation();
languageModal.style.display = languageModal.style.display === 'block' ? 'none' : 'block';
});
langZhBtn.addEventListener('click', () => {
setLanguage('zh');
});
langEnBtn.addEventListener('click', () => {
setLanguage('en');
});
// 点击其他地方关闭语言弹窗
document.addEventListener('click', (e) => {
if (e.target !== languageBtn && !languageModal.contains(e.target)) {
languageModal.style.display = 'none';
}
});
// 设置语言函数
function setLanguage(lang) {
currentLanguage = lang;
languageBtn.textContent = translations[lang]['language-btn'];
languageModal.style.display = 'none';
// 更新所有需要翻译的元素
updateTranslations();
}
// 更新翻译函数
function updateTranslations() {
const elements = document.querySelectorAll('[data-translate]');
elements.forEach(el => {
const key = el.dataset.translate;
if (translations[currentLanguage][key]) {
el.textContent = translations[currentLanguage][key];
}
});
// 更新placeholder
const playerNameInput = document.getElementById('player-name');
if (playerNameInput) {
playerNameInput.placeholder = translations[currentLanguage]['player-name-placeholder'];
}
// 更新弹窗内容
document.getElementById('reset-confirm-dialog').querySelector('p').textContent = translations[currentLanguage]['reset-confirm-message'];
// 更新难度弹窗
const difficultyTitle = document.querySelector('#difficulty-modal h2');
if (difficultyTitle) {
difficultyTitle.textContent = translations[currentLanguage]['difficulty-title'];
}
const difficultyOptions = document.querySelectorAll('.difficulty-option');
difficultyOptions[0].textContent = translations[currentLanguage]['easy'];
difficultyOptions[1].textContent = translations[currentLanguage]['medium'];
difficultyOptions[2].textContent = translations[currentLanguage]['hard'];
// 更新关卡选择弹窗
const levelSelectTitle = document.querySelector('#level-select-modal h2');
if (levelSelectTitle) {
levelSelectTitle.textContent = translations[currentLanguage]['level-select-title'];
}
// 更新关卡按钮文本
const levelButtons = document.querySelectorAll('#level-grid button');
levelButtons.forEach((btn, index) => {
if (!btn.disabled) {
btn.textContent = translations[currentLanguage]['level'] + ' ' + (index + 1);
}
});
// 更新游戏结束和胜利屏幕
document.querySelector('#game-over-screen h1').textContent = translations[currentLanguage]['game-over'];
document.getElementById('win-message').textContent = translations[currentLanguage]['win'];
// 更新模式按钮
const toggleTimerBtn = document.getElementById('toggle-timer-button');
if (toggleTimerBtn) {
toggleTimerBtn.textContent = gameState.timeLimitEnabled ? translations[currentLanguage]['toggle-timer-button-timed'] : translations[currentLanguage]['toggle-timer-button'];
}
}
// 音频播放辅助函数
// Game constants
const CANVAS_WIDTH = 950;
const CANVAS_HEIGHT = 650;
const TANK_SIZE = 30;
const BULLET_SIZE = 5;
const BULLET_SPEED = 5;
const TANK_SPEED = 2;
const ENEMY_SPEED = 1;
const WALL_SIZE = 30;
const PROP_SIZE = 20;
const TRAP_SIZE = 20;
const PROP_TYPES = {
EXTRA_LIFE: 'extraLife',
SPEED_BOOST: 'speedBoost',
SHIELD: 'shield',
TIME_FREEZE: 'timeFreeze',
TIME_SLOW: 'timeSlow'
};
const TRAP_TYPES = {
MINE: 'mine',
PORTAL: 'portal',
OIL_BARREL: 'oilBarrel'
};
// 烟雾粒子类
class Smoke {
constructor(x, y, direction) {
this.x = x;
this.y = y;
this.size = Math.random() * 2 + 1; // 进一步调小烟雾初始大小至1-3
this.speedX = 0;
this.speedY = 0;
this.opacity = 1;
this.decay = Math.random() * 0.04 + 0.02;
// 随机黑色和灰色烟雾，确保与地面颜色(#333333)不同
const grayValue = Math.floor(Math.random() * 50) + 30; // 30-80 之间的灰色值
this.color = `rgba(${grayValue}, ${grayValue}, ${grayValue}, 0.8)`;
this.angle = 0;
this.rotationSpeed = (Math.random() - 0.5) * 0.1;
// 根据坦克方向设置烟雾初始速度
switch (direction) {
case 'up':
this.speedX = (Math.random() - 0.5) * 0.35;
this.speedY = (Math.random() * 1 + 0.5) * 0.7;
break;
case 'down':
this.speedX = (Math.random() - 0.5) * 0.35;
this.speedY = -(Math.random() * 1 + 0.5) * 0.7;
break;
case 'left':
this.speedX = (Math.random() * 1 + 0.5) * 0.7;
this.speedY = (Math.random() - 0.5) * 0.35;
break;
case 'right':
this.speedX = -(Math.random() * 1 + 0.5) * 0.7;
this.speedY = (Math.random() - 0.5) * 0.35;
break;
}
}
update() {
this.x += this.speedX;
this.y += this.speedY;
this.opacity -= this.decay;
this.size *= 0.95;
this.angle += this.rotationSpeed;
}
draw() {
ctx.save();
ctx.globalAlpha = this.opacity;
ctx.fillStyle = this.color;
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.beginPath();
ctx.ellipse(0, 0, this.size, this.size * 0.7, 0, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
// Game state
const gameState = {
isPlaying: false,
score: 0,
level: 1,
lives: 3,
player: null,
playerName: '玩家',
playerColor: '#2196F3', // 默认蓝色
enemies: [],
bullets: [],
walls: [],
props: [],
traps: [],
airDrops: [],
lastAirDropTime: 0,
airDropInterval: 10000, // 每10秒生成一个空投
explosions: [],
smokes: [], // 烟雾粒子数组
playerPropParticles: [], // 玩家获得道具后的粒子效果
playerSpeedParticles: [], // 加速状态下的粒子效果
enemySlowParticles: [], // 敌人减速状态下的粒子效果
isSpeedBoosted: false, // 是否处于加速状态
activeProps: {}, // 当前激活的道具及其剩余时间
gameMode: 'normal', // normal, timed, extreme
timeLimitEnabled: false,
timeRemaining: 120,
timerInterval: null
};
// DOM elements
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startScreen = document.getElementById('start-screen');
// 初始化总分数显示
if (!localStorage.getItem('tankBattleTotalScore')) {
localStorage.setItem('tankBattleTotalScore', '0');
}
updateTotalScoreDisplay();
const gameOverScreen = document.getElementById('game-over-screen');
const winScreen = document.getElementById('win-screen');
const startButton = document.getElementById('start-button');
const levelSelectButton = document.getElementById('level-select-button');
const levelSelectModal = document.getElementById('level-select-modal');
const closeLevelSelect = document.getElementById('close-level-select');
const levelGrid = document.getElementById('level-grid');
const restartButton = document.getElementById('restart-button');
// 获取已解锁的关卡（从localStorage读取）
function getUnlockedLevels() {
const saved = localStorage.getItem('tankBattleUnlockedLevels');
if (saved) {
return parseInt(saved);
}
return 1; // 默认只解锁第一关
}
// 保存已解锁的关卡
function saveUnlockedLevel(level) {
const currentUnlocked = getUnlockedLevels();
if (level > currentUnlocked) {
localStorage.setItem('tankBattleUnlockedLevels', level.toString());
updateLevelButtons();
}
}
// 更新关卡按钮状态
function updateLevelButtons() {
const unlockedLevels = getUnlockedLevels();
const buttons = levelGrid.querySelectorAll('button');
buttons.forEach((button, index) => {
const level = index + 1;
if (level <= unlockedLevels) {
button.style.backgroundColor = '#2196F3';
button.style.color = 'white';
button.style.cursor = 'pointer';
button.disabled = false;
button.textContent = '关卡 ' + level;
} else {
button.style.backgroundColor = '#555';
button.style.color = '#999';
button.style.cursor = 'not-allowed';
button.disabled = true;
button.textContent = '🔒 ' + level;
}
});
}
// 生成关卡按钮
for (let i = 1; i <= 10; i++) {
const levelButton = document.createElement('button');
levelButton.textContent = '关卡 ' + i;
levelButton.style.padding = '10px';
levelButton.style.border = 'none';
levelButton.style.borderRadius = '5px';
levelButton.addEventListener('click', function () {
if (!this.disabled) {
gameState.level = i;
levelSelectModal.style.display = 'none';
startGame();
}
});
levelGrid.appendChild(levelButton);
}
// 初始化关卡按钮状态
updateLevelButtons();
// 关卡选择弹窗逻辑
levelSelectButton.addEventListener('click', function () {
updateLevelButtons(); // 更新按钮状态
levelSelectModal.style.display = 'block';
modalOverlay.style.display = 'block';
});
closeLevelSelect.addEventListener('click', function () {
levelSelectModal.style.display = 'none';
modalOverlay.style.display = 'none';
});
modalOverlay.addEventListener('click', function (event) {
if (event.target === modalOverlay) {
levelSelectModal.style.display = 'none';
modalOverlay.style.display = 'none';
}
});
const nextLevelButton = document.getElementById('next-level-button');
const infoButton = document.getElementById('info-button');
const infoDialog = document.getElementById('info-dialog');
const closeInfoButton = document.getElementById('close-info-button');
const enemyInfoButton = document.getElementById('enemy-info-button');
const controlInfoButton = document.getElementById('control-info-button');
const propTrapInfoButton = document.getElementById('prop-trap-info-button');
const enemyInfoDialog = document.getElementById('enemy-info-dialog');
const controlInfoDialog = document.getElementById('control-info-dialog');
const propTrapInfoDialog = document.getElementById('prop-trap-info-dialog');
const closeEnemyInfoButton = document.getElementById('close-enemy-info');
const closeControlInfoButton = document.getElementById('close-control-info');
const closePropTrapInfoButton = document.getElementById('close-prop-trap-info');
const dialogOverlay = document.getElementById('dialog-overlay');
// Event listeners
startButton.addEventListener('click', startGame);
const resetScoreButton = document.getElementById('reset-score-button');
// 重置分数按钮点击事件 - 显示确认弹窗
resetScoreButton.addEventListener('click', function () {
document.getElementById('reset-confirm-dialog').style.display = 'block';
document.getElementById('dialog-overlay').style.display = 'block';
});
// 游戏介绍按钮事件
infoButton.addEventListener('click', function () {
infoDialog.style.display = 'block';
});
// 关闭游戏介绍按钮事件
closeInfoButton.addEventListener('click', function () {
infoDialog.style.display = 'none';
});
// 敌人介绍按钮事件
enemyInfoButton.addEventListener('click', function () {
infoDialog.style.display = 'none';
enemyInfoDialog.style.display = 'block';
});
// 按键介绍按钮事件
controlInfoButton.addEventListener('click', function () {
infoDialog.style.display = 'none';
controlInfoDialog.style.display = 'block';
});
// 道具和机关介绍按钮事件
propTrapInfoButton.addEventListener('click', function () {
infoDialog.style.display = 'none';
propTrapInfoDialog.style.display = 'block';
});
// 关闭敌人介绍按钮事件
closeEnemyInfoButton.addEventListener('click', function () {
enemyInfoDialog.style.display = 'none';
infoDialog.style.display = 'block';
});
// 关闭按键介绍按钮事件
closeControlInfoButton.addEventListener('click', function () {
controlInfoDialog.style.display = 'none';
infoDialog.style.display = 'block';
});
// 关闭道具和机关介绍按钮事件
closePropTrapInfoButton.addEventListener('click', function () {
propTrapInfoDialog.style.display = 'none';
infoDialog.style.display = 'block';
});
// 点击遮罩层关闭弹窗
dialogOverlay.addEventListener('click', function () {
enemyInfoDialog.style.display = 'none';
controlInfoDialog.style.display = 'none';
propTrapInfoDialog.style.display = 'none';
document.getElementById('reset-confirm-dialog').style.display = 'none';
dialogOverlay.style.display = 'none';
});
// 阻止弹窗内部点击事件冒泡
enemyInfoDialog.addEventListener('click', function (e) {
e.stopPropagation();
});
controlInfoDialog.addEventListener('click', function (e) {
e.stopPropagation();
});
propTrapInfoDialog.addEventListener('click', function (e) {
e.stopPropagation();
});
document.getElementById('reset-confirm-dialog').addEventListener('click', function (e) {
e.stopPropagation();
});
// 确认重置分数
document.getElementById('confirm-reset').addEventListener('click', function () {
localStorage.setItem('tankBattleTotalScore', '0');
updateTotalScoreDisplay();
document.getElementById('reset-confirm-dialog').style.display = 'none';
document.getElementById('dialog-overlay').style.display = 'none';
});
// 取消重置分数
document.getElementById('cancel-reset').addEventListener('click', function () {
document.getElementById('reset-confirm-dialog').style.display = 'none';
document.getElementById('dialog-overlay').style.display = 'none';
});
restartButton.addEventListener('click', restartGame);
nextLevelButton.addEventListener('click', nextLevel);
const toggleTimerButton = document.getElementById('toggle-timer-button');
toggleTimerButton.addEventListener('click', () => {
// 循环切换模式：正常 → 限时 → 极限
const modes = ['normal', 'timed', 'extreme'];
const currentIndex = modes.indexOf(gameState.gameMode);
const nextIndex = (currentIndex + 1) % modes.length;
gameState.gameMode = modes[nextIndex];
// 更新按钮显示
const modeNames = {
'normal': '正常',
'timed': '限时',
'extreme': '极限'
};
toggleTimerButton.textContent = `模式：${modeNames[gameState.gameMode]}`;
// 更新限时状态
gameState.timeLimitEnabled = gameState.gameMode === 'timed' || gameState.gameMode === 'extreme';
});
// Keyboard controls
const keys = {
KeyW: false,
KeyA: false,
KeyS: false,
KeyD: false,
Space: false
};
document.addEventListener('keydown', (e) => {
if (e.code in keys) {
keys[e.code] = true;
}
});
document.addEventListener('keyup', (e) => {
if (e.code in keys) {
keys[e.code] = false;
}
});
// Game objects
class Tank {
constructor(x, y, isPlayer = false) {
this.x = x;
this.y = y;
this.width = TANK_SIZE;
this.height = TANK_SIZE;
this.direction = 'up';
this.speed = isPlayer ? TANK_SPEED : ENEMY_SPEED;
this.isPlayer = isPlayer;
this.shootCooldown = 0;
this.maxShootCooldown = 30;
this.health = 1;
this.shield = false;
this.color = isPlayer ? gameState.playerColor : '#F44336'; // 玩家使用选择的颜色，敌人默认红色
this.turretColor = isPlayer ? this.darkenColor(this.color, 20) : '#D32F2F';
this.isFrozen = false; // 新增：冻结状态
this.speedMultiplier = 1; // 新增：速度乘数
this.freezeTimeout = null; // 新增：冻结定时器
this.slowTimeout = null; // 新增：减速定时器
this.isSlowed = false; // 新增：是否处于减速状态
this.phase = 1; // 新增：BOSS阶段，默认为1
this.isBoss = false; // 新增：是否为BOSS
this.shootPattern = 'single'; // 新增：射击模式
}
darkenColor(color, percent) {
// 将颜色从十六进制转换为RGB
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
// 调暗颜色
r = Math.max(0, Math.floor(r * (1 - percent / 100)));
g = Math.max(0, Math.floor(g * (1 - percent / 100)));
b = Math.max(0, Math.floor(b * (1 - percent / 100)));
// 转换回十六进制
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
lightenColor(color, percent) {
// 将颜色从十六进制转换为RGB
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
// 调亮颜色
r = Math.min(255, Math.floor(r * (1 + percent / 100)));
g = Math.min(255, Math.floor(g * (1 + percent / 100)));
b = Math.min(255, Math.floor(b * (1 + percent / 100)));
// 转换回十六进制
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
draw() {
// 绘制玩家名称（如果是玩家坦克）
if (this.isPlayer) {
ctx.save();
ctx.fillStyle = '#fff';
ctx.font = '16px Arial';
ctx.textAlign = 'center';
ctx.fillText(gameState.playerName, this.x + this.width / 2, this.y - 20);
ctx.restore();
}
ctx.save();
ctx.translate(this.x + this.width / 2, this.y + this.height / 2);
// Rotate based on direction
switch (this.direction) {
case 'right':
ctx.rotate(Math.PI / 2);
break;
case 'down':
ctx.rotate(Math.PI);
break;
case 'left':
ctx.rotate(3 * Math.PI / 2);
break;
}
// 坦克颜色定义
const bodyColor = this.color;
const turretColor = this.turretColor;
const trackColor = '#212121';
const trackDetailColor = '#424242';
// 绘制履带
ctx.fillStyle = trackColor;
ctx.fillRect(-this.width / 2 - 4, -this.height / 2, 4, this.height);
ctx.fillRect(this.width / 2, -this.height / 2, 4, this.height);
// 履带细节
ctx.fillStyle = trackDetailColor;
ctx.fillRect(-this.width / 2 - 4, -this.height / 2, 4, 6);
ctx.fillRect(-this.width / 2 - 4, this.height / 2 - 6, 4, 6);
ctx.fillRect(this.width / 2, -this.height / 2, 4, 6);
ctx.fillRect(this.width / 2, this.height / 2 - 6, 4, 6);
// 创建车身渐变效果
const bodyGradient = ctx.createLinearGradient(-this.width / 2, -this.height / 2, this.width / 2, this.height / 2);
bodyGradient.addColorStop(0, this.lightenColor(bodyColor, 15));
bodyGradient.addColorStop(1, this.darkenColor(bodyColor, 15));
// 绘制坦克车身
ctx.fillStyle = bodyGradient;
ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
// 绘制车身装甲细节
ctx.strokeStyle = this.darkenColor(bodyColor, 30);
ctx.lineWidth = 2;
ctx.strokeRect(-this.width / 2 + 4, -this.height / 2 + 4, this.width - 8, this.height - 8);
ctx.strokeRect(-this.width / 2 + 8, -this.height / 2 + 8, this.width - 16, this.height - 16);
// 绘制装甲板连接点
ctx.fillStyle = '#333';
ctx.beginPath();
ctx.arc(-this.width / 2 + 8, -this.height / 2 + 8, 2, 0, Math.PI * 2);
ctx.arc(this.width / 2 - 8, -this.height / 2 + 8, 2, 0, Math.PI * 2);
ctx.arc(-this.width / 2 + 8, this.height / 2 - 8, 2, 0, Math.PI * 2);
ctx.arc(this.width / 2 - 8, this.height / 2 - 8, 2, 0, Math.PI * 2);
ctx.fill();
// 绘制坦克炮塔
const turretGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.width / 4);
turretGradient.addColorStop(0, this.lightenColor(turretColor, 10));
turretGradient.addColorStop(1, this.darkenColor(turretColor, 20));
ctx.fillStyle = turretGradient;
ctx.beginPath();
ctx.arc(0, 0, this.width / 4, 0, Math.PI * 2);
ctx.fill();
// 绘制炮塔细节
ctx.fillStyle = '#444';
ctx.beginPath();
ctx.arc(0, 0, this.width / 8, 0, Math.PI * 2);
ctx.fill();
// 绘制瞄准镜
ctx.fillStyle = '#000';
ctx.fillRect(-3, -this.height / 2 - 16, 6, 4);
ctx.fillStyle = '#0ff';
ctx.fillRect(-2, -this.height / 2 - 15, 4, 2);
// 绘制炮管
ctx.fillStyle = trackColor;
ctx.fillRect(-3, -this.height / 2 - 12, 6, 14);
ctx.fillStyle = this.darkenColor(trackColor, 20);
ctx.fillRect(-2, -this.height / 2 - 18, 4, 6);
// 绘制炮管散热孔
ctx.fillStyle = '#555';
ctx.fillRect(-1, -this.height / 2 - 10, 2, 2);
ctx.fillRect(-1, -this.height / 2 - 6, 2, 2);
ctx.fillRect(-1, -this.height / 2 - 2, 2, 2);
// 添加侧装甲
ctx.fillStyle = this.darkenColor(bodyColor, 10);
ctx.fillRect(-this.width / 2 - 6, -this.height / 2 + 8, 2, this.height - 16);
ctx.fillRect(this.width / 2 + 4, -this.height / 2 + 8, 2, this.height - 16);
// 添加前装甲板
ctx.fillStyle = this.darkenColor(bodyColor, 20);
ctx.beginPath();
ctx.moveTo(-this.width / 2 + 10, -this.height / 2 - 5);
ctx.lineTo(0, -this.height / 2 - 15);
ctx.lineTo(this.width / 2 - 10, -this.height / 2 - 5);
ctx.closePath();
ctx.fill();
// 添加顶部装甲细节
ctx.fillStyle = '#444';
ctx.fillRect(-this.width / 4, -this.height / 2 + 5, this.width / 2, 3);
ctx.fillRect(-this.width / 4, this.height / 2 - 8, this.width / 2, 3);
// 绘制护盾效果（仅玩家坦克）
if (this.isPlayer && this.shield) {
ctx.strokeStyle = 'rgba(33, 150, 243, 0.6)';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(0, 0, this.width / 2 + 8, 0, Math.PI * 2);
ctx.stroke();
// 添加护盾内部发光效果
ctx.fillStyle = 'rgba(33, 150, 243, 0.15)';
ctx.beginPath();
ctx.arc(0, 0, this.width / 2 + 6, 0, Math.PI * 2);
ctx.fill();
}
// 绘制冻结效果（仅敌人坦克）
if (!this.isPlayer && this.isFrozen) {
// 半透明青色方块覆盖
ctx.fillStyle = 'rgba(0, 188, 212, 0.4)';
ctx.fillRect(-this.width / 2 - 4, -this.height / 2 - 4, this.width + 8, this.height + 8);
// 添加边框
ctx.strokeStyle = 'rgba(0, 188, 212, 0.8)';
ctx.lineWidth = 2;
ctx.strokeRect(-this.width / 2 - 4, -this.height / 2 - 4, this.width + 8, this.height + 8);
}
ctx.restore();
}
update() {
// Handle player movement
if (this.isPlayer) {
this.handlePlayerMovement();
this.handleShooting();
} else {
this.handleEnemyAI();
}
// Update shoot cooldown
if (this.shootCooldown > 0) {
this.shootCooldown--;
}
}
handlePlayerMovement() {
let moved = false;
let newX = this.x;
let newY = this.y;
if (keys.KeyW) {
newY -= this.speed;
this.direction = 'up';
moved = true;
} else if (keys.KeyS) {
newY += this.speed;
this.direction = 'down';
moved = true;
} else if (keys.KeyA) {
newX -= this.speed;
this.direction = 'left';
moved = true;
} else if (keys.KeyD) {
newX += this.speed;
this.direction = 'right';
moved = true;
}
// Check collision with walls
if (moved && !this.checkCollision(newX, newY)) {
this.x = newX;
this.y = newY;
// 玩家坦克移动时生成烟雾
this.createSmoke();
// 如果处于加速状态，生成黄色粒子
if (gameState.isSpeedBoosted) {
this.createSpeedParticles();
}
}
}
createSpeedParticles() {
// 在坦克后方生成粒子
let particleX, particleY;
const centerX = this.x + this.width / 2;
const centerY = this.y + this.height / 2;
switch (this.direction) {
case 'up':
particleX = centerX + (Math.random() - 0.5) * this.width * 0.5;
particleY = this.y + this.height + 5;
break;
case 'down':
particleX = centerX + (Math.random() - 0.5) * this.width * 0.5;
particleY = this.y - 5;
break;
case 'left':
particleX = this.x + this.width + 5;
particleY = centerY + (Math.random() - 0.5) * this.height * 0.5;
break;
case 'right':
particleX = this.x - 5;
particleY = centerY + (Math.random() - 0.5) * this.height * 0.5;
break;
}
// 每次移动生成1-2个粒子
if (Math.random() > 0.3) {
gameState.playerSpeedParticles.push(new PlayerSpeedParticle(particleX, particleY, this.direction));
}
if (Math.random() > 0.6) {
gameState.playerSpeedParticles.push(new PlayerSpeedParticle(particleX, particleY, this.direction));
}
}
handleEnemyAI() {
// Move in current direction
let newX = this.x;
let newY = this.y;
let moved = false;
if (!this.isFrozen) {
if (this.isBoss) {
// BOSS AI - adjusted for smoother movement and lower intelligence
// Track player less frequently
const player = gameState.player;
if (player && Math.random() < 0.7) { // 70% chance to track player
// Calculate direction to player
const dx = player.x - this.x;
const dy = player.y - this.y;
// Choose primary direction based on player position
if (Math.abs(dx) > Math.abs(dy)) {
this.direction = dx > 0 ? 'right' : 'left';
} else {
this.direction = dy > 0 ? 'down' : 'up';
}
} else {
// Random movement (30% chance)
if (Math.random() < 0.2) {
const directions = ['up', 'down', 'left', 'right'];
this.direction = directions[Math.floor(Math.random() * directions.length)];
}
}
// 15% chance to switch direction to avoid being predictable
if (Math.random() < 0.15) {
const directions = ['up', 'down', 'left', 'right'];
this.direction = directions[Math.floor(Math.random() * directions.length)];
}
// Reduced shooting frequency for BOSS
if (Math.random() < 0.03 && this.shootCooldown === 0) {
this.shoot();
}
} else {
// Regular enemy AI - move randomly
if (Math.random() < 0.02) {
const directions = ['up', 'down', 'left', 'right'];
this.direction = directions[Math.floor(Math.random() * directions.length)];
}
// Random shooting
if (Math.random() < 0.01 && this.shootCooldown === 0) {
this.shoot();
}
}
const effectiveSpeed = this.speed * this.speedMultiplier;
switch (this.direction) {
case 'up':
newY -= effectiveSpeed;
moved = true;
break;
case 'down':
newY += effectiveSpeed;
moved = true;
break;
case 'left':
newX -= effectiveSpeed;
moved = true;
break;
case 'right':
newX += effectiveSpeed;
moved = true;
break;
}
}
// Check collision with walls
if (moved && !this.checkCollision(newX, newY)) {
this.x = newX;
this.y = newY;
// 敌人坦克移动时生成烟雾
this.createSmoke();
// 如果处于减速状态，生成紫色粒子
if (this.isSlowed && Math.random() > 0.95) {
createEnemySlowParticles(this);
}
} else if (moved) {
// Change direction if collision
const directions = ['up', 'down', 'left', 'right'];
if (this.isBoss) {
// BOSS has smarter collision response - try to go around
// Prefer direction towards player if possible
const player = gameState.player;
if (player) {
const dx = player.x - this.x;
const dy = player.y - this.y;
const preferredDirections = [];
if (dx > 0) preferredDirections.push('right');
if (dx < 0) preferredDirections.push('left');
if (dy > 0) preferredDirections.push('down');
if (dy < 0) preferredDirections.push('up');
// Add random directions as fallback
preferredDirections.push(...directions.filter(d => !preferredDirections.includes(d)));
// Try preferred directions first
for (const dir of preferredDirections) {
this.direction = dir;
let testX = this.x;
let testY = this.y;
switch (dir) {
case 'up': testY -= this.speed * this.speedMultiplier; break;
case 'down': testY += this.speed * this.speedMultiplier; break;
case 'left': testX -= this.speed * this.speedMultiplier; break;
case 'right': testX += this.speed * this.speedMultiplier; break;
}
if (!this.checkCollision(testX, testY)) {
newX = testX;
newY = testY;
moved = true;
break;
}
}
}
} else {
this.direction = directions[Math.floor(Math.random() * directions.length)];
}
}
}
handleShooting() {
if (keys.Space && this.shootCooldown === 0) {
this.shoot();
this.shootCooldown = this.maxShootCooldown;
}
}
shoot() {
let bulletX = this.x + this.width / 2 - BULLET_SIZE / 2;
let bulletY = this.y + this.height / 2 - BULLET_SIZE / 2;
// Adjust bullet position based on direction
switch (this.direction) {
case 'up':
bulletY -= this.height / 2;
break;
case 'down':
bulletY += this.height / 2;
break;
case 'left':
bulletX -= this.width / 2;
break;
case 'right':
bulletX += this.width / 2;
break;
}
// 根据射击模式发射子弹
if (this.shootPattern === 'single' || !this.isBoss) {
// 单发射击
gameState.bullets.push(new Bullet(
bulletX,
bulletY,
this.direction,
this.isPlayer,
this.color
));
} else if (this.shootPattern === 'double') {
// 双发射击，稍微分散
let angle1 = -15 * Math.PI / 180;
let angle2 = 15 * Math.PI / 180;
let spread = 10;
// 计算分散角度的子弹位置
let dx1 = Math.sin(angle1) * spread;
let dy1 = Math.cos(angle1) * spread;
let dx2 = Math.sin(angle2) * spread;
let dy2 = Math.cos(angle2) * spread;
// 根据方向调整分散位置
let bulletX1, bulletY1, bulletX2, bulletY2;
switch (this.direction) {
case 'up':
bulletX1 = bulletX + dx1;
bulletY1 = bulletY - dy1;
bulletX2 = bulletX + dx2;
bulletY2 = bulletY - dy2;
break;
case 'down':
bulletX1 = bulletX + dx1;
bulletY1 = bulletY + dy1;
bulletX2 = bulletX + dx2;
bulletY2 = bulletY + dy2;
break;
case 'left':
bulletX1 = bulletX - dy1;
bulletY1 = bulletY + dx1;
bulletX2 = bulletX - dy2;
bulletY2 = bulletY + dx2;
break;
case 'right':
bulletX1 = bulletX + dy1;
bulletY1 = bulletY + dx1;
bulletX2 = bulletX + dy2;
bulletY2 = bulletY + dx2;
break;
}
gameState.bullets.push(new Bullet(
bulletX1,
bulletY1,
this.direction,
this.isPlayer,
this.color
));
gameState.bullets.push(new Bullet(
bulletX2,
bulletY2,
this.direction,
this.isPlayer,
this.color
));
} else if (this.shootPattern === 'triple') {
// 三发射击，形成扇形
let angle1 = -30 * Math.PI / 180;
let angle2 = 0;
let angle3 = 30 * Math.PI / 180;
let spread = 15;
// 计算分散角度的子弹位置
let dx1 = Math.sin(angle1) * spread;
let dy1 = Math.cos(angle1) * spread;
let dx2 = Math.sin(angle2) * spread;
let dy2 = Math.cos(angle2) * spread;
let dx3 = Math.sin(angle3) * spread;
let dy3 = Math.cos(angle3) * spread;
// 根据方向调整分散位置
let bulletX1, bulletY1, bulletX2, bulletY2, bulletX3, bulletY3;
switch (this.direction) {
case 'up':
bulletX1 = bulletX + dx1;
bulletY1 = bulletY - dy1;
bulletX2 = bulletX + dx2;
bulletY2 = bulletY - dy2;
bulletX3 = bulletX + dx3;
bulletY3 = bulletY - dy3;
break;
case 'down':
bulletX1 = bulletX + dx1;
bulletY1 = bulletY + dy1;
bulletX2 = bulletX + dx2;
bulletY2 = bulletY + dy2;
bulletX3 = bulletX + dx3;
bulletY3 = bulletY + dy3;
break;
case 'left':
bulletX1 = bulletX - dy1;
bulletY1 = bulletY + dx1;
bulletX2 = bulletX - dy2;
bulletY2 = bulletY + dx2;
bulletX3 = bulletX - dy3;
bulletY3 = bulletY + dx3;
break;
case 'right':
bulletX1 = bulletX + dy1;
bulletY1 = bulletY + dx1;
bulletX2 = bulletX + dy2;
bulletY2 = bulletY + dx2;
bulletX3 = bulletX + dy3;
bulletY3 = bulletY + dx3;
break;
}
gameState.bullets.push(new Bullet(
bulletX1,
bulletY1,
this.direction,
this.isPlayer,
this.color
));
gameState.bullets.push(new Bullet(
bulletX2,
bulletY2,
this.direction,
this.isPlayer,
this.color
));
gameState.bullets.push(new Bullet(
bulletX3,
bulletY3,
this.direction,
this.isPlayer,
this.color
));
}
}
// 创建烟雾效果
createSmoke() {
const smokeCount = 2; // 恢复坦克两边各一个烟雾
const tankWidth = this.width;
const tankHeight = this.height;
let smokeX, smokeY;
// 根据坦克方向确定烟雾位置（坦克尾部两边）
switch (this.direction) {
case 'up':
// 坦克向上时，烟雾从底部两侧冒出
smokeX = this.x + tankWidth / 2;
smokeY = this.y + tankHeight;
break;
case 'down':
// 坦克向下时，烟雾从顶部两侧冒出
smokeX = this.x + tankWidth / 2;
smokeY = this.y;
break;
case 'left':
// 坦克向左时，烟雾从右侧两侧冒出
smokeX = this.x + tankWidth;
smokeY = this.y + tankHeight / 2;
break;
case 'right':
// 坦克向右时，烟雾从左侧两侧冒出
smokeX = this.x;
smokeY = this.y + tankHeight / 2;
break;
}
// 在坦克尾部两侧生成烟雾
for (let i = 0; i < smokeCount; i++) {
let offsetX = 0;
if (this.direction === 'up' || this.direction === 'down') {
// 上下方向时，烟雾在左右两侧
offsetX = (i === 0 ? -tankWidth / 4 : tankWidth / 4);
} else {
// 左右方向时，烟雾在上下两侧
smokeY = (i === 0 ? this.y + tankHeight / 4 : this.y + tankHeight * 3 / 4);
}
gameState.smokes.push(new Smoke(
smokeX + offsetX + (Math.random() - 0.5) * 5,
smokeY + (Math.random() - 0.5) * 5,
this.direction
));
}
}
checkCollision(newX, newY) {
// Check collision with walls
for (let i = gameState.walls.length - 1; i >= 0; i--) {
const wall = gameState.walls[i];
if (
newX < wall.x + wall.width &&
newX + this.width > wall.x &&
newY < wall.y + wall.height &&
newY + this.height > wall.y
) {
// 如果是玩家坦克，则摧毁墙壁
if (this.isPlayer) {
// 创建爆炸效果
gameState.explosions.push(new Explosion(wall.x + wall.width / 2, wall.y + wall.height / 2));
// 播放击中墙壁音效
// playSound('hit-wall-sound');
// 移除墙壁
gameState.walls.splice(i, 1);
return false; // 允许移动
}
return true; // 阻止敌人坦克移动
}
}
// Check collision with canvas boundaries
if (
newX < 0 ||
newX + this.width > CANVAS_WIDTH ||
newY < 0 ||
newY + this.height > CANVAS_HEIGHT
) {
return true;
}
// Check collision with traps (oil barrels)
for (let i = gameState.traps.length - 1; i >= 0; i--) {
const trap = gameState.traps[i];
if (
trap.type === TRAP_TYPES.OIL_BARREL &&
trap.active &&
this.x < trap.x + trap.width &&
this.x + this.width > trap.x &&
this.y < trap.y + trap.height &&
this.y + this.height > trap.y
) {
trap.trigger(null); // 触发油桶爆炸，传入null因为不是坦克触发的
return true; // 子弹被消耗
}
}
return false;
}
}
// 玩家道具粒子类
class PlayerPropParticle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.size = Math.random() * 4 + 2;
this.speedX = (Math.random() - 0.5) * 4;
this.speedY = (Math.random() - 0.5) * 4;
this.opacity = 1;
this.decay = Math.random() * 0.03 + 0.02;
this.lifeTime = 1500; // 1.5秒
this.startTime = Date.now();
}
update() {
const elapsed = Date.now() - this.startTime;
if (elapsed >= this.lifeTime) {
return true; // 粒子生命周期结束
}
this.x += this.speedX;
this.y += this.speedY;
this.opacity = 1 - (elapsed / this.lifeTime);
this.size *= 0.98; // 逐渐缩小
return false;
}
draw() {
ctx.save();
ctx.globalAlpha = this.opacity;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
// 玩家加速粒子类
class PlayerSpeedParticle {
constructor(x, y, direction) {
this.x = x;
this.y = y;
this.direction = direction;
this.size = Math.random() * 6 + 3;
this.speed = Math.random() * 3 + 2;
this.opacity = 1;
this.decay = Math.random() * 0.05 + 0.03;
this.color = '#FFC107'; // 黄色
}
update() {
// 根据方向移动粒子（从坦克前方向后移动）
switch (this.direction) {
case 'up':
this.y += this.speed;
break;
case 'down':
this.y -= this.speed;
break;
case 'left':
this.x += this.speed;
break;
case 'right':
this.x -= this.speed;
break;
}
this.opacity -= this.decay;
this.size *= 0.95;
this.speed *= 0.98;
return this.opacity <= 0 || this.size <= 1;
}
draw() {
ctx.save();
ctx.globalAlpha = this.opacity;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
// 添加发光效果
ctx.shadowColor = this.color;
ctx.shadowBlur = 10;
ctx.fill();
ctx.restore();
}
}
// 敌人减速粒子类
class EnemySlowParticle {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 5 + 2;
this.speedX = (Math.random() - 0.5) * 2;
this.speedY = (Math.random() - 0.5) * 2;
this.opacity = 1;
this.decay = Math.random() * 0.02 + 0.01;
this.color = '#9C27B0'; // 紫色
this.lifeTime = 8000; // 8秒
this.startTime = Date.now();
}
update() {
const elapsed = Date.now() - this.startTime;
if (elapsed >= this.lifeTime) {
return true; // 粒子生命周期结束
}
this.x += this.speedX;
this.y += this.speedY;
this.opacity = 1 - (elapsed / this.lifeTime);
this.size *= 0.99;
return false;
}
draw() {
ctx.save();
ctx.globalAlpha = this.opacity;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
// 添加发光效果
ctx.shadowColor = this.color;
ctx.shadowBlur = 8;
ctx.fill();
ctx.restore();
}
}
// 创建敌人减速粒子效果
function createEnemySlowParticles(enemy) {
const centerX = enemy.x + enemy.width / 2;
const centerY = enemy.y + enemy.height / 2;
// 每次创建1个粒子
const offsetX = (Math.random() - 0.5) * enemy.width * 0.5;
const offsetY = (Math.random() - 0.5) * enemy.height * 0.5;
gameState.enemySlowParticles.push(new EnemySlowParticle(centerX + offsetX, centerY + offsetY));
}
// 创建玩家获得道具时的粒子效果
function createPropParticles(player, propType) {
const propColors = {
[PROP_TYPES.EXTRA_LIFE]: '#4CAF50', // 绿色
[PROP_TYPES.SPEED_BOOST]: '#FFC107', // 黄色
[PROP_TYPES.SHIELD]: '#2196F3', // 蓝色
[PROP_TYPES.TIME_FREEZE]: '#00BCD4', // 青色
[PROP_TYPES.TIME_SLOW]: '#9C27B0' // 紫色
};
const color = propColors[propType] || '#ffffff';
const centerX = player.x + player.width / 2;
const centerY = player.y + player.height / 2;
// 创建多个粒子
for (let i = 0; i < 15; i++) {
gameState.playerPropParticles.push(new PlayerPropParticle(centerX, centerY, color));
}
}
// 粒子类
// 优化：限制最大粒子数量
const MAX_PARTICLES = 100;
let particleCount = 0;
class Particle {
constructor(x, y, color, isPortal) {
// 如果粒子数量已达上限，则不创建新粒子
if (particleCount >= MAX_PARTICLES) return;
particleCount++;
this.x = x;
this.y = y;
this.size = Math.random() * 2 + 1; // 优化：减小粒子尺寸
this.speedX = (Math.random() - 0.5) * (Math.random() * 3 + 1); // 优化：降低最大速度
this.speedY = (Math.random() - 0.5) * (Math.random() * 3 + 1);
this.opacity = 1;
this.decay = Math.random() * 0.04 + 0.02; // 优化：加快衰减速度
this.color = isPortal ?
`rgba(33, 150, 243, ${Math.random() * 0.5 + 0.5})` :
`rgba(33, 150, 243, ${Math.random() * 0.5 + 0.5})`;
}
update() {
if (!this.x && !this.y) return true; // 如果粒子被限制创建，直接返回true
this.x += this.speedX;
this.y += this.speedY;
this.opacity -= this.decay;
this.size *= 0.97;
if (this.opacity <= 0 || this.size <= 0.1) {
particleCount--; // 粒子消失时减少计数
return true;
}
return false;
}
draw() {
ctx.save();
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
// 爆炸效果类
class Explosion {
constructor(x, y, isPortalExplosion = false, radius = 30) {
this.x = x;
this.y = y;
this.radius = 5;
this.maxRadius = radius;
this.growthSpeed = 1.5;
this.opacity = 1;
this.decaySpeed = 0.02;
this.isPortalExplosion = isPortalExplosion;
this.particles = [];
// 创建粒子
const particleCount = isPortalExplosion ? 30 : 50;
for (let i = 0; i < particleCount; i++) {
this.particles.push(new Particle(x, y, null, isPortalExplosion));
}
}
draw() {
ctx.save();
// 绘制粒子
this.particles.forEach(particle => particle.draw());
if (this.isPortalExplosion) {
// 绘制传送门爆炸外圈 (深紫色)
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(76, 17, 149, ${this.opacity * 0.7})`;
ctx.fill();
// 绘制传送门爆炸中层 (紫色)
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius * 0.7, 0, Math.PI * 2);
ctx.fillStyle = `rgba(123, 31, 162, ${this.opacity * 0.8})`;
ctx.fill();
// 绘制传送门爆炸中心 (亮紫色)
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius * 0.4, 0, Math.PI * 2);
ctx.fillStyle = `rgba(191, 90, 242, ${this.opacity})`;
ctx.fill();
} else {
// 绘制普通爆炸外圈 (深蓝色)
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(13, 71, 161, ${this.opacity * 0.7})`;
ctx.fill();
// 绘制普通爆炸中层 (蓝色)
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius * 0.7, 0, Math.PI * 2);
ctx.fillStyle = `rgba(33, 150, 243, ${this.opacity * 0.8})`;
ctx.fill();
// 绘制普通爆炸中心 (亮蓝色)
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius * 0.4, 0, Math.PI * 2);
ctx.fillStyle = `rgba(187, 222, 251, ${this.opacity})`;
ctx.fill();
}
ctx.restore();
}
update() {
this.radius += this.growthSpeed;
this.opacity -= this.decaySpeed;
// 更新粒子
this.particles = this.particles.filter(particle => !particle.update());
// 如果爆炸效果已经消失且粒子全部消失，则返回true表示需要移除
return this.opacity <= 0 || (this.radius > this.maxRadius && this.particles.length === 0);
}
}
class Bullet {
constructor(x, y, direction, isPlayerBullet = false, tankColor = null) {
this.x = x;
this.y = y;
this.width = BULLET_SIZE;
this.height = BULLET_SIZE;
this.direction = direction;
this.speed = BULLET_SPEED;
this.isPlayerBullet = isPlayerBullet;
this.life = 100; // 子弹生命周期
this.tankColor = tankColor || (isPlayerBullet ? '#2196F3' : '#F44336');
this.damage = this.isPlayerBullet ? (gameState.playerBulletDamage || 1) : 1;
}
draw() {
ctx.save();
ctx.translate(this.x + this.width / 2, this.y + this.height / 2);
// 根据方向旋转子弹，确保与坦克方向一致
switch (this.direction) {
case 'right':
ctx.rotate(0); // 向右发射，不旋转
break;
case 'down':
ctx.rotate(Math.PI / 2); // 向下发射，旋转90度
break;
case 'left':
ctx.rotate(Math.PI); // 向左发射，旋转180度
break;
case 'up':
ctx.rotate(3 * Math.PI / 2); // 向上发射，旋转270度
break;
}
// 创建子弹渐变效果
const gradient = ctx.createLinearGradient(-this.width / 2, -this.height / 2, this.width * 2, 0);
gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
gradient.addColorStop(0.3, this.lightenColor(this.tankColor, 50));
gradient.addColorStop(1, this.darkenColor(this.tankColor, 20));
// 绘制子弹主体 (统一水平向右的形状，通过旋转适应不同方向)
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.moveTo(-this.width / 2, -this.height / 3);
ctx.lineTo(this.width * 1.5, 0);
ctx.lineTo(-this.width / 2, this.height / 3);
ctx.closePath();
ctx.fill();
// 绘制发光效果
ctx.shadowColor = this.lightenColor(this.tankColor, 100);
ctx.shadowBlur = 8;
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.beginPath();
ctx.moveTo(-this.width / 4, -this.height / 4);
ctx.lineTo(this.width, 0);
ctx.lineTo(-this.width / 4, this.height / 4);
ctx.closePath();
ctx.fill();
// 绘制子弹尖端
ctx.shadowBlur = 0;
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(this.width * 1.5, 0, this.height / 4, 0, Math.PI * 2);
ctx.fill();
// 添加尾部拖尾效果
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.beginPath();
ctx.moveTo(-this.width / 2 - this.width / 4, 0);
ctx.lineTo(-this.width / 2, -this.height / 6);
ctx.lineTo(-this.width / 2, this.height / 6);
ctx.closePath();
ctx.fill();
ctx.restore();
}
// 调暗颜色方法
darkenColor(color, percent) {
// 将颜色从十六进制转换为RGB
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
// 调暗颜色
r = Math.max(0, Math.floor(r * (1 - percent / 100)));
g = Math.max(0, Math.floor(g * (1 - percent / 100)));
b = Math.max(0, Math.floor(b * (1 - percent / 100)));
// 转换回十六进制
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
// 调亮颜色方法
lightenColor(color, percent) {
// 将颜色从十六进制转换为RGB
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
// 调亮颜色
r = Math.min(255, Math.floor(r * (1 + percent / 100)));
g = Math.min(255, Math.floor(g * (1 + percent / 100)));
b = Math.min(255, Math.floor(b * (1 + percent / 100)));
// 转换回十六进制
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
update() {
switch (this.direction) {
case 'up':
this.y -= this.speed;
break;
case 'down':
this.y += this.speed;
break;
case 'left':
this.x -= this.speed;
break;
case 'right':
this.x += this.speed;
break;
}
// Remove bullet if it goes off screen
if (
this.x < 0 ||
this.x > CANVAS_WIDTH ||
this.y < 0 ||
this.y > CANVAS_HEIGHT
) {
return true;
}
return false;
}
checkCollision() {
// Check collision with walls
for (let i = gameState.walls.length - 1; i >= 0; i--) {
const wall = gameState.walls[i];
if (
this.x < wall.x + wall.width &&
this.x + this.width > wall.x &&
this.y < wall.y + wall.height &&
this.y + this.height > wall.y
) {
// 创建爆炸效果
gameState.explosions.push(new Explosion(wall.x + wall.width / 2, wall.y + wall.height / 2));
// 播放击中墙壁音效
// playSound('hit-wall-sound');
gameState.walls.splice(i, 1);
return true;
}
}
// Check collision with tanks
if (this.isPlayerBullet) {
for (let i = gameState.enemies.length - 1; i >= 0; i--) {
const enemy = gameState.enemies[i];
if (
this.x < enemy.x + enemy.width &&
this.x + this.width > enemy.x &&
this.y < enemy.y + enemy.height &&
this.y + this.height > enemy.y
) {
// 创建爆炸效果
gameState.explosions.push(new Explosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2));
// 播放击中敌人音效
// playSound('hit-enemy-sound');
if (enemy.isBoss) {
enemy.health--;
// 更新BOSS血条
updateBossHealthBar(enemy);
// 播放得分音效
// playSound('score-sound');
gameState.score += 50;
// 阶段转换逻辑
if (enemy.health <= 10 && enemy.health > 5 && enemy.phase === 1) {
// 进入第二阶段
enemy.phase = 2;
enemy.shootPattern = 'double';
enemy.speed = ENEMY_SPEED * 0.8;
enemy.color = '#F44336'; // 红色
enemy.turretColor = '#D32F2F';
// 创建阶段转换特效
gameState.explosions.push(new Explosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2, false, 40));
// playSound('level-up-sound');
// 杀死所有中型坦克
for (let j = gameState.enemies.length - 1; j >= 0; j--) {
const e = gameState.enemies[j];
if (e.isMedium) {
gameState.explosions.push(new Explosion(e.x + e.width / 2, e.y + e.height / 2));
gameState.enemies.splice(j, 1);
}
}
// 设置玩家子弹伤害为2
gameState.playerBulletDamage = 2;
} else if (enemy.health <= 5 && enemy.phase === 2) {
// 进入第三阶段
enemy.phase = 3;
enemy.shootPattern = 'triple';
enemy.speed = ENEMY_SPEED * 0.9;
enemy.color = '#FFC107'; // 黄色
enemy.turretColor = '#FFA000';
// 创建阶段转换特效
gameState.explosions.push(new Explosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2, false, 40));
// playSound('level-up-sound');
// 设置玩家子弹伤害为3
gameState.playerBulletDamage = 3;
}
if (enemy.health <= 0) {
// 隐藏BOSS血条
hideBossHealthBar();
// 播放得分音效
// playSound('score-sound');
gameState.enemies.splice(i, 1);
gameState.score += 500; // BOSS分数更高
// 创建大型爆炸效果
gameState.explosions.push(new Explosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2, false, 60));
}
} else if (enemy.isMedium) {
enemy.health--;
// 播放得分音效
// playSound('score-sound');
gameState.score += 30;
if (enemy.health <= 0) {
// 播放得分音效
// playSound('score-sound');
gameState.enemies.splice(i, 1);
gameState.score += 300; // 中型坦克分数
// 创建爆炸效果
gameState.explosions.push(new Explosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2, false, 40));
}
} else {
// 播放得分音效
// playSound('score-sound');
gameState.enemies.splice(i, 1);
gameState.score += 100;
}
return true;
}
}
} else {
if (
this.x < gameState.player.x + gameState.player.width &&
this.x + this.width > gameState.player.x &&
this.y < gameState.player.y + gameState.player.height &&
this.y + this.height > gameState.player.y
) {
if (gameState.player.shield) {
gameState.player.shield = false;
return true;
}
// 创建爆炸效果
gameState.explosions.push(new Explosion(gameState.player.x + gameState.player.width / 2, gameState.player.y + gameState.player.height / 2));
// 播放玩家死亡音效
// playSound('player-death-sound');
gameState.lives--;
if (gameState.lives <= 0) {
endGame(false);
} else {
spawnPlayer();
}
return true;
}
}
// Check collision with traps (especially oil barrels)
for (let i = gameState.traps.length - 1; i >= 0; i--) {
const trap = gameState.traps[i];
if (
trap.active &&
trap.type === TRAP_TYPES.OIL_BARREL &&
this.x < trap.x + trap.width &&
this.x + this.width > trap.x &&
this.y < trap.y + trap.height &&
this.y + this.height > trap.y
) {
// Bullet hits oil barrel, trigger explosion
trap.trigger(null); // Pass null since no tank is triggering it
return true;
}
}
return false;
}
}
class Wall {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = WALL_SIZE;
this.height = WALL_SIZE;
this.color = '#607D8B'; // 石灰色作为基础色
}
draw() {
ctx.save();
ctx.translate(this.x, this.y);
// 创建墙壁渐变效果
const wallGradient = ctx.createLinearGradient(0, 0, this.width, this.height);
wallGradient.addColorStop(0, this.lightenColor(this.color, 10));
wallGradient.addColorStop(1, this.darkenColor(this.color, 30));
// 绘制墙壁主体
ctx.fillStyle = wallGradient;
ctx.fillRect(0, 0, this.width, this.height);
// 绘制墙壁边缘
ctx.strokeStyle = this.darkenColor(this.color, 40);
ctx.lineWidth = 2;
ctx.strokeRect(0, 0, this.width, this.height);
// 绘制砖石纹理
const brickWidth = this.width / 3;
const brickHeight = this.height / 3;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
// 砖块位置偏移，创建交错效果
const offsetX = (j % 2 === 0) ? 0 : brickWidth / 2;
const x = i * brickWidth + offsetX;
const y = j * brickHeight;
// 确保砖块不超出墙壁边界
if (x + brickWidth <= this.width) {
ctx.strokeStyle = this.darkenColor(this.color, 20);
ctx.lineWidth = 1;
ctx.strokeRect(x, y, brickWidth, brickHeight);
// 砖块内部细节
if (Math.random() > 0.5) {
ctx.fillStyle = this.darkenColor(this.color, 10);
ctx.fillRect(x + 2, y + 2, brickWidth - 4, brickHeight - 4);
}
}
}
}
// 添加金属加固条
ctx.fillStyle = '#424242';
ctx.fillRect(0, this.height - 5, this.width, 5);
ctx.fillRect(this.width - 5, 0, 5, this.height);
ctx.restore();
}
// 调暗颜色方法
darkenColor(color, percent) {
// 将颜色从十六进制转换为RGB
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
// 调暗颜色
r = Math.max(0, Math.floor(r * (1 - percent / 100)));
g = Math.max(0, Math.floor(g * (1 - percent / 100)));
b = Math.max(0, Math.floor(b * (1 - percent / 100)));
// 转换回十六进制
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
// 调亮颜色方法
lightenColor(color, percent) {
// 将颜色从十六进制转换为RGB
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
// 调亮颜色
r = Math.min(255, Math.floor(r * (1 + percent / 100)));
g = Math.min(255, Math.floor(g * (1 + percent / 100)));
b = Math.min(255, Math.floor(b * (1 + percent / 100)));
// 转换回十六进制
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
}
// 空投箱类
class AirDrop {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = 30;
this.height = 30;
this.speed = 0.3 + Math.random() * 2; // 增加速度范围: 0.3-2.3
this.isOpen = false;
this.dropTime = Date.now();
this.openDelay = 2000 + Math.random() * 2000; // 随机延迟: 2-4秒
this.glowIntensity = 1;
this.glowDirection = -0.02;
}
update() {
// 下落逻辑
if (!this.isOpen) {
this.y += this.speed;
// 移除落地检测，经过延迟后自动打开
if (Date.now() - this.dropTime > this.openDelay) {
this.open();
}
}
// 闪烁效果
this.glowIntensity += this.glowDirection;
if (this.glowIntensity <= 0.5 || this.glowIntensity >= 1) {
this.glowDirection *= -1;
}
return false; // 不删除空投箱
}
open() {
this.isOpen = true;
// 生成随机道具（极限模式下不生成）
if (gameState.gameMode !== 'extreme') {
const propTypes = Object.values(PROP_TYPES);
const randomType = propTypes[Math.floor(Math.random() * propTypes.length)];
gameState.props.push(new Prop(this.x + 5, this.y + 5, randomType));
}
// 创建打开特效
gameState.explosions.push(new Explosion(this.x + this.width / 2, this.y + this.height / 2, false, 30));
// playSound('powerup-sound');
}
draw() {
ctx.save();
ctx.translate(this.x + this.width / 2, this.y + this.height / 2);
if (!this.isOpen) {
// 绘制空投箱主体
ctx.fillStyle = '#607D8B';
ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
// 绘制箱子细节
ctx.fillStyle = '#455A64';
ctx.fillRect(-this.width / 2 + 5, -this.height / 2, 5, this.height);
ctx.fillRect(this.width / 2 - 10, -this.height / 2, 5, this.height);
ctx.fillRect(-this.width / 2, -this.height / 2 + 5, this.width, 5);
ctx.fillRect(-this.width / 2, this.height / 2 - 10, this.width, 5);
// 绘制发光效果
ctx.strokeStyle = `rgba(179, 255, 255, ${this.glowIntensity})`;
ctx.lineWidth = 2;
ctx.strokeRect(-this.width / 2 - 2, -this.height / 2 - 2, this.width + 4, this.height + 4);
}
ctx.restore();
}
}
class Prop {
constructor(x, y, type) {
this.x = x;
this.y = y;
this.width = PROP_SIZE;
this.height = PROP_SIZE;
this.type = type;
this.spawnTime = Date.now();
this.lifespan = 10000; // 10 seconds
this.rotation = 0;
this.rotationSpeed = 0.05;
this.colors = {
[PROP_TYPES.EXTRA_LIFE]: '#4CAF50', // 绿色
[PROP_TYPES.SPEED_BOOST]: '#FFC107', // 黄色
[PROP_TYPES.SHIELD]: '#2196F3', // 蓝色
[PROP_TYPES.TIME_FREEZE]: '#00BCD4', // 青色
[PROP_TYPES.TIME_SLOW]: '#9C27B0' // 紫色
};
}
draw() {
ctx.save();
ctx.translate(this.x + this.width / 2, this.y + this.height / 2);
ctx.rotate(this.rotation);
const color = this.colors[this.type];
// 创建道具渐变效果
const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.width / 2);
gradient.addColorStop(0, this.lightenColor(color, 30));
gradient.addColorStop(1, color);
// 绘制道具主体
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(0, 0, this.width / 2, 0, Math.PI * 2);
ctx.fill();
// 绘制道具边框
ctx.strokeStyle = this.darkenColor(color, 30);
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(0, 0, this.width / 2, 0, Math.PI * 2);
ctx.stroke();
// 绘制道具图标
ctx.fillStyle = '#fff';
switch (this.type) {
case PROP_TYPES.EXTRA_LIFE:
ctx.beginPath();
ctx.moveTo(0, -this.height / 4);
ctx.lineTo(this.width / 4, this.height / 4);
ctx.lineTo(-this.width / 4, this.height / 4);
ctx.closePath();
ctx.fill();
break;
case PROP_TYPES.SPEED_BOOST:
ctx.beginPath();
ctx.moveTo(-this.width / 4, 0);
ctx.lineTo(this.width / 4, -this.height / 4);
ctx.lineTo(this.width / 4, this.height / 4);
ctx.closePath();
ctx.fill();
break;
case PROP_TYPES.SHIELD:
ctx.beginPath();
ctx.arc(0, 0, this.width / 6, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(0, 0, this.width / 4, 0, Math.PI * 2);
ctx.stroke();
break;
case PROP_TYPES.TIME_SLOW:
// 绘制时间冻结图标（雪花形状）
ctx.beginPath();
ctx.moveTo(0, -this.height / 4);
ctx.lineTo(this.width / 6, this.height / 6);
ctx.lineTo(this.width / 4, 0);
ctx.lineTo(this.width / 6, -this.height / 6);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(0, this.height / 4);
ctx.lineTo(-this.width / 6, -this.height / 6);
ctx.lineTo(-this.width / 4, 0);
ctx.lineTo(-this.width / 6, this.height / 6);
ctx.closePath();
ctx.fill();
break;
case PROP_TYPES.TIME_FREEZE:
// 绘制时间减速图标（时钟形状）
ctx.beginPath();
ctx.arc(0, 0, this.width / 6, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, -this.height / 6);
ctx.lineTo(this.width / 12, -this.height / 12);
ctx.closePath();
ctx.fill();
break;
}
ctx.restore();
}
update() {
this.rotation += this.rotationSpeed;
// Remove prop if lifespan expired
if (Date.now() - this.spawnTime > this.lifespan) {
return true;
}
return false;
}
// 调暗颜色方法
darkenColor(color, percent) {
// 将颜色从十六进制转换为RGB
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
// 调暗颜色
r = Math.max(0, Math.floor(r * (1 - percent / 100)));
g = Math.max(0, Math.floor(g * (1 - percent / 100)));
b = Math.max(0, Math.floor(b * (1 - percent / 100)));
// 转换回十六进制
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
// 调亮颜色方法
lightenColor(color, percent) {
// 将颜色从十六进制转换为RGB
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
// 调亮颜色
r = Math.min(255, Math.floor(r * (1 + percent / 100)));
g = Math.min(255, Math.floor(g * (1 + percent / 100)));
b = Math.min(255, Math.floor(b * (1 + percent / 100)));
// 转换回十六进制
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
update() {
// Remove prop if lifespan expired
if (Date.now() - this.spawnTime > this.lifespan) {
return true;
}
return false;
}
}
// 机关类
class Trap {
constructor(x, y, type) {
this.x = x;
this.y = y;
this.width = TRAP_SIZE;
this.height = TRAP_SIZE;
this.type = type;
this.active = true;
this.spawnTime = Date.now();
this.lifespan = type === TRAP_TYPES.PORTAL ? 45000 : 30000; // 传送门持续45秒，其他机关30秒
this.linkedPortal = null; // 用于传送门，链接到另一个传送门
this.explosionRadius = 80; // 油桶爆炸半径，比地雷更大
this.lastTeleportTime = 0; // 用于传送门冷却
this.rotation = 0;
this.rotationSpeed = type === TRAP_TYPES.MINE ? 0.02 : 0;
this.uses = 0; // 传送门使用次数
this.colors = {
[TRAP_TYPES.MINE]: '#333333',
[TRAP_TYPES.PORTAL]: '#0066ff',
[TRAP_TYPES.OIL_BARREL]: '#8B4513'
};
}
draw() {
if (!this.active) return;
ctx.save();
ctx.translate(this.x + this.width / 2, this.y + this.height / 2);
ctx.rotate(this.rotation);
switch (this.type) {
case TRAP_TYPES.MINE:
// 绘制地雷主体
const mineGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.width / 2);
mineGradient.addColorStop(0, '#555555');
mineGradient.addColorStop(1, this.colors[this.type]);
ctx.fillStyle = mineGradient;
ctx.beginPath();
ctx.arc(0, 0, this.width / 2, 0, Math.PI * 2);
ctx.fill();
// 绘制地雷边缘
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(0, 0, this.width / 2, 0, Math.PI * 2);
ctx.stroke();
// 绘制地雷标志
ctx.fillStyle = '#ff0000';
ctx.beginPath();
ctx.moveTo(0, -this.height / 4);
ctx.lineTo(this.width / 4, this.height / 4);
ctx.lineTo(-this.width / 4, this.height / 4);
ctx.closePath();
ctx.fill();
// 绘制金属纹理
ctx.strokeStyle = '#555555';
ctx.lineWidth = 1;
for (let i = 0; i < 6; i++) {
const angle = (i * Math.PI) / 3;
const x1 = Math.cos(angle) * this.width / 4;
const y1 = Math.sin(angle) * this.width / 4;
const x2 = Math.cos(angle) * this.width / 2;
const y2 = Math.sin(angle) * this.width / 2;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
break;
case TRAP_TYPES.PORTAL:
// 绘制传送门 (蓝色和紫色交替)
const portalColor1 = Math.sin(Date.now() / 500) > 0 ? '#0066ff' : '#9900ff';
const portalColor2 = Math.sin(Date.now() / 500) > 0 ? '#9900ff' : '#0066ff';
// 外光环
ctx.beginPath();
ctx.arc(0, 0, this.width / 2, 0, Math.PI * 2);
const outerGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.width / 2);
outerGradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
outerGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = outerGradient;
ctx.fill();
// 传送门主体
ctx.beginPath();
ctx.arc(0, 0, this.width / 2 * 0.8, 0, Math.PI * 2);
const portalGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.width / 2 * 0.8);
portalGradient.addColorStop(0, 'rgba(255, 255, 255, 0.5)');
portalGradient.addColorStop(0.5, '#9c27b0'); // 紫色
portalGradient.addColorStop(1, '#6a1b9a'); // 深紫色
ctx.fillStyle = portalGradient;
ctx.fill();
// 内部光环
ctx.beginPath();
ctx.arc(0, 0, this.width / 3, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.fill();
// 能量流动效果
const time = Date.now() / 1000;
for (let i = 0; i < 8; i++) {
const angle = (i * Math.PI / 4) + time;
const distance = this.width / 4 + Math.sin(time * 2 + i) * this.width / 8;
const x = Math.cos(angle) * distance;
const y = Math.sin(angle) * distance;
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2);
ctx.fill();
}
break;
case TRAP_TYPES.OIL_BARREL:
// 绘制油桶主体
const barrelGradient = ctx.createLinearGradient(-this.width / 2, 0, this.width / 2, 0);
barrelGradient.addColorStop(0, this.darkenColor(this.colors[this.type], 20));
barrelGradient.addColorStop(1, this.lightenColor(this.colors[this.type], 10));
ctx.fillStyle = barrelGradient;
ctx.fillRect(-this.width / 2, -this.height / 4, this.width, this.height * 3 / 4);
// 油桶顶部
ctx.fillStyle = this.darkenColor(this.colors[this.type], 10);
ctx.fillRect(-this.width / 2 - 2, -this.height / 2, this.width + 4, this.height / 4);
// 油桶盖子
ctx.fillStyle = '#696969';
ctx.fillRect(-this.width / 4, -this.height / 2, this.width / 2, this.height / 8);
// 金属条纹
ctx.fillStyle = '#444444';
ctx.fillRect(-this.width / 2, -this.height / 8, this.width, 2);
ctx.fillRect(-this.width / 2, this.height / 8, this.width, 2);
// 警告标志
ctx.fillStyle = '#ff0000';
ctx.beginPath();
ctx.moveTo(-this.width / 6, -this.height / 16);
ctx.lineTo(this.width / 6, -this.height / 16);
ctx.lineTo(0, this.height / 16);
ctx.closePath();
ctx.fill();
break;
}
ctx.restore();
}
update() {
this.rotation += this.rotationSpeed;
// 检查是否过期
if (Date.now() - this.spawnTime > this.lifespan) {
return true;
}
return false;
}
// 调暗颜色方法
darkenColor(color, percent) {
// 将颜色从十六进制转换为RGB
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
// 调暗颜色
r = Math.max(0, Math.floor(r * (1 - percent / 100)));
g = Math.max(0, Math.floor(g * (1 - percent / 100)));
b = Math.max(0, Math.floor(b * (1 - percent / 100)));
// 转换回十六进制
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
// 调亮颜色方法
lightenColor(color, percent) {
// 将颜色从十六进制转换为RGB
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
// 调亮颜色
r = Math.min(255, Math.floor(r * (1 + percent / 100)));
g = Math.min(255, Math.floor(g * (1 + percent / 100)));
b = Math.min(255, Math.floor(b * (1 + percent / 100)));
// 转换回十六进制
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
update() {
// 检查是否过期
if (Date.now() - this.spawnTime > this.lifespan) {
return true;
}
return false;
}
trigger(tank) {
if (!this.active) return false;
switch (this.type) {
case TRAP_TYPES.MINE:
this.active = false;
// 创建爆炸效果
gameState.explosions.push(new Explosion(this.x + this.width / 2, this.y + this.height / 2));
// 播放爆炸音效
// playSound('hit-enemy-sound');
// 对坦克造成伤害
if (tank.isPlayer) {
if (tank.shield) {
tank.shield = false;
} else {
gameState.lives--;
if (gameState.lives <= 0) {
endGame(false);
} else {
spawnPlayer();
}
}
} else {
// 对敌人造成伤害
for (let i = gameState.enemies.length - 1; i >= 0; i--) {
if (gameState.enemies[i] === tank) {
gameState.enemies.splice(i, 1);
gameState.score += 100;
break;
}
}
}
break;
case TRAP_TYPES.PORTAL:
// 传送逻辑 - 添加冷却时间防止连续传送
const currentTime = Date.now();
if (this.linkedPortal && this.linkedPortal.active && currentTime - this.lastTeleportTime > 1000) {
// 创建传送效果 (蓝色爆炸)
gameState.explosions.push(new Explosion(this.x + this.width / 2, this.y + this.height / 2, true));
gameState.explosions.push(new Explosion(this.linkedPortal.x + this.linkedPortal.width / 2, this.linkedPortal.y + this.linkedPortal.height / 2, true));
// 播放传送音效
// playSound('hit-wall-sound');
// 传送坦克
const newX = this.linkedPortal.x + (this.linkedPortal.width - tank.width) / 2;
const newY = this.linkedPortal.y + (this.linkedPortal.height - tank.height) / 2;
tank.x = newX;
tank.y = newY;
// 增加使用次数
this.uses++;
this.linkedPortal.uses++;
// 设置冷却时间
this.lastTeleportTime = currentTime;
this.linkedPortal.lastTeleportTime = currentTime;
// 检查是否达到使用次数上限
if (this.uses >= 10) {
this.active = false;
gameState.explosions.push(new Explosion(this.x + this.width / 2, this.y + this.height / 2, true));
}
if (this.linkedPortal.uses >= 10) {
this.linkedPortal.active = false;
gameState.explosions.push(new Explosion(this.linkedPortal.x + this.linkedPortal.width / 2, this.linkedPortal.y + this.linkedPortal.height / 2, true));
}
}
if (this.uses >= 10) {
this.active = false;
gameState.explosions.push(new Explosion(this.x + this.width / 2, this.y + this.height / 2, true));
}
if (this.linkedPortal.uses >= 10) {
this.linkedPortal.active = false;
gameState.explosions.push(new Explosion(this.linkedPortal.x + this.linkedPortal.width / 2, this.linkedPortal.y + this.linkedPortal.height / 2, true));
}
break;
case TRAP_TYPES.OIL_BARREL:
this.active = false;
// 创建更大的爆炸效果
gameState.explosions.push(new Explosion(this.x + this.width / 2, this.y + this.height / 2, false, this.explosionRadius));
// 播放爆炸音效
// playSound('hit-enemy-sound');
// 对范围内的坦克造成伤害
this.damageNearbyTanks();
break;
}
return true;
}
damageNearbyTanks() {
const centerX = this.x + this.width / 2;
const centerY = this.y + this.height / 2;
// 伤害玩家
const player = gameState.player;
if (player) {
const dx = player.x + player.width / 2 - centerX;
const dy = player.y + player.height / 2 - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < this.explosionRadius) {
if (player.shield) {
player.shield = false;
} else {
gameState.lives--;
if (gameState.lives <= 0) {
endGame(false);
} else {
spawnPlayer();
}
}
}
}
// 伤害敌人
for (let i = gameState.enemies.length - 1; i >= 0; i--) {
const enemy = gameState.enemies[i];
const dx = enemy.x + enemy.width / 2 - centerX;
const dy = enemy.y + enemy.height / 2 - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < this.explosionRadius) {
gameState.enemies.splice(i, 1);
gameState.score += 100;
}
}
}
linkPortal(portal) {
this.linkedPortal = portal;
portal.linkedPortal = this;
}
}
// Game functions
// 添加暂停状态变量
gameState.isPaused = false;
// 添加颜色选择器和坦克预览
const colorPicker = document.getElementById('tank-color-picker');
const previewCanvas = document.getElementById('tank-preview');
const previewCtx = previewCanvas.getContext('2d');
// 绘制预览坦克的函数
function drawPreviewTank(color) {
previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
const tankSize = 25;
const x = previewCanvas.width / 2;
const y = previewCanvas.height / 2;
const turretColor = darkenColor(color, 20);
const trackColor = '#212121';
const trackDetailColor = '#424242';
previewCtx.save();
previewCtx.translate(x, y);
// 绘制履带
previewCtx.fillStyle = trackColor;
previewCtx.fillRect(-tankSize / 2 - 4, -tankSize / 2, 4, tankSize);
previewCtx.fillRect(tankSize / 2, -tankSize / 2, 4, tankSize);
// 履带细节
previewCtx.fillStyle = trackDetailColor;
previewCtx.fillRect(-tankSize / 2 - 4, -tankSize / 2, 4, 6);
previewCtx.fillRect(-tankSize / 2 - 4, tankSize / 2 - 6, 4, 6);
previewCtx.fillRect(tankSize / 2, -tankSize / 2, 4, 6);
previewCtx.fillRect(tankSize / 2, tankSize / 2 - 6, 4, 6);
// 创建车身渐变效果
const bodyGradient = previewCtx.createLinearGradient(-tankSize / 2, -tankSize / 2, tankSize / 2, tankSize / 2);
bodyGradient.addColorStop(0, lightenColor(color, 15));
bodyGradient.addColorStop(1, darkenColor(color, 15));
// 绘制坦克车身
previewCtx.fillStyle = bodyGradient;
previewCtx.fillRect(-tankSize / 2, -tankSize / 2, tankSize, tankSize);
// 绘制车身装甲细节
previewCtx.strokeStyle = darkenColor(color, 30);
previewCtx.lineWidth = 2;
previewCtx.strokeRect(-tankSize / 2 + 4, -tankSize / 2 + 4, tankSize - 8, tankSize - 8);
previewCtx.strokeRect(-tankSize / 2 + 8, -tankSize / 2 + 8, tankSize - 16, tankSize - 16);
// 绘制装甲板连接点
previewCtx.fillStyle = '#333';
previewCtx.beginPath();
previewCtx.arc(-tankSize / 2 + 8, -tankSize / 2 + 8, 2, 0, Math.PI * 2);
previewCtx.arc(tankSize / 2 - 8, -tankSize / 2 + 8, 2, 0, Math.PI * 2);
previewCtx.arc(-tankSize / 2 + 8, tankSize / 2 - 8, 2, 0, Math.PI * 2);
previewCtx.arc(tankSize / 2 - 8, tankSize / 2 - 8, 2, 0, Math.PI * 2);
previewCtx.fill();
// 绘制坦克炮塔
const turretGradient = previewCtx.createRadialGradient(0, 0, 0, 0, 0, tankSize / 4);
turretGradient.addColorStop(0, lightenColor(turretColor, 10));
turretGradient.addColorStop(1, darkenColor(turretColor, 20));
previewCtx.fillStyle = turretGradient;
previewCtx.beginPath();
previewCtx.arc(0, 0, tankSize / 4, 0, Math.PI * 2);
previewCtx.fill();
// 绘制炮塔细节
previewCtx.fillStyle = '#444';
previewCtx.beginPath();
previewCtx.arc(0, 0, tankSize / 8, 0, Math.PI * 2);
previewCtx.fill();
// 绘制瞄准镜
previewCtx.fillStyle = '#000';
previewCtx.fillRect(-3, -tankSize / 2 - 16, 6, 4);
previewCtx.fillStyle = '#0ff';
previewCtx.fillRect(-2, -tankSize / 2 - 15, 4, 2);
// 绘制炮管
previewCtx.fillStyle = trackColor;
previewCtx.fillRect(-3, -tankSize / 2 - 12, 6, 14);
previewCtx.fillStyle = darkenColor(trackColor, 20);
previewCtx.fillRect(-2, -tankSize / 2 - 18, 4, 6);
// 绘制炮管散热孔
previewCtx.fillStyle = '#555';
previewCtx.fillRect(-1, -tankSize / 2 - 10, 2, 2);
previewCtx.fillRect(-1, -tankSize / 2 - 6, 2, 2);
previewCtx.fillRect(-1, -tankSize / 2 - 2, 2, 2);
// 添加侧装甲
previewCtx.fillStyle = darkenColor(color, 10);
previewCtx.fillRect(-tankSize / 2 - 6, -tankSize / 2 + 8, 2, tankSize - 16);
previewCtx.fillRect(tankSize / 2 + 4, -tankSize / 2 + 8, 2, tankSize - 16);
previewCtx.restore();
}
// 颜色明暗处理函数
function darkenColor(color, percent) {
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
r = Math.max(0, Math.floor(r * (1 - percent / 100)));
g = Math.max(0, Math.floor(g * (1 - percent / 100)));
b = Math.max(0, Math.floor(b * (1 - percent / 100)));
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
function lightenColor(color, percent) {
let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 16);
let b = parseInt(color.substring(5, 7), 16);
r = Math.min(255, Math.floor(r * (1 + percent / 100)));
g = Math.min(255, Math.floor(g * (1 + percent / 100)));
b = Math.min(255, Math.floor(b * (1 + percent / 100)));
const toHex = (c) => {
const hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
// 初始化预览坦克
drawPreviewTank(colorPicker.value);
// 颜色选择器事件监听
colorPicker.addEventListener('input', function () {
drawPreviewTank(this.value);
});
function startGame() {
// 根据难度调整敌人数量
const baseEnemies = 5;
enemyCount = baseEnemies * gameDifficulty;
// 获取玩家名字
const playerNameInput = document.getElementById('player-name');
gameState.playerName = playerNameInput.value.trim() || '玩家';
// 获取坦克颜色
gameState.playerColor = colorPicker.value;
gameState.isPlaying = true;
gameState.isPaused = false;
gameState.score = 0;
// 保持当前关卡重新开始
// gameState.level = 1;
gameState.playerBulletDamage = 1; // 玩家子弹初始伤害
// 根据游戏模式设置初始生命数
gameState.lives = gameState.gameMode === 'extreme' ? 1 : 3;
startScreen.style.display = 'none';
gameOverScreen.style.display = 'none';
winScreen.style.display = 'none';
// 创建剧情显示元素
const storyElement = document.createElement('div');
storyElement.id = 'game-story';
storyElement.style.position = 'fixed';
storyElement.style.top = '50%';
storyElement.style.left = '50%';
storyElement.style.transform = 'translate(-50%, -50%)';
storyElement.style.color = 'white';
storyElement.style.fontSize = '24px';
storyElement.style.textAlign = 'center';
storyElement.style.padding = '20px';
storyElement.style.maxWidth = '600px';
storyElement.style.backgroundColor = 'rgba(0,0,0,0.7)';
storyElement.style.borderRadius = '10px';
storyElement.style.zIndex = '1000';
storyElement.style.opacity = '1';
storyElement.style.transition = 'opacity 1s linear';
storyElement.innerHTML = `
<h2>${translations[currentLanguage]['story-title']}</h2>
<p>${translations[currentLanguage]['story-p1']}</p>
<p>${translations[currentLanguage]['story-p2']}</p>
<p>${translations[currentLanguage]['story-p3']}</p>
<button id="skip-story" style="margin-top: 20px; padding: 10px 20px; font-size: 18px; background-color: #ff4500; color: white; border: none; border-radius: 5px; cursor: pointer;">${translations[currentLanguage]['skip-story']}</button>
`;
document.body.appendChild(storyElement);
// 添加跳过按钮点击事件
const skipButton = document.getElementById('skip-story');
skipButton.addEventListener('click', function () {
storyElement.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(storyElement);
initLevel();
gameLoop();
}, 1000); // 等待透明度过渡完成
});
// 10秒后隐藏剧情并开始游戏
setTimeout(() => {
storyElement.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(storyElement);
initLevel();
gameLoop();
}, 1000); // 等待透明度过渡完成
}, 10000);
}
function initLevel() {
console.log('初始化关卡: ' + gameState.level);
gameState.enemies = [];
gameState.bullets = [];
gameState.walls = [];
spawnPlayer();
spawnEnemies();
generateMap();
// 初始化限时模式
if (gameState.timeLimitEnabled) {
gameState.timeRemaining = 120; // 2分钟
// 清除可能存在的旧定时器
if (gameState.timerInterval) {
clearInterval(gameState.timerInterval);
}
// 设置新定时器
gameState.timerInterval = setInterval(() => {
gameState.timeRemaining--;
if (gameState.timeRemaining <= 0) {
clearInterval(gameState.timerInterval);
endGame(false); // 时间到，游戏结束
}
}, 1000);
}
}
function spawnPlayer() {
gameState.player = new Tank(
CANVAS_WIDTH / 2 - TANK_SIZE / 2,
CANVAS_HEIGHT - TANK_SIZE * 2,
true
);
}
function spawnEnemies() {
// Spawn enemies based on level
// 调整敌人数量增长速度，避免过多敌人导致生成失败
if (gameState.level === 10) {
// 第十关生成BOSS
const bossX = CANVAS_WIDTH / 2 - TANK_SIZE;
const bossY = 50;
const bossTank = new Tank(bossX, bossY);
// BOSS属性
bossTank.isBoss = true;
bossTank.maxHealth = 40;
bossTank.health = 40;
bossTank.width = TANK_SIZE * 1.5;
bossTank.height = TANK_SIZE * 1.5;
bossTank.speed = ENEMY_SPEED * 0.7;
bossTank.color = '#9C27B0'; // 紫色BOSS
bossTank.turretColor = '#7B1FA2';
bossTank.phase = 1; // 初始阶段
bossTank.shootPattern = 'single'; // 初始射击模式
gameState.enemies.push(bossTank);
// 显示BOSS血条
showBossHealthBar(bossTank);
// 添加四个中型坦克
for (let i = 0; i < 4; i++) {
let x, y, validPosition;
do {
validPosition = true;
x = Math.random() * (CANVAS_WIDTH - TANK_SIZE);
y = Math.random() * (CANVAS_HEIGHT / 3 - TANK_SIZE) + 100;
// 检查与墙壁的碰撞
for (const wall of gameState.walls) {
if (x < wall.x + wall.width &&
x + TANK_SIZE > wall.x &&
y < wall.y + wall.height &&
y + TANK_SIZE > wall.y) {
validPosition = false;
break;
}
}
// 检查与其他敌人的碰撞
for (const enemy of gameState.enemies) {
if (x < enemy.x + enemy.width &&
x + TANK_SIZE > enemy.x &&
y < enemy.y + enemy.height &&
y + TANK_SIZE > enemy.y) {
validPosition = false;
break;
}
}
} while (!validPosition);
const mediumTank = new Tank(x, y);
mediumTank.isMedium = true;
mediumTank.health = 3; // 普通坦克的三倍
mediumTank.width = TANK_SIZE * 1.2;
mediumTank.height = TANK_SIZE * 1.2;
mediumTank.speed = ENEMY_SPEED * 0.9;
mediumTank.color = '#FF9800'; // 橙色中型坦克
mediumTank.turretColor = '#E65100';
gameState.enemies.push(mediumTank);
}
} else {
// 根据难度调整敌人数量
const baseEnemyCount = 3 + Math.floor((gameState.level - 1) * 1.5);
const enemyCount = Math.min(Math.floor(baseEnemyCount * gameDifficulty), 15 * gameDifficulty);
for (let i = 0; i < enemyCount; i++) {
let x, y;
let validPosition = false;
// Find valid position (not overlapping with walls or other enemies)
// 优化：减少最大尝试次数并添加保底位置
let attempts = 0;
while (!validPosition && attempts < 50) {
attempts++;
x = Math.random() * (CANVAS_WIDTH - TANK_SIZE);
y = Math.random() * (CANVAS_HEIGHT / 2 - TANK_SIZE);
validPosition = true;
// 如果尝试次数过多，强制使用一个保底位置
if (attempts > 40) {
x = 50 + (i % 5) * 100;
y = 50 + Math.floor(i / 5) * 100;
validPosition = true;
break;
}
// 优化：只检查附近的墙壁（基于空间分区思想）
const wallGridSize = 100; // 网格大小
const xGrid = Math.floor(x / wallGridSize);
const yGrid = Math.floor(y / wallGridSize);
// 只检查当前网格和相邻网格的墙壁
for (const wall of gameState.walls) {
const wallXGrid = Math.floor(wall.x / wallGridSize);
const wallYGrid = Math.floor(wall.y / wallGridSize);
if (Math.abs(wallXGrid - xGrid) <= 1 && Math.abs(wallYGrid - yGrid) <= 1) {
if (
x < wall.x + wall.width &&
x + TANK_SIZE > wall.x &&
y < wall.y + wall.height &&
y + TANK_SIZE > wall.y
) {
validPosition = false;
break;
}
}
}
// Check against other enemies
if (validPosition) {
for (const enemy of gameState.enemies) {
if (
x < enemy.x + enemy.width &&
x + TANK_SIZE > enemy.x &&
y < enemy.y + enemy.height &&
y + TANK_SIZE > enemy.y
) {
validPosition = false;
break;
}
}
}
}
// 第7关及以后，前2辆敌人坦克改为中型坦克
if (gameState.level >= 7 && i < 2) {
const mediumTank = new Tank(x, y);
mediumTank.isMedium = true;
mediumTank.health = 3;
mediumTank.width = TANK_SIZE * 1.2;
mediumTank.height = TANK_SIZE * 1.2;
mediumTank.speed = ENEMY_SPEED * 0.9;
mediumTank.color = '#FF9800';
mediumTank.turretColor = '#E65100';
gameState.enemies.push(mediumTank);
} else {
gameState.enemies.push(new Tank(x, y));
}
}
}
// 确保至少有一个敌人
if (gameState.enemies.length === 0) {
gameState.enemies.push(new Tank(50, 50));
}
}
function generateMap() {
// 清空地图元素
gameState.walls = [];
gameState.grasses = [];
gameState.props = [];
gameState.traps = [];
// Generate random walls
// 限制最大墙壁数量，防止敌人无法生成
const wallCount = Math.min(50 + gameState.level * 3, 80);
for (let i = 0; i < wallCount; i++) {
let x, y;
let validPosition = false;
// Find valid position (not overlapping with player or base area)
// 限制最大尝试次数，防止无限循环
let attempts = 0;
while (!validPosition && attempts < 100) {
attempts++;
x = Math.floor(Math.random() * (CANVAS_WIDTH / WALL_SIZE)) * WALL_SIZE;
y = Math.floor(Math.random() * (CANVAS_HEIGHT / WALL_SIZE)) * WALL_SIZE;
validPosition = true;
// Avoid player spawn area
if (
x > CANVAS_WIDTH / 2 - TANK_SIZE * 2 &&
x < CANVAS_WIDTH / 2 + TANK_SIZE * 2 &&
y > CANVAS_HEIGHT - TANK_SIZE * 4 &&
y < CANVAS_HEIGHT
) {
validPosition = false;
}
// Avoid base spawn area
if (
x > CANVAS_WIDTH / 2 - WALL_SIZE * 2 &&
x < CANVAS_WIDTH / 2 + WALL_SIZE * 2 &&
y > CANVAS_HEIGHT / 2 - WALL_SIZE * 2 &&
y < CANVAS_HEIGHT / 2 + WALL_SIZE * 2
) {
validPosition = false;
}
}
gameState.walls.push(new Wall(x, y));
// Generate random props (10% chance)
// 极限模式下不生成道具
if (gameState.gameMode !== 'extreme' && Math.random() < 0.1) {
const propTypes = Object.values(PROP_TYPES);
const randomType = propTypes[Math.floor(Math.random() * propTypes.length)];
gameState.props.push(new Prop(x, y, randomType));
}
// 生成随机机关
const rand = Math.random();
if (rand < 0.03) {
// 3% 的几率生成地雷
gameState.traps.push(new Trap(x, y, TRAP_TYPES.MINE));
} else if (rand < 0.05) {
// 2% 的几率生成油桶
gameState.traps.push(new Trap(x, y, TRAP_TYPES.OIL_BARREL));
}
}
// 单独生成传送门，确保成对出现
const portalCount = Math.floor(Math.random() * 3) + 1; // 1-3对传送门
const unpairedPortals = [];
for (let i = 0; i < portalCount * 2; i++) {
let x, y;
let validPosition = false;
let attempts = 0;
while (!validPosition && attempts < 100) {
attempts++;
x = Math.floor(Math.random() * (CANVAS_WIDTH / WALL_SIZE)) * WALL_SIZE;
y = Math.floor(Math.random() * (CANVAS_HEIGHT / WALL_SIZE)) * WALL_SIZE;
validPosition = true;
// 避免玩家出生区域
if (
x > CANVAS_WIDTH / 2 - TANK_SIZE * 2 &&
x < CANVAS_WIDTH / 2 + TANK_SIZE * 2 &&
y > CANVAS_HEIGHT - TANK_SIZE * 4 &&
y < CANVAS_HEIGHT
) {
validPosition = false;
}
// 避免中央核心区域
if (
x > CANVAS_WIDTH / 2 - WALL_SIZE * 2 &&
x < CANVAS_WIDTH / 2 + WALL_SIZE * 2 &&
y > CANVAS_HEIGHT / 2 - WALL_SIZE * 2 &&
y < CANVAS_HEIGHT / 2 + WALL_SIZE * 2
) {
validPosition = false;
}
// 避免与墙壁重叠
for (const wall of gameState.walls) {
if (
x < wall.x + wall.width &&
x + TRAP_SIZE > wall.x &&
y < wall.y + wall.height &&
y + TRAP_SIZE > wall.y
) {
validPosition = false;
break;
}
}
}
const portal = new Trap(x, y, TRAP_TYPES.PORTAL);
gameState.traps.push(portal);
unpairedPortals.push(portal);
}
// 配对传送门
for (let i = 0; i < unpairedPortals.length; i += 2) {
unpairedPortals[i].linkPortal(unpairedPortals[i + 1]);
}
}
function restartGame() {
// 重置游戏状态
gameState.isPlaying = true;
gameState.isPaused = false;
gameState.score = 0;
// 保持当前关卡重新开始
// gameState.level = 1;
// 根据游戏模式设置初始生命数
gameState.lives = gameState.gameMode === 'extreme' ? 1 : 3;
gameState.enemies = [];
gameState.bullets = [];
gameState.walls = [];
gameState.props = [];
gameState.traps = [];
gameState.explosions = [];
gameState.smokes = []; // 清空烟雾数组
// 清除定时器
if (gameState.timerInterval) {
clearInterval(gameState.timerInterval);
gameState.timerInterval = null;
}
// 隐藏所有游戏结束相关界面
gameOverScreen.style.display = 'none';
winScreen.style.display = 'none';
// 隐藏BOSS血条
hideBossHealthBar();
// 初始化当前关卡
initLevel();
// 启动游戏循环
gameLoop();
}
// 显示BOSS血条
function showBossHealthBar(boss) {
const healthBarContainer = document.getElementById('boss-health-bar-container');
const healthFill = document.getElementById('boss-health-fill');
const healthText = document.getElementById('boss-health-text');
healthFill.style.width = '100%';
healthText.textContent = `${boss.health}/${boss.maxHealth}`;
healthBarContainer.style.display = 'block';
}
// 更新BOSS血条
function updateBossHealthBar(boss) {
const healthBarContainer = document.getElementById('boss-health-bar-container');
const healthFill = document.getElementById('boss-health-fill');
const healthText = document.getElementById('boss-health-text');
if (healthBarContainer.style.display === 'block' && boss) {
// 如果BOSS死亡，隐藏血条
if (boss.health <= 0) {
hideBossHealthBar();
return;
}
const percentage = (boss.health / boss.maxHealth) * 100;
healthFill.style.width = `${percentage}%`;
healthText.textContent = `${boss.health}/${boss.maxHealth}`;
}
}
// 隐藏BOSS血条
function hideBossHealthBar() {
const healthBarContainer = document.getElementById('boss-health-bar-container');
healthBarContainer.style.display = 'none';
}
function nextLevel() {
// 确保关卡不超过10
if (gameState.level < 10) {
gameState.level = gameState.level + 1;
console.log('进入下一关: ' + gameState.level);
initLevel();
winScreen.style.display = 'none';
gameState.isPlaying = true;
} else {
// 已通关所有关卡
winScreen.style.display = 'flex';
document.getElementById('win-message').textContent = '恭喜你通关所有关卡！';
document.getElementById('next-level-button').textContent = '重新开始';
// 播放通关音效
// playSound('game-complete-sound');
}
}
function updateTotalScoreDisplay() {
const totalScore = localStorage.getItem('tankBattleTotalScore') || '0';
document.getElementById('total-score-value').textContent = totalScore;
}
function endGame(isVictory) {
gameState.isPlaying = false;
// 累加总分数
const totalScore = parseInt(localStorage.getItem('tankBattleTotalScore') || '0');
const newTotalScore = totalScore + gameState.score;
localStorage.setItem('tankBattleTotalScore', newTotalScore.toString());
updateTotalScoreDisplay();
// 清除定时器
if (gameState.timerInterval) {
clearInterval(gameState.timerInterval);
gameState.timerInterval = null;
}
if (isVictory) {
// 解锁下一关
saveUnlockedLevel(gameState.level + 1);
// 播放关卡完成音效
// playSound('level-up-sound');
winScreen.style.display = 'flex';
if (gameState.level < 10) {
// 显示当前关卡和下一关信息
document.getElementById('win-message').textContent = `第 ${gameState.level} 关完成！`;
document.getElementById('next-level-button').textContent = `下一关 (${gameState.level + 1})`;
// 添加关卡选择按钮
const levelSelectBtn = document.getElementById('level-select-button');
if (!levelSelectBtn) {
const btn = document.createElement('button');
btn.id = 'level-select-button';
btn.textContent = '关卡选择';
btn.style.marginTop = '15px';
btn.style.padding = '10px 20px';
btn.style.fontSize = '18px';
btn.style.backgroundColor = '#2196F3';
btn.style.color = 'white';
btn.style.border = 'none';
btn.style.borderRadius = '5px';
btn.style.cursor = 'pointer';
btn.addEventListener('click', function () {
winScreen.style.display = 'none';
startScreen.style.display = 'flex';
// 显示关卡选择弹窗
document.getElementById('level-select-modal').style.display = 'flex';
});
winScreen.appendChild(btn);
} else {
levelSelectBtn.style.display = 'block';
}
} else {
// 显示通关信息
document.getElementById('win-message').textContent = '恭喜你通关所有关卡！';
document.getElementById('next-level-button').textContent = '重新开始';
// 隐藏关卡选择按钮（第十关）
const levelSelectBtn = document.getElementById('level-select-button');
if (levelSelectBtn) {
levelSelectBtn.style.display = 'none';
}
// 播放通关音效
// playSound('game-complete-sound');
}
} else {
gameOverScreen.style.display = 'flex';
// 播放游戏结束音效
// playSound('player-death-sound');
}
}
function checkLevelComplete() {
if (gameState.enemies.length === 0) {
endGame(true);
}
}
function update() {
if (gameState.isPaused) return;
if (!gameState.isPlaying) return;
// 生成空投（极限模式下不生成道具）
if (gameState.gameMode !== 'extreme') {
const now = Date.now();
if (now - gameState.lastAirDropTime > gameState.airDropInterval) {
// 随机X坐标，确保空投箱完全在画布内
const x = Math.random() * CANVAS_WIDTH; // 允许空投在任意X位置生成
gameState.airDrops.push(new AirDrop(x, -30));
gameState.lastAirDropTime = now;
// 随机调整下次空投时间(10-20秒)
gameState.airDropInterval = 10000; // 固定每10秒生成一个空投
}
}
// 更新空投箱
for (let i = gameState.airDrops.length - 1; i >= 0; i--) {
const airDrop = gameState.airDrops[i];
if (airDrop.update()) {
gameState.airDrops.splice(i, 1);
}
}
// Update player
gameState.player.update();
// Update traps
for (let i = gameState.traps.length - 1; i >= 0; i--) {
const trap = gameState.traps[i];
if (trap.update()) {
gameState.traps.splice(i, 1);
continue;
}
// Check collision with player
if (
trap.active &&
gameState.player.x < trap.x + trap.width &&
gameState.player.x + gameState.player.width > trap.x &&
gameState.player.y < trap.y + trap.height &&
gameState.player.y + gameState.player.height > trap.y
) {
trap.trigger(gameState.player);
}
// Check collision with enemies
for (let j = gameState.enemies.length - 1; j >= 0; j--) {
const enemy = gameState.enemies[j];
if (
trap.active &&
enemy.x < trap.x + trap.width &&
enemy.x + enemy.width > trap.x &&
enemy.y < trap.y + trap.height &&
enemy.y + enemy.height > trap.y
) {
trap.trigger(enemy);
}
}
}
// Update explosions
for (let i = gameState.explosions.length - 1; i >= 0; i--) {
const explosion = gameState.explosions[i];
if (explosion.update()) {
gameState.explosions.splice(i, 1);
}
}
// Update enemy
gameState.enemies.forEach(enemy => enemy.update());
// Update bullets
for (let i = gameState.bullets.length - 1; i >= 0; i--) {
const bullet = gameState.bullets[i];
const shouldRemove = bullet.update();
if (shouldRemove || bullet.checkCollision()) {
gameState.bullets.splice(i, 1);
}
}
// Check level complete
checkLevelComplete();
// Update player prop particles
for (let i = gameState.playerPropParticles.length - 1; i >= 0; i--) {
if (gameState.playerPropParticles[i].update()) {
gameState.playerPropParticles.splice(i, 1);
}
}
// Update player speed particles
for (let i = gameState.playerSpeedParticles.length - 1; i >= 0; i--) {
if (gameState.playerSpeedParticles[i].update()) {
gameState.playerSpeedParticles.splice(i, 1);
}
}
// Update enemy slow particles
for (let i = gameState.enemySlowParticles.length - 1; i >= 0; i--) {
if (gameState.enemySlowParticles[i].update()) {
gameState.enemySlowParticles.splice(i, 1);
}
}
// Update props
for (let i = gameState.props.length - 1; i >= 0; i--) {
const prop = gameState.props[i];
if (prop.update()) {
gameState.props.splice(i, 1);
continue;
}
// Check collision with player
if (
prop.x < gameState.player.x + gameState.player.width &&
prop.x + prop.width > gameState.player.x &&
prop.y < gameState.player.y + gameState.player.height &&
prop.y + prop.height > gameState.player.y
) {
// 创建道具粒子效果
createPropParticles(gameState.player, prop.type);
// Apply prop effect
switch (prop.type) {
case PROP_TYPES.EXTRA_LIFE:
gameState.lives++;
break;
case PROP_TYPES.SPEED_BOOST:
gameState.player.speed *= 1.5;
gameState.isSpeedBoosted = true;
gameState.activeProps[PROP_TYPES.SPEED_BOOST] = { startTime: Date.now(), duration: 5000 };
setTimeout(() => {
gameState.player.speed /= 1.5;
gameState.isSpeedBoosted = false;
delete gameState.activeProps[PROP_TYPES.SPEED_BOOST];
// 清除剩余的加速粒子
gameState.playerSpeedParticles = [];
}, 5000);
break;
case PROP_TYPES.SHIELD:
gameState.player.shield = true;
gameState.activeProps[PROP_TYPES.SHIELD] = { startTime: Date.now(), duration: 5000 };
setTimeout(() => {
gameState.player.shield = false;
delete gameState.activeProps[PROP_TYPES.SHIELD];
}, 5000);
break;
case PROP_TYPES.TIME_FREEZE:
// 冻结所有敌人5秒
gameState.activeProps[PROP_TYPES.TIME_FREEZE] = { startTime: Date.now(), duration: 5000 };
gameState.enemies.forEach(enemy => {
enemy.isFrozen = true;
clearTimeout(enemy.freezeTimeout);
enemy.freezeTimeout = setTimeout(() => {
enemy.isFrozen = false;
delete gameState.activeProps[PROP_TYPES.TIME_FREEZE];
}, 5000);
});
break;
case PROP_TYPES.TIME_SLOW:
// 减速所有敌人8秒
gameState.activeProps[PROP_TYPES.TIME_SLOW] = { startTime: Date.now(), duration: 8000 };
gameState.enemies.forEach(enemy => {
enemy.speedMultiplier = 0.5;
enemy.isSlowed = true;
clearTimeout(enemy.slowTimeout);
enemy.slowTimeout = setTimeout(() => {
enemy.speedMultiplier = 1;
enemy.isSlowed = false;
}, 8000);
});
break;
}
gameState.props.splice(i, 1);
}
}
}
function draw() {
if (gameState.isPaused) {
// 绘制半透明暂停遮罩，允许查看背后战况
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
ctx.fillStyle = '#fff';
ctx.font = '40px Arial';
ctx.textAlign = 'center';
ctx.fillText('游戏暂停', CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 50);
return;
}
// Draw ground with tank-style texture
const groundColor = '#333333';
const textureColor = '#444444';
ctx.fillStyle = groundColor;
ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
// 优化：只在需要时重新生成纹理
if (!gameState.groundTextureCreated) {
// Add texture
ctx.fillStyle = textureColor;
const gridSize = 40;
for (let x = 0; x < CANVAS_WIDTH; x += gridSize) {
for (let y = 0; y < CANVAS_HEIGHT; y += gridSize) {
if (Math.random() > 0.7) {
ctx.fillRect(x, y, 2, 2);
}
}
}
gameState.groundTextureCreated = true;
}
if (!gameState.isPlaying) return;
// Draw walls
gameState.walls.forEach(wall => wall.draw());
// Draw traps
gameState.traps.forEach(trap => trap.draw());
// Draw player
gameState.player.draw();
// Draw enemies
gameState.enemies.forEach(enemy => enemy.draw());
// Draw bullets
gameState.bullets.forEach(bullet => bullet.draw());
// Draw explosions
gameState.explosions.forEach(explosion => explosion.draw());
// Draw air drops
gameState.airDrops.forEach(airDrop => airDrop.draw());
// Draw props
gameState.props.forEach(prop => prop.draw());
// Draw player prop particles
gameState.playerPropParticles.forEach(particle => particle.draw());
// Draw player speed particles
gameState.playerSpeedParticles.forEach(particle => particle.draw());
// Draw enemy slow particles
gameState.enemySlowParticles.forEach(particle => particle.draw());
// Draw HUD
ctx.fillStyle = '#fff';
ctx.font = '20px Arial';
ctx.textAlign = 'left';
ctx.fillText(`${translations[currentLanguage]['score']}: ${gameState.score}`, 10, 20);
ctx.fillText(`${translations[currentLanguage]['level']}: ${gameState.level}`, 10, 40);
ctx.fillText(`HP: ${gameState.lives}`, 10, 60);
// 显示倒计时
if (gameState.timeLimitEnabled) {
const minutes = Math.floor(gameState.timeRemaining / 60);
const seconds = gameState.timeRemaining % 60;
const timeString = `${minutes}:${seconds.toString().padStart(2, '0')}`;
ctx.fillText(`${translations[currentLanguage]['time']}: ${timeString}`, CANVAS_WIDTH / 2 - 80, 20);
}
// 显示激活道具时间（右上角）
ctx.textAlign = 'right';
const propNames = {
[PROP_TYPES.SPEED_BOOST]: '加速',
[PROP_TYPES.SHIELD]: '护盾',
[PROP_TYPES.TIME_FREEZE]: '冻结',
[PROP_TYPES.TIME_SLOW]: '减速'
};
const propColors = {
[PROP_TYPES.SPEED_BOOST]: '#FFC107', // 黄色
[PROP_TYPES.SHIELD]: '#2196F3', // 蓝色
[PROP_TYPES.TIME_FREEZE]: '#00BCD4', // 青色
[PROP_TYPES.TIME_SLOW]: '#9C27B0' // 紫色
};
let propIndex = 0;
for (const [propType, propData] of Object.entries(gameState.activeProps)) {
const elapsed = Date.now() - propData.startTime;
const remaining = Math.max(0, Math.ceil((propData.duration - elapsed) / 1000));
if (remaining > 0) {
ctx.fillStyle = propColors[propType] || '#fff';
ctx.fillText(`${propNames[propType]}: ${remaining}s`, CANVAS_WIDTH - 10, 20 + propIndex * 25);
propIndex++;
}
}
ctx.textAlign = 'left';
}
function gameLoop() {
update();
draw();
// 更新并绘制烟雾 (在其他元素之后绘制)
for (let i = gameState.smokes.length - 1; i >= 0; i--) {
const smoke = gameState.smokes[i];
smoke.update();
smoke.draw();
if (smoke.opacity <= 0) {
gameState.smokes.splice(i, 1);
}
}
requestAnimationFrame(gameLoop);
}
// 暂停游戏函数
function resumeGame() {
gameState.isPaused = false;
}
// 添加ESC键暂停监听
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && gameState.isPlaying) {
gameState.isPaused = !gameState.isPaused;
if (gameState.isPaused) {
// 创建继续按钮
const resumeBtn = document.createElement('button');
resumeBtn.id = 'resume-button';
resumeBtn.textContent = '继续';
resumeBtn.style.position = 'absolute';
resumeBtn.style.left = '50%';
resumeBtn.style.top = '70%'
resumeBtn.style.transform = 'translate(-50%, -50%)';
resumeBtn.style.padding = '10px 20px';
resumeBtn.style.fontSize = '20px';
resumeBtn.onclick = () => {
resumeGame();
document.body.removeChild(resumeBtn);
};
document.body.appendChild(resumeBtn);
} else {
// 移除继续按钮
const resumeBtn = document.getElementById('resume-button');
if (resumeBtn) document.body.removeChild(resumeBtn);
}
}
});
</script>
</body>
</html>Game Source: 坦克大战：钢铁防线
Creator: QuantumComet96
Libraries: none
Complexity: complex (4212 lines, 197.9 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: -quantumcomet96" to link back to the original. Then publish at arcadelab.ai/publish.