HTML 5 Canvas/Javascript Animation question . how to write code to enable the space bar to start and stop animation of rectangle? Code given?

Answer 1

I think the following could award me 10 points:

http://ideone.com/YBD7xy



It adds and event listener like this:

window.addEventListener( "keydown", doKeyDown, true);



doKeyDown is executed upon a "keydown"-event

function doKeyDown(e)

{

if (e.keyCode != 32) // 32 is code for space bar key

return;



if (g_id == 0){

g_sx = g_canvas.width / 2;

// Here you could determine, where on the y-axis the square would start drawing

// g_sy = 0;

g_id = setInterval(rectLoop, s_interval);

}

else {

window.clearInterval(g_id);

g_id = 0;

}

}



for the square and for the circle there are now two separate sets of global variables.



I hope this helps.

Answer 2

1) write two functions. one to draw a red circle of radius 35 and the other to draw a blue rectangle of width 4 and length 8.



The red circle should move across the screen horizontally, left to right and then right to left at a y-position of 80;



And ONLY on pressing the space key, the blue rectangle should move vertically from the bottom of the screen to the top of the screen. The x-position of the blue rectangle is at the centre of the canvas.



The red circle should move continuously without interruption .

Answer 3

This is the real question :



1) write two functions. one to draw a red circle of radius 35 and the other to draw a blue rectangle of width 4 and length 8.



The red circle should move across the screen horizontally, left to right and then right to left at a y-position of 80;



And ONLY on pressing the space key, the blue rectangle should move vertically from the bottom of the screen to the top of the screen. The x-position of the blue rectangle is at the centre of the canvas.



The red circle should move continuously without interruption .

Answer 4

Top 3D Animation Program - http://3dAnimationCartoons.com/?TrFI