本文介绍如何通过监听键盘事件（如按“a”键），使用 css `left` 样式动态更新图像元素的水平位置，实现流畅、可控的 x 轴位移，并兼容 django 模板环境。
要在网页中实现按键控制图像沿 X 轴移动（例如按 “A” 键向左平移），关键在于：正确设置元素定位模式 + 使用可修改的 CSS 属性（如 left）+ 安全读取/更新数值。直接操作 offsetLeft 是无效的，因为它是只读属性，仅反映当前计算后的偏移值，无法用于赋值。
✅ 正确做法：使用 position: absolute + left 样式
首先确保图像容器（如 .col）具有 position: relative，而图像自身设为 position: absolute。这样 left 和 top 才能相对于父容器生效：
<!-- 在 contact.html 的 <div class="col"> 内 -->
<div class="col" style="position: relative; height: 500px;"> <!-- 设置相对定位与高度，便于观察移动 -->
<img src="media/images/phone.png" alt="phone" class="rounded float-start">
<img src="media/images/stick.png"
class="rounded float-end"
id="sprite"
alt="..."
style="margin-top:100px; position: absolute; left: 30%; top: 40%;"> <!-- 关键：absolute + 初始 left -->
<img src="media/images/wasd.png" class="rounded float-end" id="wasd" alt="..." style="margin-top:100px;display: none;">
<button class="btn btn-primary float-end" id="start">Start</button>
</div>✅ JavaScript 控制逻辑（推荐增强版）
以下 contact.js 改写后支持：
- 按 A / D 键左右移动（X 轴）
- 自动限制移动范围（0%–100%，防止移出视区）
- 启动后才启用监听，避免误触
- 兼容 Django 静态文件加载流程
document.addEventListener("DOMContentLoaded", function () {
const button = document.getElementById("start");
const wasd = document.getElementById("wasd");
const sprite = document.getElementById("sprite");
// 工具函数：安全解析并限制百分比值
const clampPercent = (value) => Math.min(100, Math.max(0, parseFloat(value) || 0));
button.addEventListener("click", function () {
button.style.display = "none";
wasd.style.display = "block";
// 启用键盘监听（仅启动一次，避免重复绑定）
document.addEventListener("keydown", function (event) {
// 阻止默认行为（如页面滚动），提升游戏体验
if (["a", "d", "w", "s"].includes(event.key.toLowerCase())) {
event.preventDefault();
}
let left = clampPercent(sprite.style.left || "30");
let top = clampPercent(sprite.style.top || "40");
switch (event.key.toLowerCase()) {
case "a":
left = clampPercent(left - 10);
break;
case "d":
left = clampPercent(left + 10);
break;
case "w":
top = clampPercent(top - 5);
break;
case "s":
top = clampPercent(top + 5);
break;
}
sprite.style.left = left + "%";
sprite.style.top = top + "%";
});
// 可选：点击 WASD 图片隐藏提示
wasd.addEventListener("click", () => {
wasd.style.display = "none";
});
});
});⚠️ 注意事项
- ❌ 不要使用 offsetLeft += 10：该属性只读，赋值无效；
- ✅ 必须设置 position: absolute（或 relative/fixed），否则 left/top 不生效；
- ? 推荐用 % 或 px 单位统一管理；百分比更适配响应式布局；
- ? 使用 event.preventDefault() 防止 A/S 等键触发浏览器默认行为（如跳转、滚动）；
- ? 若需更复杂动画，可后续引入 requestAnimationFrame 或 CSS transition: left 0.1s ease 实现平滑效果。
通过以上结构化实现，你就能在 Django 页面中轻松构建一个轻量级、可交互的图像控制模块——既是游戏雏形，也是 DOM 动态操控的实用范例。
立即学习“Java免费学习笔记（深入）”；
