1c5e72676b
## 主要变更 ### 课程设计 - 大纲扩展到 18 课(新增第 12-18 课:单词塔防 3D 大项目) - 引入 AI 三角色协作工作流(Planner / Reviewer / Tester)作为整学期框架 - 每课详化:核心概念 + 误概念预设 + 教学锚点 + 学生产出 + 老师课前要准备 ### 第 12 课教案(完整逐字稿) - 主题:Skills 入门 - 用 game-studio 做跳一跳 - 90 分钟 4C 结构 + 诊断点 + 分支策略 - 5 个误概念预设 + AI 助教提示词模板 + 教师备课指南 ### prototype 工程产物(可玩 demo) - 跳一跳-3d/index.html:Three.js 3D 跳一跳(蓄力 + Web Audio 音效 + PERFECT 命中) - 单词塔防/game-3d.html:完整 3D 塔防(三阶段 + 商店 + 卡片 + 战斗循环,15 击杀完美胜利) - 单词塔防/level-editor-3d.html:3D 关卡设计器(Kenney GLB 模型 + localStorage 保存) - 单词塔防/level-editor.html:2D 关卡设计器(原型保留) - 单词塔防/index.html:2D 塔防原型(原型保留) ### 工程加固 - .gitignore 加强:排除 token、Kenney 大素材、调试截图、第三方插件、Playwright 临时 - 从 git tracking 移除 scripts/.dingtalk_token.json(本地保留) - scripts/sync_to_dingtalk.py:OAuth 流程改为手动 authCode 粘贴(避免本地 server 受限) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
111 lines
2.7 KiB
HTML
111 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Kenney TD Sprite 浏览器</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, "PingFang SC", sans-serif;
|
||
background: #1a1a2e;
|
||
color: #eee;
|
||
margin: 0;
|
||
padding: 20px;
|
||
}
|
||
h1 { color: #ffd700; }
|
||
.info {
|
||
background: rgba(255, 215, 0, 0.1);
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
margin-bottom: 16px;
|
||
font-size: 14px;
|
||
}
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||
gap: 8px;
|
||
}
|
||
.tile {
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
padding: 6px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: transform 0.1s;
|
||
position: relative;
|
||
}
|
||
.tile:hover {
|
||
transform: scale(1.5);
|
||
z-index: 10;
|
||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
|
||
}
|
||
.tile img {
|
||
display: block;
|
||
width: 64px;
|
||
height: 64px;
|
||
margin: 0 auto;
|
||
image-rendering: pixelated;
|
||
}
|
||
.tile .num {
|
||
color: #666;
|
||
font-size: 10px;
|
||
margin-top: 4px;
|
||
font-family: monospace;
|
||
}
|
||
.search {
|
||
margin: 10px 0;
|
||
padding: 8px 12px;
|
||
background: #2a2a4e;
|
||
color: #ffd700;
|
||
border: 1px solid #ffd700;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
width: 200px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>🔍 Kenney TD Sprite 浏览器</h1>
|
||
<div class="info">
|
||
共 299 个 sprite,64×64 像素。鼠标悬停放大查看。点击复制 tile 编号。<br>
|
||
用途:为单词塔防 demo 选取塔/怪/路径/UI 等元素。
|
||
</div>
|
||
|
||
<input class="search" id="search" placeholder="跳转编号(如 042)">
|
||
|
||
<div class="grid" id="grid"></div>
|
||
|
||
<script>
|
||
const grid = document.getElementById('grid');
|
||
for (let i = 1; i <= 299; i++) {
|
||
const id = String(i).padStart(3, '0');
|
||
const div = document.createElement('div');
|
||
div.className = 'tile';
|
||
div.id = 'tile-' + id;
|
||
div.innerHTML = `
|
||
<img src="assets/kenney-td/PNG/Default%20size/towerDefense_tile${id}.png" alt="tile${id}" loading="lazy">
|
||
<div class="num">${id}</div>
|
||
`;
|
||
div.addEventListener('click', () => {
|
||
navigator.clipboard.writeText('towerDefense_tile' + id + '.png');
|
||
const orig = div.querySelector('.num').textContent;
|
||
div.querySelector('.num').textContent = '✓ 已复制';
|
||
setTimeout(() => div.querySelector('.num').textContent = orig, 1000);
|
||
});
|
||
grid.appendChild(div);
|
||
}
|
||
|
||
document.getElementById('search').addEventListener('input', (e) => {
|
||
const v = e.target.value.padStart(3, '0');
|
||
const target = document.getElementById('tile-' + v);
|
||
if (target) {
|
||
target.scrollIntoView({behavior: 'smooth', block: 'center'});
|
||
target.style.background = '#ffd700';
|
||
setTimeout(() => target.style.background = '#fff', 1500);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|