Question

我是一个jQuery / javascript初学者，为了好玩，我正在尝试制作蛇游戏。我认为我非常接近运动，除非我通过键盘箭头改变方向，它不是我的预期。例如，蛇将自动开始向右移动。如果我击落它会下降但仍然继续向右。如果我向左击，它会向左移动但继续向下移动。

这可能只是我的代码中的一个基本错误或更明显的错误。

JSFiddle：http://jsfiddle.net/zgjg6914/

var direction = 'left';
var plusOrMinus = '+=25px';

// create the object literal
var aniArgs = {}; 

function myFunction(){
    aniArgs[direction] = plusOrMinus;
    var posTop = $('.snake_bit').position().top + 25;
    var posLeft = $('.snake_bit').position().left + 25;
    if (posTop > 500 || posLeft > 500 || posTop < 25 || posLeft < 25) {
        gameOver();
        return;
    }
    $('.snake_bit').animate(aniArgs, 0);
    console.log('top: ' + posTop + ' left: ' + posLeft);
}
function gameOver(){
    clearInterval(theInterval);
    console.log('game over');
}

$(document).keydown(function(e){
    if (e.keyCode == 38) {
      direction = 'top';
      plusOrMinus = '-=25px';
    } else if (e.keyCode == 40) {
      direction = 'top';
      plusOrMinus = '+=25px';
    } else if (e.keyCode == 37) {
      direction = 'left';
      plusOrMinus = '-=25px';
    } else if (e.keyCode == 39) {
      plusOrMinus = '+=25px';
      direction = 'left';
    }
});

var theInterval = setInterval(myFunction, 1000);

Answer 1

问题是，当您设置新方向时，将前一个方向保留在aniArgs。

快速修复：在keydown处理程序中，在所有if中，您需要重置aniArgs。

if (e.keyCode == 38) {
    aniArgs = {};  // clear previous movement
    direction = 'top';
    plusOrMinus = '-=25px';
}

我更新了您的fiddle。

Answer 2

我不认为使用时间间隔检查游戏中的任何行为是否是个好主意。阅读准备游戏with html5 canvas element（jquery在那里也很有用） - imho它是在浏览器中创建游戏的更合适的方式

为什么jQuery animate（）不能使用变量css属性？

2 个答案: