Reputation: 1
I preparing for Game Jam in my school and came across a problem. In this code I am trying to make it so when you press the right arrow key, it moves the character right. But the function is making it move from the right instead of right.
Here is my code---
var main = function() {
var moveRight = function() {}
var wall = function() {
wall = $('.header')
}
$(document).keypress(function(event) {
if(event.which === 32) {
$('.header').animate({
bottom: "-31px"
},1000)
}
});
$(document).keydown(function(event) {
if(event.which === 39) {
$('.character').animate({
right: "400px"
},1000)
}
});
}
$(document).ready(main);
The problem is in here somewhere---
$(document).keydown(function(event) {
if(event.which === 39) {
$('.character').animate({
right: "400px"
},1000)
}
});
Thank you for your help.
Upvotes: 0
Views: 42
Reputation: 8150
In css the right
property describes the amount of distance between the right side of the element, and the right side of its container. Consider a person standing between a "left wall" and a "right wall". In css, if they have right: 0
, their right side is touching the right wall. With right: 3px
, their right side is 3 pixels from that wall. As you can see, increasing right
moves elements LEFT. You are probably interested in using the left
attribute instead of right
:
$(document).keydown(function(event) {
if (event.which === 39) {
$('.character').animate({ left: "400px" }, 1000);
}
});
While it has some applications, mixing left
and right
properties is probably not a good idea in your specific situation. Ensure that you never use the right
property any more, and replace every instance of the usage of right
with left
instead!
Upvotes: 1