2010-07-20 55 views
0

原始代碼:(可以看到在這裏工作:http://sandbox.hokuten.net/jqrpg/jQuery .bind正在被執行多次?

/* google.setOnLoadCallback(function() { */ 
$(function() { 

jqr = new Object(); 
jqr.settings = new Object(); 
jqr.settings.sprite_width = 16; 
jqr.settings.sprite_height = 16; 
jqr.settings.space = false; 

jqr.p = new Object(); 
function jqrpgResetPlayer() { 
    jqr.p.face = 'd'; 
    jqr.p.x = 3; 
    jqr.p.y = 3; 
    jqr.p.state = 'map'; 
} 

jqr.map = new Object(); 
jqr.map.height = 16; 
jqr.map.width = 16; 
jqr.map.terrain = [ 
'01','02','03','11','11','11','11','11','11','11','11','11','11','11','11','11', 
'01','01','00','00','11','00','00','11','11','00','00','00','00','00','00','00', 
'01','00','00','00','11','00','00','00','00','11','00','00','00','00','00','00', 
'01','00','00','00','00','00','00','11','00','11','00','00','00','00','00','00', 
'01','00','00','00','00','00','00','11','00','11','11','11','11','00','00','00', 
'00','00','00','00','00','11','11','00','00','00','00','00','11','00','00','00', 
'00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','00','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','00','00','00','11','00','00','00', 
'00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','11','00','00','11','01','01','01', 
'00','00','00','00','00','00','00','00','00','11','11','11','00','00','00','01', 
'00','00','00','00','00','00','00','00','00','00','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','00','00','00','00','00','00','00', 
]; 
jqr.map.terrain_walkable = [ 
'00','01','02', 
]; 

jqr.battle = new Object(); 

jqrpgBuildMapHtml(); 
jqrpgUpdateMapClasses(); 
jqrpgResetPlayer(); 
jqrpgSetPlayerFace(jqr.p.face); 
jqrpgSetPlayer(jqr.p.x, jqr.p.y); 
jqrpgBindKeys(); 

/** 
* only call this once 
*/ 
function jqrpgBuildInterface() { 
    $('#jqrpg_wrapper').width($('#jqrpg_screen').width()); 
} 
function jqrpgBuildMapHtml() { 
    $('#jqrpg_screen, #jqrpg_wrapper').height(jqr.map.height * jqr.settings.sprite_height) 
    .width(jqr.map.width * jqr.settings.sprite_width); 
    m = $('#jqrpg_map'); 
    m.empty(); 
    for (y = 0; y < jqr.map.height; y++) { 
     for (x = 0; x < jqr.map.width; x++) { 
      // cti = y * x; // current_tile_index 
      // <![CDATA[ 
      m.append('<span>.</span>'); 
      // ]]> 
     } 
    } 
} 

/** 
* call this whenever enter a new screen 
*/ 
function jqrpgUpdateMapClasses() { 
    for (y = 0; y < jqr.map.height; y++) { 
     for (x = 0; x < jqr.map.width; x++) { 
      cti = y * jqr.map.height + x; // current_tile_index 
      ct = $('#jqrpg_map span').eq(cti); 
      ct.removeClass() 
      .addClass('tile') 
      .addClass('tile_x' + x + 'y'+ y) 
      .addClass('tile_' + jqr.map.terrain[cti]); 
      if (y && x == 0) ct.addClass('tile_row'); 
     } 
    } 
    $('#jqrpg_map').fadeIn('slow'); 
} 
function jqrpgSetPlayerFace(new_face) { 
    $('#jqrpg_player').removeClass().addClass('face_' + new_face); 
} 
function jqrpgSetPlayer(new_x, new_y) { 
    $('#jqrpg_player').css({ 
    'left' : new_x * jqr.settings.sprite_width, 
    'top' : new_y * jqr.settings.sprite_height 
    }); 
} 

/** 
* key binding 
*/ 
function jqrpgBindKeys() { 
    $(document).bind('keydown', 'up', function() { 
     if (jqr.p.state != 'map') return false; 
     jqrpgSetPlayerFace('u'); 
     return jqrpgMovePlayer(0, -1); 
    }) 
    .bind('keydown', 'Down', function() { 
     if (jqr.p.state != 'map') return false; 
     jqrpgSetPlayerFace('d'); 
     return jqrpgMovePlayer(0, 1); 
    }) 
    .bind('keydown', 'Left', function() { 
     if (jqr.p.state != 'map') return false; 
     jqrpgSetPlayerFace('l'); 
     return jqrpgMovePlayer(-1, 0); 
    }) 
    .bind('keydown', 'Right', function() { 
     if (jqr.p.state != 'map') return false; 
     jqrpgSetPlayerFace('r'); 
     return jqrpgMovePlayer(1, 0); 
    }) 
    .bind('keypress', 'Space', function() { 
     // if (console) console.log('space'); 
     if (jqr.p.state == 'map') return false; 
     jqr.settings.space = true; 
     if (jqr.p.state == 'battle') jqrpgBattle(); 
     return true; 
    }); 
} 

/** 
* movement 
*/ 
function jqrpgMovePlayer(new_x, new_y) { 
    // if (console) console.log('x: ' + jqr.p.x + ' y: ' + jqr.p.y); 
    if (jqr.p.x + new_x + 1 > jqr.map.width 
    || jqr.p.y + new_y + 1 > jqr.map.height 
    || jqr.p.x + new_x + 1 == 0 
    || jqr.p.y + new_y + 1 == 0 
    || !jqrpgIsTileWalkable(jqr.p.x + new_x, jqr.p.y + new_y) 
    ) return; 
    jqr.p.x += new_x; jqr.p.y += new_y; 

    $('#jqrpg_player').dequeue().animate({ 
    left: jqr.p.x * jqr.settings.sprite_width, 
    top: jqr.p.y * jqr.settings.sprite_height 
    }, 
    250, 
    function() { 
     jqrpgGetRandomBattle(); 
    }); 
    return true; 
} 
function jqrpgIsTileWalkable(x, y) { 
    return jQuery.inArray(jqr.map.terrain[(y) * 16 + x], jqr.map.terrain_walkable) > -1; 
} 
/** 
* battle 
*/ 
function jqrpgGetRandomBattle() { 
    var likelihood = Math.floor(Math.random() * 6) + 1; 
    if (likelihood == 1) { 
     jqrpgBattleInit(); 
    } 
} 
function jqrpgBattleInit() { 
    jqr.p.state = 'battle'; 
    m = $('#jqrpg_menu'); 
    m.show(); 
    // <![CDATA[ 
    m.html('<p>Random battle! Press [space] to continue.</p>'); 
    // ]]> 
    $('#jqrpg_wrapper').css({'border-color' : '#a00'}); 
} 
function jqrpgBattle() { 
    if (jqr.settings.space) { 
     jqr.settings.space = false; 
     jqrpgBattleEnd(); 
    } 
} 
function jqrpgBattleEnd() { 
    jqr.p.state = 'map'; 
    $('#jqrpg_wrapper').css({'border-color' : '#000'}); 
    m.fadeOut('fast'); 
} 

}); 

我的代碼:(可以看到在這裏工作:http://project-vanquish.co.cc/jQRPG/

$(function() { 

jqr = new Object(); 
jqr.settings = new Object(); 
jqr.settings.sprite_width = 16; 
jqr.settings.sprite_height = 16; 
jqr.settings.space = false; 

jqr.p = new Object(); 
function jqrpgResetPlayer() { 
    jqr.p.face = 'd'; 
    jqr.p.x = 3; 
    jqr.p.y = 3; 
    jqr.p.state = 'map'; 
} 

jqr.map = new Object(); 
jqr.map.height = 16; 
jqr.map.width = 16; 
jqr.map.terrain = [ 
'01','02','03','11','11','11','11','11','11','11','11','11','11','11','11','11', 
'01','01','00','00','11','00','00','11','11','00','00','00','00','00','00','00', 
'01','00','00','00','11','00','00','00','00','11','00','00','00','00','00','00', 
'01','00','00','00','00','00','00','11','00','11','00','00','00','00','00','00', 
'01','00','00','00','00','00','00','11','00','11','11','11','11','00','00','00', 
'00','00','00','00','00','11','11','00','00','00','00','00','11','00','00','00', 
'00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','00','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','00','00','00','11','00','00','00', 
'00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','11','00','00','11','01','01','01', 
'00','00','00','00','00','00','00','00','00','11','11','11','00','00','00','01', 
'00','00','00','00','00','00','00','00','00','00','00','00','00','00','00','00', 
'00','00','00','00','00','00','00','00','00','00','00','00','00','00','00','00', 
]; 
jqr.map.terrain_walkable = [ 
'00','01','02', 
]; 

jqr.battle = new Object(); 

jqrpgBuildMapHtml(); 
jqrpgUpdateMapClasses(); 
jqrpgResetPlayer(); 
jqrpgSetPlayerFace(jqr.p.face); 
jqrpgSetPlayer(jqr.p.x, jqr.p.y); 
jqrpgBindKeys(); 

/** 
* only call this once 
*/ 
function jqrpgBuildInterface() { 
    $('#jqrpg_wrapper').width($('#jqrpg_screen').width()); 
} 
function jqrpgBuildMapHtml() { 
    $('#jqrpg_screen, #jqrpg_wrapper').height(jqr.map.height * jqr.settings.sprite_height) 
    .width(jqr.map.width * jqr.settings.sprite_width); 
    m = $('#jqrpg_map'); 
    m.empty(); 
    for (y = 0; y < jqr.map.height; y++) { 
     for (x = 0; x < jqr.map.width; x++) { 
      // cti = y * x; // current_tile_index 
      // <![CDATA[ 
      m.append('<span>.</span>'); 
      // ]]> 
     } 
    } 
} 

/** 
* call this whenever enter a new screen 
*/ 
function jqrpgUpdateMapClasses() { 
    for (y = 0; y < jqr.map.height; y++) { 
     for (x = 0; x < jqr.map.width; x++) { 
      cti = y * jqr.map.height + x; // current_tile_index 
      ct = $('#jqrpg_map span').eq(cti); 
      ct.removeClass() 
      .addClass('tile') 
      .addClass('tile_x' + x + 'y'+ y) 
      .addClass('tile_' + jqr.map.terrain[cti]); 
      if (y && x == 0) ct.addClass('tile_row'); 
     } 
    } 
    $('#jqrpg_map').fadeIn('slow'); 
} 
function jqrpgSetPlayerFace(new_face) { 
    $('#jqrpg_player').removeClass().addClass('face_' + new_face); 
} 
function jqrpgSetPlayer(new_x, new_y) { 
    $('#jqrpg_player').css({ 
    'left' : new_x * jqr.settings.sprite_width, 
    'top' : new_y * jqr.settings.sprite_height 
    }); 
} 

/** 
* key binding 
*/ 
function jqrpgBindKeys() { 
    $(document).bind('keydown', 'up', function() { 
     if (jqr.p.state != 'map') return false; 
     jqrpgSetPlayerFace('u'); 
     return jqrpgMovePlayer(0, -1); 
    }) 
    .bind('keydown', 'Down', function() { 
     if (jqr.p.state != 'map') return false; 
     jqrpgSetPlayerFace('d'); 
     return jqrpgMovePlayer(0, 1); 
    }) 
    .bind('keydown', 'Left', function() { 
     if (jqr.p.state != 'map') return false; 
     jqrpgSetPlayerFace('l'); 
     return jqrpgMovePlayer(-1, 0); 
    }) 
    .bind('keydown', 'Right', function() { 
     if (jqr.p.state != 'map') return false; 
     jqrpgSetPlayerFace('r'); 
     return jqrpgMovePlayer(1, 0); 
    }) 
    .bind('keypress', 'Space', function() { 
     // if (console) console.log('space'); 
     if (jqr.p.state == 'map') return false; 
     jqr.settings.space = true; 
     if (jqr.p.state == 'battle') jqrpgBattle(); 
     return true; 
    }); 
} 

/** 
* movement 
*/ 
function jqrpgMovePlayer(new_x, new_y) { 
    // if (console) console.log('x: ' + jqr.p.x + ' y: ' + jqr.p.y); 
    if (jqr.p.x + new_x + 1 > jqr.map.width 
    || jqr.p.y + new_y + 1 > jqr.map.height 
    || jqr.p.x + new_x + 1 == 0 
    || jqr.p.y + new_y + 1 == 0 
    || !jqrpgIsTileWalkable(jqr.p.x + new_x, jqr.p.y + new_y) 
    ) return; 
    jqr.p.x += new_x; jqr.p.y += new_y; 

    $('#jqrpg_player').dequeue().animate({ 
    left: jqr.p.x * jqr.settings.sprite_width, 
    top: jqr.p.y * jqr.settings.sprite_height 
    }, 
    250, 
    function() { 
     jqrpgGetRandomBattle(); 
    }); 
    return true; 
} 
function jqrpgIsTileWalkable(x, y) { 
    return jQuery.inArray(jqr.map.terrain[(y) * 16 + x], jqr.map.terrain_walkable) > -1; 
} 
/** 
* battle 
*/ 
function jqrpgGetRandomBattle() { 
    var likelihood = Math.floor(Math.random() * 6) + 1; 
    if (likelihood == 1) { 
     jqrpgBattleInit(); 
    } 
} 
function jqrpgBattleInit() { 
    jqr.p.state = 'battle'; 
    m = $('#jqrpg_menu'); 
    m.show(); 
    // <![CDATA[ 
    m.html('<p>Random battle! Press [space] to continue.</p>'); 
    // ]]> 
    $('#jqrpg_wrapper').css({'border-color' : '#a00'}); 
} 
function jqrpgBattle() { 
    if (jqr.settings.space) { 
     jqr.settings.space = false; 
     jqrpgBattleEnd(); 
    } 
} 
function jqrpgBattleEnd() { 
    jqr.p.state = 'map'; 
    $('#jqrpg_wrapper').css({'border-color' : '#000'}); 
    m.fadeOut('fast'); 
} 

}); 

那麼,問題我的是,我的球員運動不止一次(似乎是3次)。

+0

你是不是表示在'jqrpgBindKeys'正在從所謂的,這是一個非常重要的細節:) – 2010-07-20 10:11:01

+0

@nick更新了我的問題:) – 2010-07-20 10:13:43

+0

@Neurofluxation - 哪個瀏覽器給你帶來麻煩?它在Chrome/IE/FF中執行一次。 – 2010-07-20 10:21:16

回答

1

問題在於他們是如何做綁定的,1.4.2事件模型重寫了這種方法只是不工作了,但你可以編寫它來使用1.4.2,就像這個:

function jqrpgBindKeys() { 
    $(document).bind('keydown', function(e) { 
     if (jqr.p.state != 'map' && e.which != 32) return false; 
     switch(e.which) { 
      case 38: //up 
      jqrpgSetPlayerFace('u'); 
      return jqrpgMovePlayer(0, -1); 
      case 40: //down 
      jqrpgSetPlayerFace('d'); 
      return jqrpgMovePlayer(0, 1); 
      case 37: //left 
      jqrpgSetPlayerFace('l'); 
      return jqrpgMovePlayer(-1, 0); 
      case 39: //right 
      jqrpgSetPlayerFace('r'); 
      return jqrpgMovePlayer(1, 0); 
      case 32: //space bar 
      if (jqr.p.state == 'map') return false; 
      jqr.settings.space = true; 
      if (jqr.p.state == 'battle') jqrpgBattle(); 
      return true; 
     } 
    }); 
} 

You can give it a try (using jQuery 1.4.2) here。你也可以通過對象圖等來做到這一點,但這是快速更改版本,以使其能夠與1.4.2一起使用。


單獨的問題: 的問題是在你的虛擬主機提供商,以及...您的網頁擰緊。如果你看一下在http://www.project-vanquish.co.cc/jQRPG/源,你會在年底看到這個(修改刪除實域):

</body> 
</html> 
<!-- www.removedToProtectTheGuilty.com Analytics Code --> 
<script type="text/javascript" src="http://analytics.example.com/count.php"></script> 
<noscript><a href="http://www.example.com/"><img src="http://analytics.example.com/count.php" alt="web hosting" /></a></noscript> 
<!-- End Of Analytics Code --> 

</html>後執行該腳本導致周圍document.ready各種瘋狂的,將只給一般問題...如果可能的話擺脫它,或者試着把它拿到裏面<body></body>。有些主機商尋找一個標籤來堅持在,如:

<div id="analyticsCodeHere"></div> 

我會看到,如果你有這樣的選擇:)

+0

完美,歡呼尼克。即使這不是我想聽到的消息。 – 2010-07-20 11:03:11

+0

如果我也使用jQuery 1.4.2,同樣的問題也會發生,爲了使功能正確,我必須降級到1.4.1;} – 2010-07-20 11:24:06

+0

@Neurofluxation - 你是對的,我翻看1.4.2提交和方式他們只是在1.4.2事件模型重寫時打破了鍵碼。檢查更新後的答案,包括如何更正確地檢查它......這在1.4.2中沒有問題。 – 2010-07-20 12:10:00