38 lines
1.4 KiB
HTML
38 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>刺外观预览（对齐参考图）</title>
|
|
<style>
|
|
body { background:#20242c; color:#dde; font-family:monospace; text-align:center; padding:16px; }
|
|
canvas { image-rendering:pixelated; border:1px solid #445; max-width:100%; }
|
|
p { font-size:13px; color:#99a; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h3>单三角形刺 · 冰蓝白渐变（游戏真实代码渲染）</h3>
|
|
<canvas id="cv" width="768" height="384"></canvas>
|
|
<p>上排：地面刺（朝上） · 中间：天花板刺（朝下） · 左右：贴墙刺（朝左/朝右）</p>
|
|
<script type="module">
|
|
import { drawSpike, drawBlock } from './js/sprites.js';
|
|
const TILE = 32;
|
|
const cv = document.getElementById('cv');
|
|
const ctx = cv.getContext('2d');
|
|
// 地面与天花板（参照截图的格子地面）
|
|
for (let x = 0; x < 24; x++) {
|
|
drawBlock(ctx, x * TILE, 8 * TILE, 0); // 下半地面
|
|
drawBlock(ctx, x * TILE, 0, 0); // 顶部天花板
|
|
}
|
|
// 地面刺一排（朝上）
|
|
for (let x = 3; x <= 9; x++) drawSpike(ctx, x * TILE, 7 * TILE, 0, 0);
|
|
// 天花板刺（朝下）
|
|
for (let x = 13; x <= 17; x++) drawSpike(ctx, x * TILE, TILE, 1, 0);
|
|
// 贴墙刺：左墙（朝右）+ 右墙（朝左）
|
|
drawSpike(ctx, 0, 5 * TILE, 3, 0);
|
|
drawSpike(ctx, 23 * TILE, 5 * TILE, 2, 0);
|
|
// 中间孤刺
|
|
drawSpike(ctx, 11 * TILE, 7 * TILE, 0, 0);
|
|
</script>
|
|
</body>
|
|
</html>
|