I'm kind of trying to revive a character in the js game I'm trying to develop now. I can’t use canvas, so these are just DIVs. With the current functions, I can move my character left / right, but it is not smooth at all, it is a kind of "step by step". I have been looking for answers, but the only solutions I have found use canvas.
Here is my code (works best in full screen mode, but curiously buggy with positions):
function avancerRight() { var batman=document.getElementById("batman"); x=batman.style.left; batman.className="dirDroite"; batman.style.left=parseInt(x)+10+"px"; return false; } function avancerLeft() { console.log("dedede"); var batman=document.getElementById("batman"); x=batman.style.left; batman.className="dirGauche"; batman.style.left=parseInt(x)-10+"px"; return false; } var jumpHeight = 200; var jumping = false; function jump() { if (!jumping) { jumping = true; setTimeout(land, 500); } if (jumping) { y=batman.style.top; batman.style.top=parseInt(y)-jumpHeight+"px"; } } function land() { jumping=false; y=batman.style.top; batman.style.top=parseInt(y)+jumpHeight+"px"; }
body { padding: 0; margin: 0; background: url('http://image.noelshack.com/fichiers/2015/16/1428996568-bg.png'); background-color: #B4381F; background-repeat: no-repeat; background-attachment: fixed; background-size: 100%; background-position: 50% 30%; } #batman{ background-image:url('http://image.noelshack.com/fichiers/2015/16/1428996568-batman.png'); width:85px; height:85px; display:block; background-repeat: no-repeat; position:absolute; margin-top: -80px; } .dirDroite{ background-position: -95px 0px; } .dirGauche{ background-position: 0px 0px; } #fullbody { margin: auto; width: 100%; height: 100%; } #floor { position: absolute; right: 0; bottom: 0; left: 0; background: url("http://image.noelshack.com/fichiers/2015/16/1428996568-platform5.png"); background-repeat: repeat-x; background-size: 100% 100%; height: 126px; } #base { position: absolute; right: 0; bottom: 80px; left: 0; z-index: 200; margin: auto; background: url('http://image.noelshack.com/fichiers/2015/16/1428996568-thefloor.png'); background-size: cover; height: 70.56px; width: 846.72px; margin-top : 13.2vh; } #perspectiveGauche{ margin-top : 15vh; -webkit-perspective: 4vh; perspective: 4vh; position: absolute; width: 45vw; perspective-origin: 50% 0%; } #rectangleHautGaucheH{ margin-left: 13.22vh; width: 28.87vw; height: 2vh; background-color: #854305; -webkit-transform: rotateX(2deg); transform: rotateX(2deg); } #rectangleBasGaucheH{ width: 29.1vw; margin-left: 13vh; height: 3vh; background-color: #663303; } #perspectiveGaucheBasse{ margin-top : 15vh; -webkit-perspective: 0.1vh; perspective: 0.1vw; position: absolute; width: 45vw; perspective-origin: 50% 0%; } #rectangleHautGaucheB{ margin-top: 38vh; margin-left: 28vh; width: 15vw; height: 0.25vh; background-color: #854305; -webkit-transform: rotateX(2deg); transform: rotateX(2deg); } #rectangleBasGaucheB{ margin-top: 0.6vh; width: 15.25vw; margin-left: 27.75vh; height: 3vh; background-color: #663303; } #perspectiveDroite{ -webkit-perspective: 4vh; perspective: 4wh; position: absolute; width: 39.6vw; height: 2vh; margin-top: 15vh; perspective-origin: 200% 0%; } #rectangleHautDroitH{ margin-left: 125vh; width: 28.7vw; height: 2vh; background-color: #854305; -webkit-transform: rotateX(2deg); transform: rotateX(2deg); } #rectangleBasDroitH{ width: 28.9vw; margin-left: 124.8vh; height: 3vh; background-color: #663303; } #rectangleHautDroiteB{ margin-top: 37vh; margin-left: 133vh; width: 22vw; height: 2vh; background-color: #854305; -webkit-transform: rotateX(2deg); transform: rotateX(2deg); } #rectangleBasDroiteB{ margin-top: 0.2vh; width: 22.18vw; margin-left: 132.8vh; height: 3vh; background-color: #663303; } #perspectiveMilieu{ -webkit-perspective: 4vh; perspective: 4wh; position: absolute; width: 39.6vw; height: 2vh; margin-top: 15vh; perspective-origin: 130% 0%; } #rectangleHautMilieu{ margin-top: 21vh; margin-left: 68.95vh; width: 34.5vw; height: 2vh; background-color: #854305; -webkit-transform: rotateX(2deg); transform: rotateX(2deg); } #rectangleBasMilieu{ margin-top: 0.1vh; width: 34.77vw; margin-left: 68.7vh; height: 3vh; background-color: #663303; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LEVEL 1 NEGRILLON</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="scripts/script.js" ></script> </head> <body> <div id="fullbody"> <div id="perspectiveGauche"> <div id="rectangleHautGaucheH"></div> <div id="rectangleBasGaucheH"></div> </div> <div id="perspectiveGaucheBasse"> <div id="rectangleHautGaucheB"></div> <div id="rectangleBasGaucheB"></div> </div> <div id="perspectiveDroite"> <div id="rectangleHautDroitH"></div> <div id="rectangleBasDroitH"></div> <div id="rectangleHautDroiteB"></div> <div id="rectangleBasDroiteB"></div> </div> <div id="perspectiveMilieu"> <div id="rectangleHautMilieu"></div> <div id="rectangleBasMilieu"></div> </div> <div id="base"></div> <div id="floor"></div> <div id="batman" class="dirDroite" style="left:700px;top:280px;"></div> <div id="zone" style="left:300px;top:50px;"></div> <script> document.onkeydown = pave; function pave(e) { e = e || window.event; if (e.keyCode == '38') { jump(); } else if (e.keyCode == '40') { avancerBottom(); } else if (e.keyCode == '37') { avancerLeft(); } else if (e.keyCode == '39') { avancerRight(); } } </script> </div> </body> </html>
In addition, I am trying to implement the transition action, if you have ideas to make the whole movement, and not just "teleport", I will be grateful for this.
Thanks guys! Greetings.
source share