- Joined
- Nov 18, 2008
- Messages
- 13
- Reaction score
- 0
Code:
<!DOCTYPE html>
<html>
<style>
#char{
background-image:url('link.gif');
position: absolute;
top: 0px;
left: 0px;
width: 47px;
height: 44px;
}
#map{
position:relative;
}
</style>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$(document).keydown(function(e){
var key = e.keyCode;
var position = $("#char").position();
switch(key){
case 37:
$("#char").css('left', position.left - 20 + 'px');
break; //Left
case 38:
$("#char").css('top', position.top - 20 + 'px');
break; //Up
case 39:
$("#char").css('left', position.left + 20 + 'px');
break; //Right
case 40:
$("#char").css('top', position.top + 20 + 'px');
break; //Down
}
});
});
</script>
</head>
<body>
<center><div id = "char">
</div></center>
<script>
</script>
</body>
</html>It's an image and I basically want to know how to stop the character( sprite ) from going past the past the wall, if it starts at position absolute(0) . How do I stop it from going up if it's already at the top of the page same for left and same for if it were in a box.
I've tried different ideas, sitting here for hours and I still can't figure it out.
I tried getting the position of the wall which is 0 but it still like is glitchtly when you walk towards it.
