科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>jquery - How to move smoothly a character in Javascript (without Canvas) - Stack Overflow

    jquery - How to move smoothly a character in Javascript (without Canvas) - Stack Overflow

    programmeradmin0浏览0评论

    I'm kinda struggling to animate a character in a js game i'm currently trying to develop. I can't use canvas so it's only DIVs. With the current functions, i can move my character left / right but it's not smooth at all, it's kind of "step by step". I've been looking for answers but the only solutions i've found uses canvas.

    Here's my code (works better in fullscreen but kinda glitched 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('.png');
	background-color: #B4381F;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    background-position: 50% 30%; 

}

#batman{
	background-image:url('.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(".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('.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=".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=".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="platform1"></div>
			
		<div id="platform5"></div>
		<div id="floor">-->

	<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>

    I'm kinda struggling to animate a character in a js game i'm currently trying to develop. I can't use canvas so it's only DIVs. With the current functions, i can move my character left / right but it's not smooth at all, it's kind of "step by step". I've been looking for answers but the only solutions i've found uses canvas.

    Here's my code (works better in fullscreen but kinda glitched 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./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./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./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./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./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./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="platform1"></div>
			
		<div id="platform5"></div>
		<div id="floor">-->

	<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>

    Also, i'm trying to implement a jump action, if you have any ideas to make the whole movement instead of just a 'teleportation', i'll appreciate it.

    Thanks guys ! Cheers.

    • javascript
    • jquery
    • css
    • html
    Share Improve this question asked Apr 14, 2015 at 7:27 0x010x01 8857 silver badges17 bronze badges 5
    • I would also want a good answer to that , till than can you use css animations? – Abhinav Gauniyal Commented Apr 14, 2015 at 7:38
    • I don't think so since i need to use keycodes elements (the games uses the keyboard). From now we are applying margins to the css #batman with js. – 0x01 Commented Apr 14, 2015 at 7:47
    • then use transitions? transitions get applied on elements like , #batman { transition : margin 1s , background-color 2s; } try them :) – Abhinav Gauniyal Commented Apr 14, 2015 at 7:54
    • can you post that code on jsfiddle editing suitably ? I would love to make it work and play with it. I am certain using css would be sufficient in this case or a little bit of js :D – Abhinav Gauniyal Commented Apr 14, 2015 at 8:01
    • sure thing @AbhinavGauniyal, here is a codepen of it, make it fullscreen : codepen.io/PaulBorensztein/pen/PwMGYO also, i made a few changes now the animation is fluid but i can't stop it, if you have any ideas on how to fix it, would be nice ! – 0x01 Commented Apr 14, 2015 at 8:10
    Add a ment  | 

    3 Answers 3

    Reset to default 3

    Had to do couple of tweaks!

    http://codepen.io/smartsendy34/pen/emqdEm

    Right movement is smoother now!

    // USING JAVASCRIPT

    var moveKey = 0;
var moveTime = 0 ;
var frames = 10;
var second = 50;
var fps = second/frames;

function avancerRight()
{
    var batman=document.getElementById("batman");
    x=parseInt(batman.style.left);

    batman.className="dirDroite";

    clearTimeout(moveTime);
        moveTime = setTimeout(function(){
        clearInterval(moveKey);
    },second);        

    clearInterval(moveKey);
    moveKey = setInterval(function(){
        x = x+(10 / frames);
        batman.style.left = x + "px";      
    },fps);

    return false;
}

    // USING JQUERY

    function avancerRight()
{
    var batman=document.getElementById("batman");
     x=batman.style.left;

    batman.className="dirDroite";
    $(batman).stop().animate({"left":(x+10)},100);

    return false;
}

    Okay so i basically made it throught with this simple script :

    setInterval(bougerPerso, 10);
var touche = {}
var avancer = 8;

$(document).keydown(function(e) {
    touche[e.keyCode] = true;
});

$(document).keyup(function(e) {
    delete touche[e.keyCode];
});


function bougerPerso() {
    for (var direction in touche) {
        if (direction == 37){
            $("#batman").animate({left: "-=5"}, 0); // Met l'id de ta div qui doit bouger ici!             
        }

        if (direction == 39) {
            $("#batman").animate({left: "+=5"}, 0); // Met l'id de ta div qui doit bouger ici! 
        }
    }
}

    Thanks every one for helping me, here is the working code : http://codepen.io/PaulBorensztein/pen/PwMGYO

    Now i'm looking to make realistic jumps, any ideas on the process to do it ?

    Since you have tagged jquery I would suggest you to use jquery animate and I've tried something like below which gives a smooth movement but to make it perfect you need work little bit on that. You can also include jquery-easing.js and do more perfect operations on animations. Give a try. Same stands for your jump and drop. animate will help you in the said scenarios.

    function avancerRight()
{
	var batman=document.getElementById("batman");
	x=batman.style.left;
	
	batman.className="dirDroite";
        $(batman)..stop().animate({left: parseInt(x)+10+'px'}); //this change
	//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).stop().animate({left: parseInt(x)-10+'px'});//this change
	//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./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./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./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./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./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./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="platform1"></div>
			
		<div id="platform5"></div>
		<div id="floor">-->

	<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>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论