javascript - 如何在 Javascript 中平滑地移动角色(没有 Canvas)

Question

我正在努力为我目前正在尝试开发的 js 游戏中的 Angular 色制作动画。我不能使用 Canvas ，所以它只是 DIV。使用当前功能，我可以向左/向右移动我的 Angular 色，但它一点也不流畅，有点“一步一步”。我一直在寻找答案，但我找到的唯一解决方案是使用 Canvas 。

这是我的代码(在全屏下效果更好，但位置有点问题):

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

此外，我正在尝试实现一个跳跃 Action ，如果您有任何想法来制作整个 Action 而不仅仅是“传送”，我将不胜感激。

谢谢大家! 干杯。

Answer 1

必须做一些调整!

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

现在向右移动更流畅了!

//使用 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;
}

//使用 JQUERY

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

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

    return false;
}