Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: html5 and js

  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    html5 and js

    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 \____
    ........................................................................................\



    Code:
    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
        ctx.beginPath();
        ctx.moveTo(0,70);
        ctx.lineTo(45,115);
        ctx.lineTo(250,115);
        ctx.lineTo(300,135);
        ctx.stroke();
        ctx.closePath();
     
      } 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?
    Last edited by jairo1218; 12-23-2010 at 12:34 AM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    Quote Originally Posted by jairo1218 View Post
    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. 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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •