sprite animation testing

In this example below you will see how to do a sprite animation testing with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by cmcgraw, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright cmcgraw ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>sprite animation testing</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="player-sprite">
  <img id="sprite-img" src="https://res.cloudinary.com/dtwyohvli/image/upload/v1526221355/right-move-0_egtc3x.png">
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/cmcgraw/sprite-animation-testing-RyJLWM */
#player-sprite {
  position: absolute;
  top: 200px;
  left: 100px;
  height: 64px;
  width: 32px;
}

.move-right {
  transform: translate(400px);
  transition: transform 5000ms linear;

/*Downloaded from https://www.codeseek.co/cmcgraw/sprite-animation-testing-RyJLWM */
var rightMove0 = "https://res.cloudinary.com/dtwyohvli/image/upload/v1526221355/right-move-0_egtc3x.png";
var rightMove1 = "https://res.cloudinary.com/dtwyohvli/image/upload/v1526221355/right-move-1_csldxh.png";
var rightMove2 = "https://res.cloudinary.com/dtwyohvli/image/upload/v1526221355/right-move-2_yjej2z.png";

$(document).ready(function() {

/* ------------------------- Variable Declarations ------------------------- */
  
  var $spriteImg = $("#sprite-img");
  var loopTimer = 0;
  var loopCount = 1;
  
/* ------------------------- Function Declarations ------------------------- */
 
  function moveZero() {
    setTimeout(function() {
      $spriteImg.attr("src", rightMove0);
    }, loopTimer);
  }
  
  
  function moveOne() {
    setTimeout(function() {
      $spriteImg.attr("src", rightMove1);
    }, loopTimer);
  }
  
  
  function moveTwo() {
    setTimeout(function() {
      $spriteImg.attr("src", rightMove2);
    }, loopTimer);
  }
  
  
  function walkLoop() {  
    moveZero();
    loopTimer += 90;
    
    moveOne();
    loopTimer += 90;
    
    moveTwo();
    loopTimer += 90;
    
    moveOne();
    loopTimer += 90;
    
    loopCount++;
      
    if (loopCount <= 14) { 
      walkLoop();
    }
    else {
      moveZero();
    }
  }
  
/* ---------------------------- Event Handlers ---------------------------- */
  
  $("#player-sprite").on("click", function() {
    $(this).addClass("move-right");    
    walkLoop();
  });
    
});

Comments