JQuery JavaScript - Karakter mozgatás. Folyamatos?
Valakinek valami ötlete arra, hogy hogyan animáljam ezt le úgy, hogy ha folyamatosan nyomják a jobbra/balra/fel/le gombot, akkor ne buggoljon/akadjon be?
A válaszokat előre is köszi(:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="icon" type="image/jpg" href="image/horse.jpg" />
</head>
<body>
<div id="container">
<div id="main_game_container">
<div id="map">
<img src="image/character.png" id="character" alt="character dead" />
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
------------------------------
style.css
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #000;
}
div#container{
width: 800px;
margin: 0px auto;
}
div#main_game_container{
width: 602px;
height: 602px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
position: relative;
}
div#map{
width:600px;
height: 600px;
margin: 0px auto;
border: 1px solid #fff;
position: relative;
}
img#character{
width: 100px;
height: 100px;
position: absolute;
}
---------------------------------------
script.js
function box_vertical_aligner(element){
var window_height = $(window).height();
var element_height = element.height();
element.css('top',window_height/2-element_height/2);
}
$(document).ready(function(){
box_vertical_aligner($('#main_game_container'));
$(document).keydown(function(e){
//alert(e.keyCode);
var position = $('#character').position();
switch(e.keyCode){
case 37: //Left
//$('#character').css('left',position.left-20+'px');
$('#character').animate({left: position.left-100+'px'},500);
break;
case 38: //Up
//$('#character').css('top',position.top-20+'px');
$('#character').animate({top: position.top-100+'px'},500);
break;
case 39: //Right
//$('#character').css('left',position.left+20+'px');
$('#character').animate({left: position.left+100+'px'},500);
break;
case 40: //Down
//$('#character').css('top',position.top+20+'px');
$('#character').animate({top: position.top+100+'px'},500);
break;
}
});
});
válasza:Nincs most időm a kódodat végignézi, de szvsz ebből kiindulhatsz.
HTML
<div></div>
CSS
div{
background:#ccc;
height:100px;
width:100px;
position: absolute;
top: 0;
left: 0;
}
JS
var $div = $('div');
$(document).keydown(function(e) {
switch (e.which) {
case 37:
$div.css('left', $div.offset().left - 1);
break;
case 38:
$div.css('top', $div.offset().top - 1);
break;
case 39:
$div.css('left', $div.offset().left + 1);
break;
case 40:
$div.css('top', $div.offset().top + 1);
break;
}
})
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!