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

3 回答

• 2

  不得不做几个调整！

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

  回复于 2024-05-18T23:07:52+08:00
• 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

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

  回复于 2024-05-18T23:07:52+08:00
• 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>
  

  回复于 2024-05-18T23:07:52+08:00