HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

Often you'll prefer to move an element on JavaScript's canvas. This process is actually very similar to the rotation mechanism for HTML5 programming. Here's some code that moves an image and wraps it to the other side when it leaves the canvas.

 //from wrap.html
 var drawing;
 var con;
 var goofyPic;
 CANV_HEIGHT = 200;
 CANV_WIDTH = 200;
 SPR_HEIGHT = 50;
 SPR_WIDTH = 40;
 var x = 0;
 var y = 100;
 var dx = 10;
 var dy = 7;
 function init(){
 drawing = document.getElementById("drawing");
 con = drawing.getContext("2d");
 goofyPic = document.getElementById("goofyPic");
 setInterval(draw, 100);
 }
 function draw(){
 //clear background
 con.clearRect(0, 0, 200, 200);
 //move the element
 x += dx;
 y += dy;
 //check for boundaries
 wrap();
 //draw the image
 con.drawImage(goofyPic, x, y, SPR_WIDTH, SPR_HEIGHT);
 //draw a rectangle
 con.strokeStyle = "red";
 con.lineWidth = 5;
 con.strokeRect(0, 0, CANV_WIDTH, CANV_HEIGHT);
 } // end draw
 function wrap(){
 if (x > CANV_WIDTH){
  x = 0;
 }
 if (x < 0){
  x = CANV_WIDTH;
 }
 if (y > CANV_HEIGHT){
  y = 0;
 } // end if
 if (y < 0){
  y = CANV_HEIGHT;
 }
 } // end wrap

The wrap code is very similar to the rotation program. It has a few different features. Here's what it does:

  1. Keeps track of the sprite position.

    The sprite's position will change now, so the important variables are X and Y, used to track where the sprite is.

  2. Contains variables for the sprite's motion.

    The dx variable stands for difference in x, and it is used to show how much the x value changes each frame. Likewise, dy is used to show how much the y value changes in each frame. x, y, dx, and dy are all created outside the function context.

  3. Moves the element values.

    In every frame (in the draw() function), add dx to x and add dy to y.

  4. Checks for boundaries.

    Here, a new function called wrap() was created to check for boundary conditions.

The code is pretty straightforward. If the sprite's x value exceeds the width of the canvas (meaning it has moved to the right border of the canvas), reset the x value to 0 (moving it to the left). Use a similar calculation to check the other borders and reset the image to the opposite side.

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: