jQuery .bind不止一次被执行？

Question

原始代码：（可以看到在这里工作：http://sandbox.hokuten.net/jqrpg/）

/* 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次）。

Answer 1

问题在于他们如何进行绑定，重新编写1.4.2事件模型，该方法不再起作用，但你可以将其编写为与1.4.2一起使用，如下所示：< / p>

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。

---

单独的问题： 问题出在你的webhost上，好吧......搞砸了你的页面。如果你查看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> 1}}。一些webhosts会寻找一个标签来粘贴它，例如：

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

我会看看你是否有这个选择：）