Difference between revisions of "Critter"
From CodeStuff
| Line 96: | Line 96: | ||
run(move,draw); | run(move,draw); | ||
</edcode> | </edcode> | ||
| + | |||
;Make more critters | ;Make more critters | ||
| Line 102: | Line 103: | ||
:make a function to draw a single critter | :make a function to draw a single critter | ||
:use the functions to draw each critter in turn. | :use the functions to draw each critter in turn. | ||
| − | |||
<edcode> | <edcode> | ||
var worldWidth=640; | var worldWidth=640; | ||
| Line 153: | Line 153: | ||
drawCritter(critterGerald); | drawCritter(critterGerald); | ||
drawCritter(critterLucy); | drawCritter(critterLucy); | ||
| + | } | ||
| + | |||
| + | run(move,draw); | ||
| + | </edcode> | ||
| + | |||
| + | |||
| + | ;put the critters in a list. | ||
| + | :instead of moving and drawing critters by name, make a list of critters | ||
| + | :make a variable called allCritters to hold a list of critters | ||
| + | :use allCritters.each() to call the move and draw functions for every critter | ||
| + | <edcode> | ||
| + | var worldWidth=640; | ||
| + | var worldHeight=480; | ||
| + | |||
| + | var critterBrian = {x:320,y:240,dx:1,dy:0.5}; | ||
| + | var critterFrank = {x:120,y:140,dx:1,dy:0.5}; | ||
| + | var critterSally = {x:120,y:340,dx:1,dy:0.5}; | ||
| + | var critterGerald = {x:420,y:140,dx:1,dy:0.5}; | ||
| + | var critterLucy = {x:420,y:340,dx:1,dy:0.5}; | ||
| + | |||
| + | var allCritters = [critterBrian,critterFrank,critterSally,critterGerald,critterLucy]; | ||
| + | |||
| + | function moveCritter(critter) { | ||
| + | critter.x+=critter.dx; | ||
| + | critter.y+=critter.dy; | ||
| + | |||
| + | if (critter.x<0) critter.x+=worldWidth; | ||
| + | if (critter.x>worldWidth) critter.x-=worldWidth; | ||
| + | if (critter.y<0) critter.y+=worldHeight; | ||
| + | if (critter.y>worldHeight) critter.y-=worldHeight; | ||
| + | |||
| + | |||
| + | var tweakX = Math.random()-0.5; | ||
| + | var tweakY = Math.random()-0.5; | ||
| + | //tweakX and tweakY now have random values between -0.5 and +0.5 | ||
| + | |||
| + | critter.dx+=tweakX; | ||
| + | critter.dy+=tweakY; | ||
| + | |||
| + | critter.dx*=0.99; | ||
| + | critter.dy*=0.99; | ||
| + | } | ||
| + | |||
| + | function drawCritter(critter) { | ||
| + | fillCircle(critter.x,critter.y,5); | ||
| + | }; | ||
| + | |||
| + | function move() { | ||
| + | allCritters.each(moveCritter); | ||
| + | } | ||
| + | |||
| + | function draw() { | ||
| + | clear(); | ||
| + | allCritters.each(drawCritter); | ||
} | } | ||
run(move,draw); | run(move,draw); | ||
</edcode> | </edcode> | ||
Revision as of 11:21, 29 May 2014
- Start with a simple critter.
- Make a variable called critter with x and y parts.
- Draw a dot to show it.
- Make the critter move
- make a move function to change the critter x and y.
- Make a draw function to clear the screen and draw the critter at the new position.
- make a wrap-around world
- set a world width and a world height
- if the critter is past the left edge (x<0) move it to the right edge
- if the critter is past the right edge (x>worldWidth) move it to the left edge
- if the critter is past the top edge (y<0) move it to the bottom edge
- if the critter is past the bottom edge (y>worldHeight) move it to the top edge
- give the critter some direction
- add dx and dy parts to the critter
- instead of adding fixed amounts to the critter position each time add the dx and dy values
- change the dx and dy values a little bit each time it moves.
- Make more critters
- We'll make several critters with individual names
- make a function to move a single critter
- make a function to draw a single critter
- use the functions to draw each critter in turn.
- put the critters in a list.
- instead of moving and drawing critters by name, make a list of critters
- make a variable called allCritters to hold a list of critters
- use allCritters.each() to call the move and draw functions for every critter
