Difference between revisions of "Critter"

From CodeStuff
Jump to: navigation, search
(Created page with " <edcode> var critter = {x:320,y:240); fillCircle(critter.x,critter.y,5); </edcode>")
 
 
(4 intermediate revisions by the same user not shown)
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>
 
</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>
 +
 +
 +
;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.
 +
<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};
 +
 +
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() {
 +
  moveCritter(critterBrian);
 +
  moveCritter(critterFrank);
 +
  moveCritter(critterSally);
 +
  moveCritter(critterGerald);
 +
  moveCritter(critterLucy);
 +
}
 +
 +
function draw() {
 +
  clear();
 +
  drawCritter(critterBrian);
 +
  drawCritter(critterFrank);
 +
  drawCritter(critterSally);
 +
  drawCritter(critterGerald);
 +
  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);
 +
</edcode>
 +
 +
Now let's try making some [[CleverCritters]]

Latest revision as of 20:27, 5 June 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

Now let's try making some CleverCritters

Retrieved from "https://fingswotidun.com/code/index.php?title=Critter&oldid=1269"