祖冲之号 - 2D 游戏模型图
by TurboKoala83227 lines8.8 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>祖冲之号 - 2D 游戏模型图</title>
<style>
body {
margin: 0;
background: #060b13;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'Courier New', monospace;
color: #00ffff;
overflow: hidden;
}
canvas {
border: 1px solid #1e3a5f;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
background: #0a0e14;
}
.title {
margin-top: 15px;
font-size: 14px;
color: #9CA3AF;
letter-spacing: 2px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="900" height="700"></canvas>
<div class="title">祖冲之号 · 激光护卫巡洋舰</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const CX = canvas.width / 2;
const CY = canvas.height / 2;
// ---- 修改后的配色方案 ----
const COLOR = {
hullWhite: '#F3F4F6', // 白色外壳主装甲
hullLight: '#E5E7EB', // 亮白
hullDark: '#9CA3AF', // 暗灰
hullShadow: '#4B5563', // 阴影/凹陷
solarPanel: '#1E293B', // 太阳能板/散热翼深色底
solarLine: '#38BDF8', // 散热管路（亮蓝）
solarBorder: '#64748B', // 散热翼边框
laserMain: '#00FFFF', // 主炮青色
laserGlow: '#A5F3FC', // 主炮光晕
interceptor: '#A3E635', // 拦截炮荧光绿
thruster: '#FB923C', // 推进器/修正喷口橙色
thrusterFire: '#FDE047' // 喷火黄色
};
// ---- 绘制辅助函数 ----
function drawRect(x, y, w, h, fillColor, strokeColor, lineWidth = 2) {
ctx.fillStyle = fillColor;
ctx.fillRect(x, y, w, h);
if (strokeColor) {
ctx.strokeStyle = strokeColor;
ctx.lineWidth = lineWidth;
ctx.strokeRect(x, y, w, h);
}
}
function drawCircle(cx, cy, r, fillColor, strokeColor) {
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2);
ctx.fillStyle = fillColor;
ctx.fill();
if (strokeColor) {
ctx.strokeStyle = strokeColor;
ctx.lineWidth = 2;
ctx.stroke();
}
}
// ---- 绘制祖冲之号 ----
function drawZuchongzhi() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ========== 1. 中央脊线（白色空间站骨架） ==========
const spineW = 50;
const spineX = CX - spineW / 2;
// 顶部对接环
drawRect(spineX - 10, CY - 280, spineW + 20, 25, COLOR.hullDark, COLOR.hullShadow);
// 顶部模块
drawRect(spineX, CY - 255, spineW, 40, COLOR.hullWhite, COLOR.hullShadow);
drawRect(spineX + 10, CY - 250, 10, 30, COLOR.hullLight); // 高光
// 核心舱（带一点淡蓝色以显科技感）
drawRect(spineX, CY - 215, spineW, 80, COLOR.hullLight, COLOR.hullShadow);
drawRect(spineX + 10, CY - 210, 10, 70, '#FFFFFF');
drawRect(spineX + 20, CY - 210, 15, 70, COLOR.solarPanel, null); // 核心设备暗区
// 生活舱
drawRect(spineX, CY - 135, spineW, 60, COLOR.hullWhite, COLOR.hullShadow);
drawRect(spineX + 10, CY - 130, 10, 50, COLOR.hullLight);
// 推进/干扰模块
drawRect(spineX, CY - 75, spineW, 100, COLOR.hullWhite, COLOR.hullShadow);
drawRect(spineX + 10, CY - 70, 15, 90, COLOR.hullDark, null);
// 尾部主推进器
drawRect(spineX - 15, CY + 25, spineW + 30, 25, COLOR.hullDark, COLOR.hullShadow);
for (let i = 0; i < 5; i++) {
drawRect(spineX - 5 + i * 12, CY + 50, 8, 25, COLOR.thrusterFire, COLOR.thruster);
}
// ========== 2. 两侧散热巨翼（深色面板） ==========
const wingW = 220;
const wingH = 160;
const wingY = CY - 135;
// 左翼
drawRect(CX - spineW/2 - wingW, wingY, wingW, wingH, COLOR.solarPanel, COLOR.solarBorder, 2);
// 左翼内部管线
for (let i = 0; i < 10; i++) {
drawRect(CX - spineW/2 - wingW + 15 + i * 22, wingY + 15, 3, wingH - 30, COLOR.solarLine, null);
}
// 左翼连接架
drawRect(CX - spineW/2 - 30, CY - 35, 30, 20, COLOR.hullWhite, COLOR.hullShadow);
// 右翼
drawRect(CX + spineW/2, wingY, wingW, wingH, COLOR.solarPanel, COLOR.solarBorder, 2);
for (let i = 0; i < 10; i++) {
drawRect(CX + spineW/2 + 15 + i * 22, wingY + 15, 3, wingH - 30, COLOR.solarLine, null);
}
// 右翼连接架
drawRect(CX + spineW/2, CY - 35, 30, 20, COLOR.hullWhite, COLOR.hullShadow);
// ========== 3. 武器模块 ==========
// 主炮（舰首左侧，高亮青色）
drawRect(CX - 95, CY - 235, 15, 75, '#FFFFFF', COLOR.hullShadow);
drawRect(CX - 92, CY - 235, 9, 20, COLOR.laserMain, COLOR.laserGlow);
ctx.shadowColor = COLOR.laserGlow;
ctx.shadowBlur = 20;
ctx.fillStyle = COLOR.laserMain;
ctx.fillRect(CX - 92, CY - 235, 9, 20);
ctx.shadowBlur = 0;
// 六门拦截炮（荧光绿，环绕布置）
const interceptors = [
{ x: CX, y: CY - 305 }, // 顶部
{ x: CX, y: CY + 100 }, // 底部
{ x: CX - 150, y: CY - 55 }, // 左侧
{ x: CX + 150, y: CY - 55 }, // 右侧
{ x: CX - 120, y: CY + 60 }, // 左后
{ x: CX + 120, y: CY + 60 }, // 右后
];
interceptors.forEach(pos => {
// 炮塔底座（白色外壳）
drawCircle(pos.x, pos.y + 3, 12, COLOR.hullWhite, COLOR.hullShadow);
// 炮口（绿色发光）
drawCircle(pos.x, pos.y, 7, COLOR.interceptor, COLOR.hullShadow);
// 内层发光
drawCircle(pos.x, pos.y, 3, '#FFFFFF', null);
});
// ========== 4. 开火修正喷口 ==========
const thrusters = [
{ x: CX - spineW/2 - wingW - 8, y: CY - 55, dir: -1 }, // 左翼端
{ x: CX + spineW/2 + wingW + 8, y: CY - 55, dir: 1 }, // 右翼端
{ x: CX, y: CY - 325, dir: 0 }, // 顶部
{ x: CX, y: CY + 115, dir: 0 }, // 底部
];
thrusters.forEach(t => {
ctx.beginPath();
// 喷口外壳
if (t.dir === -1) {
ctx.moveTo(t.x, t.y - 8);
ctx.lineTo(t.x - 12, t.y);
ctx.lineTo(t.x, t.y + 8);
} else if (t.dir === 1) {
ctx.moveTo(t.x, t.y - 8);
ctx.lineTo(t.x + 12, t.y);
ctx.lineTo(t.x, t.y + 8);
} else {
ctx.moveTo(t.x - 8, t.y);
ctx.lineTo(t.x, t.y - 12);
ctx.lineTo(t.x + 8, t.y);
}
ctx.closePath();
ctx.fillStyle = COLOR.hullWhite;
ctx.fill();
ctx.strokeStyle = COLOR.hullShadow;
ctx.lineWidth = 2;
ctx.stroke();
// 喷口内焰
ctx.beginPath();
if (t.dir === -1) {
ctx.moveTo(t.x - 2, t.y - 4);
ctx.lineTo(t.x - 8, t.y);
ctx.lineTo(t.x - 2, t.y + 4);
} else if (t.dir === 1) {
ctx.moveTo(t.x + 2, t.y - 4);
ctx.lineTo(t.x + 8, t.y);
ctx.lineTo(t.x + 2, t.y + 4);
} else {
ctx.moveTo(t.x - 4, t.y - 2);
ctx.lineTo(t.x, t.y - 8);
ctx.lineTo(t.x + 4, t.y - 2);
}
ctx.closePath();
ctx.fillStyle = COLOR.thrusterFire;
ctx.fill();
});
}
// 执行绘制
drawZuchongzhi();
// 简单的静态预览，不做动画，保证游戏素材的纯粹性
</script>
</body>
</html>Game Source: 祖冲之号 - 2D 游戏模型图
Creator: TurboKoala83
Libraries: none
Complexity: complex (227 lines, 8.8 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: 2d-turbokoala83-muqtovtn" to link back to the original. Then publish at arcadelab.ai/publish.