Editing Move Draw Loop

There are many ways to do interactive programs.   The Move/Draw system shown here is often used in video games.  

Two functions are set up, to do different parts of the game.

The move function controls what is happening.  User input is read and any movement of objects occur in this function.

During the draw function everything in the game is at a standstill.  The job of the draw function is to put an image of the current state of the game onscreen. 

The example below makes an etch-a-sketch.  The move function checks the keys 37,38,39,40 (the arrow keys) and changes the variables cx and cy.  The draw function just draws a circle at cx,cy.   The screen is never cleared so whenever the circle moves it will leave a trail.

The last line of the program is <tt>run(move,draw)</tt>.  The run function repeatedly calls move then draw thirty times a second. 

You may give run an optional third parameter to adjust the speed <tt>run(move,draw,60)</tt> will make the move/draw calls 60 times a second.

<edcode>print("draw with the arrow keys");
var cx=320;
var cy=240;

function move() {
  if (keyIsDown(38)) cy-=1;
  if (keyIsDown(40)) cy+=1;
  if (keyIsDown(37)) cx-=1;
  if (keyIsDown(39)) cx+=1;
}

function draw() {
  fillCircle(cx,cy,6);
}

run(move,draw);
</edcode>