The power of Javascript
JavaScript is a wonderful tool, but I think most developers overlook it’s raw power.
Yes, it is nice to customize your form with some client side validation, maybe even flash some red text if someone goes wrong, but unfortunately, most developers stop at that when they could do so much more.
To prove my point, I’m going to write a little tutorial for you. Today I’ll teach you how animate Megaman on your screen.
I can already hear some of you saying, “But Andre, why would I animate something with JavaScript when a nice little gif will do the trick.”
A valid question and the answer is simple: control. If you animate with JavaScript you will be able to control the frame rate, movement, direction, orientation, even collision detection.
We probably don’t want to turn our browser into a video game (or do we?) but what will be covered here may inspire you to some new design element in your site that you hadn’t thought about before.
So lets get started.
The first thing we need for our Megaman animation, is Megaman himself.
Here you go:
So what are we looking at? Well this is a singular image of a running loop animation for Megaman. Each frame is spaced 50 pixels apart. If you want to make your own custom loop image, be sure to use a reference point in each frame to make sure the animation looks smooth.
Now let’s put this bad boy in our page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Test Scripts</title>
<style type=”text/css”>
.animate {
display: block;
width: 50px;
height: 50px;
background: url(mega_run.gif) repeat 0 0;
position:absolute;
left:0px;
}
</head>
<body>
<span id=’megaman’ class=’animate’></span>
</body>
</html>
Notice that we’re using a span with a background image instead of a img tag. The reason for this is because we want to be able to rapidly shift the image position relative to the element. The CSS command background-position is what we want.
We’ll call a function that will advance our image 50 pixels to the right, wait a predetermined amount of time and call itself again. Make sure you are using jQuery, our framework of choice.
var frameRate = 100;
var frameWidth = 50;
var frame = 1;
function animate() {
setTimeout(function() {
var framePosition = (frame++) * frameWidth;
$(‘#megaman’).css(“background-position”, “-”+framePosition+”px 0″ );
if (true) {
animate();
}
}, frameRate);
}
Now if you open your page and activate this function, you’ll see Megaman running in place! Notice the parameter frameRate. Yep, we can control how fast our blue bomber is animated. 
Awesome right?
But Megaman should be actually moving am I right? Lets expand our code to make him run.
var posX = 0;
var speed = 10;
var frameRate = 100;
var frameWidth = 50;
var frame = 1;
function animate() {
setTimeout(function() {
posX+=speed;
var framePosition = frame * frameWidth;
$(‘#megaman’)
.css(“background-position”, “-”+framePosition+”px 0″ )
.css(“left”, posX+”px”);
if (true) {
animate();
}
}, frameRate);
}
Look at him go! Umm wait… Megaman where are you going?
…
Well there he goes.
If you ran that script your probably noticed Megaman started running and never stopped!
We should make him turn around when he reaches the end of the screen.
var screenWidth = $(window).width() – $(‘#megaman’).width();
var posX = 0;
var speed = 10;
var frameRate = 100;
var frameWidth = 50;
var frame = 1;
var direction = “left”;
function animate() {
setTimeout(function() {
if (posX >= screenWidth ) {
direction = “right”;
flip($(‘#megaman’));
} else if (posX <= 0) {
direction = “left”;
flip($(‘#megaman’));
}
if (direction == “left” ) { posX+=speed; }
else { posX-=speed; }
var framePosition = frame * frameWidth;
$(‘#megaman’)
.css(“background-position”, “-”+framePosition+”px 0″ )
.css(“left”, posX+”px”);
if (true) {
animate();
}
}, frameRate);
}
function flip(element) {
if (direction != “left” ) {
element
.css(“-moz-transform”, “scaleX(-1)”)
.css(“-o-transform”, “scaleX(-1)”)
.css(“-webkit-transform”, “scaleX(-1)”)
.css(“transform”, “scaleX(-1)”)
.css(“filter”, “FlipH”)
.css(“-ms-filter”, “FlipH” );
} else {
element
.css(“-moz-transform”, “scaleX(1)”)
.css(“-o-transform”, “scaleX(1)”)
.css(“-webkit-transform”, “scaleX(1)”)
.css(“transform”, “scaleX(1)”)
.css(“filter”, “FlipH”)
.css(“-ms-filter”, “FlipH” );
}
}
I think this is a good starting point for now. Next time I’ll expand on this to make Megaman bounce up and down as well as having him bounce against other html elements!
FIU Web Communications is a full service web team that provides support and consulting for departments at FIU. If you need help in implementing any of your web needs, please contact us.
If you enjoyed this post, please consider leaving a comment or subscribing via rss feed or email to have future articles delivered to you.
Comments are closed for this entry.