JavaScript Playground

I’ve been doing a bit of JavaScript programming recently, and I came up with the “Creature Playground” (which is primarily aimed at teaching). The full version is here. But, here’s a little taster (click on “Create” a few times):

In the full version, you can modify the creature’s code directly and play around with different stuff. I couldn’t manage to embed it in this blog properly unfortunately …

The source code for this little ditty is:

function random(min,max) {
  return min + Math.floor(Math.random() * (max-min));
}

function create() {
  var canvas = document.getElementById("display");
  var display = canvas.getContext("2d");
  var x = random(50,350);
  var y = random(50,350);
  var width = 10;
  var height = 10;
  var dx = 5;
  var dy = 5;

  function onTick() {
    // this is called every 25ms
    display.fillStyle = "#FFFFFF";
    display.fillRect(x,y,width,height);
    x = x + dx;
    y = y + dy;
    if(y <= 5 || y >= 385) { dy = -dy; }
    if(x <= 5 || x >= 385) { dx = -dx; }
    display.fillStyle = "#000000";
    display.fillRect(x,y,width,height);
  }
  // draw the border
  display.fillStyle="#F0F0F0";
  display.strokeRect(0,0,400,400);
  // start the timer
  setInterval(onTick,25);
}

I must say, it’s amazing how easy it is to get stuff done in [[JavaScript]]!!

Be Sociable, Share!

•