$('#player')$('#player')$('#player')
$('#player')$('#player')$('#player')$('#player')
$('#player')$('#player')$('#player')$('#player')
Do not use $('#player') more than once in your code if you intend on fetching data or setting data to the DOM element more than once. Instead save your element to a javascript variable so you can quickly access it. If not, then your jQuery will search through the DOM over and over again.
var playerNode = $('#player');
playerNode.animate(stuff);
Anonymous Functions Are Evil
Notice how
function() {
$("#player").appendTo("#" + moveTo);
$('#player').attr("style", "");
}
is exactly the same as
function() {
$("#player").appendTo("#" + moveTo);
$('#player').attr("style", "");
}
That means you don't need to write the same line twice. Just create one function object and call itself for each method.
var animCallback = function() {
$("#player").appendTo("#" + moveTo);
$('#player').attr("style", "");
};
But wait! There's more! We can clean up that nasty callback because jQuery supports chaining, which allows you to just write one-liners with ease. In fact, while we're at it, we may as well use that variable that holds the player DOM node instead of searching for it again.
var animCallback = function() {
playerNode.appendTo("#" + moveTo).attr("style", "")
};
playerNode.animate({ left: "+=" + scale }, "slow", animCallback);
If V.S. Case
Now here's a discrepancy. Some people say that switch case is faster than if else. However, you'll notice that newer browsers are focusing on improving the speed of if else by very large amounts. Some browsers are even faster with if else than switch case. Speed isn't the problem here, it's readability. Use an if else statement if there's only 4 possibilities because it makes more sense.
if(direction === 'left') {
playerNode.animate({ left: "+=" + scale }, "slow", animCallback);
} else if(direction === 'right') {
playerNode.animate({ right: "+=" + scale }, "slow", animCallback);
} ...
jQuery
You can make a game in your web browser, it'll just be slower than a C++ program. Likewise, you can make a game with jQuery, but it'll be slower than raw Javascript or your own custom libraries. I'm personally okay with jQuery being a setup for a game because it can normalize values that would appear different from browsers. Keep in mind, though, that document.getElementById('player') is about 10 times faster than $('#player').
All Together Now
var playerNode = $(document.getElementById('player'));
function move(moveTo, direction) {
var animCallback = function() {
playerNode.appendTo("#" + moveTo).attr("style", "")
};
if(direction === 'left') {
playerNode.animate({ left: "-=" + scale }, "slow", animCallback)
} else if(direction === 'right') {
playerNode.animate({ left: "+=" + scale }, "slow", animCallback)
} else if(direction === 'up') {
playerNode.animate({ top: "-=" + (9 * (scale / 10)) }, "slow", animCallback)
} else {
playerNode.animate({ top: "+=" + (9 * (scale / 10)) }, "slow", animCallback)
}
}
animateto do animation. Can you maybe explain what you're trying to do and what the problem is with your current approach? \$\endgroup\$