animate image with jquery

Question

animate image with jquery

Navigation

#1 by (0 votes)

1

I am developing the super Mario bros game for html5, jquery and css3 for a university practice.

To put in situation, I have a div "map" and inside the other div "pj" which by means of js I indicate that the div "pj" is moving by the div "map". The problem comes when the "pj" reaches the middle of the screen I can not move the div map to simulate the progress in the game, in other words I can not advance the map as the pj advances.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="basic.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="map">
<div class="pj" id='pj'></div>
</div>
</body>
<script type="text/javascript" src="core.js"/></script>
</html>

CSS

    .map{
width:800px; 
height:225px;
float:left;
position:fixed;
margin:200px 0px 0px 200px;
background-image:url('sprites/mapa.png'); 
border-style:solid;
border-color:red;
overflow:hidden;
}
.pj{
width:32px; height:32px; /* exactly the size of an image in our sprite */
background-image:url('sprites/sprites_ff.png'); 
position:relative;
float:left;
top:170px;
}

.walk_human{
animation: walk steps(4) 0.3s infinite alternate;

}

.walk{
animation: walk steps(2) 0.1s infinite alternate;

}

 .walk_back{
animation: walk_back steps(2) 0.1s infinite alternate;
 }

.jump { animation: jump steps (2) 0.5s; }

@keyframes walk_human {
from { background-position:-0px -192px; }
to { background-position:-160px -192px; }
}

@keyframes walk{
from { background-position:-0px -64px; }
to { background-position:-64px -64px; }
}

@keyframes walk_back{
from { background-position:-0px -32px; }
to { background-position:-64px -32px; }
}

@keyframes jump{
from { background-position:-0px -0px; }
to { background-position:-64px -0px; }
}

Jquery

   var middleMap=0; //acumula posicion del pj para sincronizar con la mitad del mapa
  var posMap=$map.offset();

  $(document).keydown(function(e) {

if (e.keyCode == 39) { 
    var posPj=$pj.offset();
    if(middleMap>=400){
        $pj.addClass('walk').css();
        $map.animate({left:'+=40px'});
    }else{
        $pj.addClass('walk').css();
        $pj.animate({marginLeft:'+=40px'});
        middleMap+=30;
    }
}
if(e.keyCode ==37){
    var posPj=$pj.offset();
    if(posPj.left<=posMap.left){
        alert(posMap.top+""+posMap.left);
    }else{
        $pj.addClass('walk_back').css();
        $pj.animate({marginLeft:'-=40px'});
        middleMap-=30;
    }   
}
if(e.keyCode ==32 && !saltando){
    salta();

}
 });

 function salta(){
saltando = true;
$pj.stop(true,false);
$pj.animate({marginTop:'-=30px'});
baja(); 
}

function baja(){
setTimeout(function() {
    $pj.animate({marginTop:'+=30px'});}, 250);
    setTimeout(function() {saltando=false;}, 1000)  
}

$(document).keyup(function(e) {
$pj.removeClass('walk');
$pj.removeClass('walk_back');
if(!saltando){
     $pj.stop(true,false);
     //saltando=false;
}
});

Game

What I intend is that when the pj reaches the middle of the map, it will move, giving the impression that it is advancing on the map but without it leaving or dislodging from the div.

jquery html5 animated animate.css

asked by JoseCa 18495 19.03.2017 в 13:14

source

1 answer

how can I add the common values of an ArrayListString in Java? Web API in ASP.NET with OData - Problem in the view

score 0 · Accepted Answer

You can do it with CSS, you just have to specify with JQuery where the bottom movement would start

    var traslado = 100;

if(middleMap>=400){
    $pj.addClass('walk').css();
    $map.animate({backgroundPosition: traslado});
    traslado = traslado + 100;

later it would only be to specify that it moves decently according to the fence backwards until it reaches the beginning

Here is the topic: Animation with CSS