Move Draw Loop - Revision history

Lerc: moved Move Draw loop to Move Draw Loop

2012-01-31T01:15:53Z

Lerc at 04:42, 30 January 2012

2012-01-30T04:42:39Z

Lerc: Created page with "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...."

2012-01-30T04:41:23Z

Created page with "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...."

New page

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>

← Older revision	Revision as of 01:15, 31 January 2012
(No difference)

@@ Line 1: / Line 1: @@
 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.
+Two functions are set up, each to do a different part 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.
+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 on the screen.
 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.