Question

我正在努力为我正在努力开发的js游戏中的角色制作动画。我不能使用画布，所以它只是DIV。使用当前的功能，我可以向左/向右移动我的角色，但它根本不是平滑的，它是一种“一步一步”。我一直在寻找答案，但我发现的唯一解决方案是使用画布。

这是我的代码（全屏效果更好，但有点位置）：

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>

另外，我正在尝试实施一个跳跃动作，如果你有任何想法来制作整个动作而不仅仅是'传送'，我会很感激。

谢谢你们！欢呼声。

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

Answer 2

由于您已标记为jquery，我建议您使用jquery animate，我尝试了类似下面的内容，这样可以提供顺畅的动作，但为了使其完美，您需要一点点工作。您还可以添加jquery-easing.js并对动画执行更完美的操作。试一下。同样代表你的跳跃和跌落。 animate会在上述情景中为您提供帮助。

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

Answer 3

好的，所以我基本上用这个简单的脚本完成了它：

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

感谢每一个人帮助我，这是工作代码： http://codepen.io/PaulBorensztein/pen/PwMGYO

现在我正在寻求实际的跳跃，关于这个过程的任何想法吗？

如何在Javascript（没有画布）中平滑移动角色

3 个答案: