asked on

How to make a moving character

How would you make a character (like Mario) move around the screen?

Using jquery is the easiest way. http://api.jquery.com/animate/

http://jsbin.com/sifijiwasa/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
  $(function(){
    $( "#clickme" ).click(function() {
      $( "#book" ).animate({
        opacity: 0.25,
        left: "+=50",
        height: "toggle"
        }, 5000, function() {
    // Animation complete.
    });
  });
});

  </script>
</head>
<body>
<div>
  <a href="#" id="clickme">
    Click here
  </a>
</div>
  
<img id="book" src="http://experts-exchange.com/images/experts-exchange/topHeader/expertsExchangeLogo.svg" alt="" width="100" height="123"
  style="position: relative; left: 10px;">
</body>
</html>

Open in new window

Start by looking at some tutorials and see if anything sparks for you.

http://api.jquery.com/animate/
http://www.w3schools.com/jquery/jquery_animate.asp
http://www.w3schools.com/howto/howto_js_animate.asp
https://www.codecademy.com/courses/animate-your-name/0/1

You can also find libraries specific to animation
http://thednp.github.io/kute.js/#
http://anime-js.com/
https://visionmedia.github.io/move.js/
http://velocityjs.org/
http://bouncejs.com/

Julian Hansen

This article might be of some use

https://www.experts-exchange.com/articles/13057/Simple-animation-using-JQuery.html

You can see a working sample here

ASKER CERTIFIED SOLUTION

Leonidas Dosas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial