View Full Version : html5 and js

12-22-2010, 08:15 PM
I want to know how to move a character on the path when you click the left or right arrow, but also when the left arrow is clicked it will switch between 4 images, making it look as though the characters is actually walking
left arrow = moves character to left on the path(walks to the left)
right arrow = moves character to right on the path(walks to the right)
up arrow = character jumps
This is my original code, it draws a path something like this \____

function drawMap(){
// get the canvas element using the DOM
var canvas = document.getElementById('map');

// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){

// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');

// Stroked Path

} else {
alert('Your broswer does not support Canvas, We recommend getting the latest version of google chrome for the best quality');

Can anyone point me in the right direction?

12-23-2010, 04:40 PM
Can anyone point me in the right direction?

more than likely I can't, but I do have a couple of ideas.

- This is probably considered cheating, but can you not just use an animated gif as your walking person icon? That way you only have to calculate the direction it's moving in and swap between two images (left- and right-moving).

- I have a little project that uses canvas for animation, you can see it here (http://xelawho.com/map/bus4.htm). Some of the code might be of interest in calculating angles, direction, etc. There's also a method for displaying the icon in case the browser is so lame that it doesn't support canvases (Hi, Bill!) which seems better than just popping an alert. I've also found that firefox does just as good job (if not better) with canvases as chrome.

Good luck!