Step 9 - Animate the character

Step 9: Animate the character

• Learn how to get things to move on Canvas using JavaScript

Score: 10

Evaluation & Deliverables:

Well, the original plan was to learn how to get things to move using JavaScript, but I actually used JQuery (which is pretty much JavaScript, right?). I am glad I did! Once I learned how to use the animate function, it was pretty manageable to get the character movements set. I turned to my brother-in-law for help on this one. He's a BYU grad in computer science and works as a programmer for a company in Provo. He walked me through the basics of JQuery, specifically on the animate function, adding and removing classes from CSS using JQuery, fade in and fade out, and getting functions to occur in a certain order. We built two character movements together and then I completed the rest on my own.

Anyways, the animations are up and running! They work great on my computer. I noticed when I run the game online that the first few animations are kind of choppy, but then it looks smooth. Here's a link to the game: https://googledrive.com/host/0Bwuo-xxRHyjmOXZSZHA4YmVRSE0/punctuation_project/game.html

Here's some of the scripting to get the character to move. This particular script tells the hero to collect his stolen chips.

function collectCorrect(callback) {
$('#hero').addClass('walking');
$('#hero').animate({
left: 920
}, 1010, 'linear', function(){
$('#hero').removeClass();
$('#hero').addClass('up walking');
$('#hero').animate({
top: 280
}, 700, 'linear', function(){
$('#hero').removeClass('walking');
$('#hero').animate({
top: 280
}, 300, 'linear', function(){
$('#items3').hide();
$('#items2').show();
$('#items1').hide();
$('#itemsOff').hide();
$('#hero').removeClass();
$('#hero').addClass('right walking');
$('#hero').animate({
left: 965
}, 400, 'linear', function(){
$('#hero').removeClass('right walking');
$('#hero').addClass('up');
$('#hero').animate({
top: 280
}, 300, 'linear', function(){
$('#items3').hide();
$('#items2').hide();
$('#items1').show();
$('#itemsOff').hide();
$('#hero').removeClass();
$('#hero').addClass('right walking');
$('#hero').animate({
left: 1010
}, 400, 'linear', function(){
$('#hero').removeClass('right walking');
$('#hero').addClass('up');
$('#hero').animate({
top: 280
}, 300, 'linear', function(){
$('#items3').hide();
$('#items2').hide();
$('#items1').hide();
$('#itemsOff').show();
$('#hero').removeClass();
$('#hero').addClass('down walking');
$('#hero').animate({
top: 370
}, 800, 'linear', function(){
$('#hero').removeClass();
$('#hero').addClass('right walking');
$('#hero').animate({
left: 1020
}, 40, 'linear', callback);
});
});
});
});
});
});
});
});
}