我正在嘗試學習游戲制作的絕對基礎知識，我想知道為什么我可以移動 img 而不能移動 div 元素。JS：var element;function moveSelection(evt) { element = document.getElementById("char"); switch (evt.keyCode) { case 37: element.style.left = parseInt(element.style.left) - 10; break; case 39: element.style.left = parseInt(element.style.left) + 10; break; case 38: element.style.top = parseInt(element.style.top) - 10; break; case 40: element.style.top = parseInt(element.style.top) + 10; break; }}window.addEventListener('keydown', moveSelection);現在，如果我有一個 id 為 char 的 img 標簽，我可以用箭頭鍵移動它。<img src="" id="char">但如果我刪除該圖像并用 div 替換它，<div id="char"></div>它不允許我移動它。
1 回答
江戶川亂折騰
TA貢獻1851條經驗 獲得超5個贊
該代碼存在多個問題，我不確定它如何處理圖像。
為此，需要完成以下幾件事：
確保目標元素的 CSS 已
position: absolute設置屬性。您也可以根據需要使用relative,fixed或。sticky使用
getComputedStyle而不是style直接訪問。該屬性將僅包含由屬性或屬性設置的style值。附加一個測量單位，就像
"px"解析的數字一樣。
這是一個最小的完整示例：
const element = document.getElementById("char");
const charStyle = getComputedStyle(element);
function moveSelection(evt) {
? evt.preventDefault();
? switch (evt.keyCode) {
? ? case 37:
? ? ? element.style.left = parseInt(charStyle.left) - 10 + "px";
? ? ? break;
? ? case 39:
? ? ? element.style.left = parseInt(charStyle.left) + 10 + "px";
? ? ? break;
? ? case 38:
? ? ? element.style.top = parseInt(charStyle.top) - 10 + "px";
? ? ? break;
? ? case 40:
? ? ? element.style.top = parseInt(charStyle.top) + 10 + "px";
? ? ? break;
? }
}
document.addEventListener("keydown", moveSelection);
#char {
? width: 50px;
? height: 50px;
? background: red;
? position: absolute;
}
<div id="char"></div>
話雖如此，這種設計應該會給您一種反模式的印象，因為它序列化和反序列化 DOM 元素中的屬性。對于創建良好的老式數據結構來說，這是一個糟糕的替代品，例如：
const?character?=?{x:?0,?y:?0,?stepSize:?10?/*...?more?properties?...*/};此外，讓鍵盤直接觸發角色的移動會導致重新觸發笨拙并且通常不可靠的用戶體驗。requestAnimationFrame對于這種情況，最好使用動畫循環。鍵盤處理程序將打開和關閉每個鍵的標志，但實際上不會直接更新任何內容。動畫循環將順利處理重新定位。您的 JS 腳本將保留游戲/動畫狀態，并且僅在渲染幀時將其作為解耦視圖轉儲到 DOM。這樣，數據就會朝一個方向流動，您的應用程序將更易于編寫和維護。
- 1 回答
- 0 關注
- 112 瀏覽
添加回答
舉報
0/150
提交
取消