設定界限，以一個div，通過鍵盤控制

好吧，我贊成在這裏上傳大量刪除我的代碼從這裏： http://www.project-vanquish.co.cc/jRPGrid-v0.4b/index.html 設定界限，以一個div，通過鍵盤控制

（請忽略任何SQL錯誤）

點擊網格節點 - 移動的字符位置（啓用boundries）
拖動字符 - 移動至位置（啓用boundries）
使用KEYB oard光標鍵 - 移動字符（無邊界）。

我想設置#character的boundries是#map，通過鍵盤 - 該boundries用鼠標

來源

2010-07-23 Barrie Reader

關於你的編輯，你還在檢查字符的'.left'到地圖的'.top'。 – ScottS 2010-07-23 13:48:23

哎呀，更新我的代碼/問題:) – 2010-07-23 13:54:15

檢查我的第二個答案，我認爲正確的邊界應該是。試試看。 – ScottS 2010-07-23 13:56:16

好的，我懷疑邊界是錯誤的。我已將所有if聲明更改爲我認爲將字符保留在地圖範圍內的正確聲明。

$(document).bind('keydown',function(e){ //set the keydown function as... 
    switch(e.which) 
     case 37: $(characterName).css("background-image", "url(img/character-left.gif)"); //LEFT ARROW KEY 
        var character = $(characterName); 
        var map = $('#map'); 

        if((character.offset().left - 40) > map.offset().left) { 
         character.animate(
          { 
           left: '-=40' 
          }, 
          250, 
          function(){} 
         ); 
        } 
        break; 
     case 39: $(characterName).css("background-image", "url(img/character-right.gif)"); //RIGHT ARROW KEY 
        var character = $(characterName); 
        var map = $('#map'); 

        if((character.offset().right + 40) < map.offset().right) { 
         character.animate(
          { 
           left: '+=40' 
          }, 
          250, 
          function(){} 
         ); 
        } 
        break; 
     case 38: $(characterName).css("background-image", "url(img/character-up.gif)"); //UP ARROW KEY 
        var character = $(characterName); 
        var map = $('#map'); 

        if((character.offset().top - 40) < map.offset().top) { 
         character.animate(
          { 
           top: '-=40' 
          }, 
          250, 
          function(){} 
         ); 
        } 
        break; 
     case 40: $(characterName).css("background-image", "url(img/character-down.gif)"); //DOWN ARROW KEY 
        var character = $(characterName); 
        var map = $('#map'); 

        if((character.offset().bottom + 40) < map.offset().bottom) { 
         character.animate(
          { 
           top: '+=40' 
          }, 
          250, 
          function(){} 
         ); 
        } 
        break; 
    } 
});

來源

2010-07-23 13:47:12 ScottS

工作，我不是最瞭解JQuery的，但我的猜測是你設置的每個地方top與'+=40'之類的東西，它可能不會將「+ =」識別爲運算符。您應該設置top獲取當前值並對其進行添加，然後將其分配回top。

來源

2010-07-23 13:19:40 ScottS

不幸的是，這是不正確的。+ = 40 * *被認爲是一個操作符。問題是，jQuery認爲map.offset（）。left比應該是更多/更少，但我似乎無法修復它:( – 2010-07-23 13:28:55

當我看代碼時，看起來很奇怪你正在檢查'top'動畫的'offset（）。left'，看起來很奇怪你的校驗方程是一樣的：總是檢查'character.offset（）。left - 40）> map.offset ）.left'是否要添加或減去值 – ScottS 2010-07-23 13:34:23

已更新的問題。 – 2010-07-23 13:41:07

設定界限，以一個div，通過鍵盤控制

回答

相關問題