Difference between revisions of "Critter"
From CodeStuff
(Created page with " <edcode> var critter = {x:320,y:240); fillCircle(critter.x,critter.y,5); </edcode>") |
|||
| Line 1: | Line 1: | ||
| + | ;Start with a simple critter. | ||
| + | : Make a variable called critter with x and y parts. | ||
| + | : Draw a dot to show it. | ||
| + | <edcode> | ||
| + | var critter = {x:320,y:240}; | ||
| + | fillCircle(critter.x,critter.y,5); | ||
| + | </edcode> | ||
| + | ;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. | ||
<edcode> | <edcode> | ||
| − | var critter = {x:320,y:240 | + | var critter = {x:320,y:240}; |
| − | fillCircle(critter.x,critter.y,5); | + | function move() { |
| + | critter.x+=1; | ||
| + | critter.y+=0.5; | ||
| + | } | ||
| + | |||
| + | function draw() { | ||
| + | clear(); | ||
| + | fillCircle(critter.x,critter.y,5); | ||
| + | }; | ||
| + | |||
| + | run(move,draw); | ||
| + | </edcode> | ||
| + | |||
| + | |||
| + | ;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 | ||
| + | <edcode> | ||
| + | var worldWidth=640; | ||
| + | var worldHeight=480; | ||
| + | |||
| + | var critter = {x:320,y:240}; | ||
| + | |||
| + | function move() { | ||
| + | critter.x+=1; | ||
| + | critter.y+=0.5; | ||
| + | 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; | ||
| + | } | ||
| + | |||
| + | function draw() { | ||
| + | clear(); | ||
| + | fillCircle(critter.x,critter.y,5); | ||
| + | }; | ||
| + | |||
| + | run(move,draw); | ||
| + | </edcode> | ||
| + | |||
| + | ;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. | ||
| + | |||
| + | <edcode> | ||
| + | var worldWidth=640; | ||
| + | var worldHeight=480; | ||
| + | |||
| + | var critter = {x:320,y:240,dx:1,dy:0.5}; | ||
| + | |||
| + | function move() { | ||
| + | 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 draw() { | ||
| + | clear(); | ||
| + | fillCircle(critter.x,critter.y,5); | ||
| + | }; | ||
| + | run(move,draw); | ||
</edcode> | </edcode> | ||
Revision as of 07:04, 21 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.
