Fire JS Bin - WindyLeaves - 1

You can jump to the latest bin by adding /latest to your URL

z

Find

⟲

Replace

⊗ All Replace

soundManager.url = '/js/vendor/'; // directory where SM2 .SWFs live
 
// Note that SounndManager will determine and append the appropriate .SWF file to the URL.
 
// disable debug mode after development/testing..
soundManager.debugMode = false;
 
// Option 2b: More flexible onready + createSound methods (good for multiple use cases)
 
soundManager.onready(function(oStatus) {
  // check if SM2 successfully loaded..
  if (oStatus.success) {
    // SM2 has loaded - now you can create and play sounds!
    var mySound = soundManager.createSound({
      id: 'aSound',
      url: '/attach/wind.mp3'
      // onload: [ event handler function object ],
      // other options here..
    });
    loopSound('aSound');
  }
});
 
function loopSound(soundID) {
  window.setTimeout(function() {
    soundManager.play(soundID,{onfinish:function(){loopSound(soundID);}});
  },1);
}

var MAX_HEIGHT  = 300;
var MAX_WIDTH   = 600;
var MARGIN      = 2;
var TOP_WALL    = 0          - MARGIN;
var BOTTOM_WALL = MAX_HEIGHT + MARGIN;
var LEFT_WALL   = 0          - MARGIN;
var RIGHT_WALL  = MAX_WIDTH  + MARGIN;
var LEAVES      = 50;
var RESISTANCE  = 1.3;
var GRAVITY     = 0;
var GUST        = 1;
 
function aLeaf(id, parent, x, y, onClick)
/*
 *      This is for leaves.
 */
{
  this.id = id;
  this.x  = x;
  this.y  = y;
  this.dx = (Math.random() * 10) - 5;
  this.dy = (Math.random() * 10) - 5;
  this.ddx = Math.random() - 0.5;
  this.ddy = Math.random() - 0.5;
 
  this.pageElement = document.createElement("div");
  this.pageElement.codeObject = this;
  this.pageElement.setAttribute("id", "l" + this.id);
  this.pageElement.className = "leaf";
  this.pageElement.style.background = "black";
  this.pageElement.style.position = "absolute";
  this.pageElement.style.width  = "4px";
  this.pageElement.style.height = "2px";
  this.pageElement.setAttribute('title', 'a leaf');
  parent.insertBefore(this.pageElement, null);
 
  if(typeof(onClick) != "undefined") this.pageElement.onmousedown = onClick;
 
  this.move = function ()
  {
    this.ddx = gustX(x, y);
    this.ddy = gustY(x, y);
 
    this.dx += this.ddx;
    this.dy += this.ddy;
 
    this.dx /= RESISTANCE;
    this.dy /= RESISTANCE;
//    if(Math.abs(this.dy) > MAX_SPEED) this.dy = (this.dy / Math.abs(this.dy)) * MAX_SPEED;
 
    this.x += this.dx;
    this.y += this.dy;
 
    if(this.y < TOP_WALL)    this.y = BOTTOM_WALL; 
    if(this.y > BOTTOM_WALL) this.y = TOP_WALL; 
    if(this.x < LEFT_WALL)   this.x = RIGHT_WALL; 
    if(this.x > RIGHT_WALL)  this.x = LEFT_WALL; 
 
    this.pageElement.style.left = parseInt(this.x) + "px";
    this.pageElement.style.top  = parseInt(this.y) + "px";
  //  sky.innerHTML += this.x + " ";
  }
}
 
gX = 0;
gY = 0;
gDX = 0;
gDY = 0;
function gustX(x, y)
{
//  return (Math.cos(gDX + (x / 100) + (y / 200)) + gX);
  return (Math.cos((x / (MAX_WIDTH / 2))) + gX);
}
function gustY(x, y)
{
//  return (Math.cos(gDY + (x / 100) + (y / 200)) + gY);
  return (Math.cos((y / (MAX_HEIGHT / 2))) + gY);
}
 
var thisStep = 0;
function startStepping() {stepper();}
function stepper()
{
  if (thisStep % 33 == 0) //every second
  {
//    gDX = Math.random() * Math.PI;
//    gDY = Math.random() * Math.PI;
    gX  = Math.random() + GUST;
    gY  = Math.random() + GRAVITY;
  }
 
  for (x in leaves) leaves[x].move();
 
  thisStep++;
  if (thisStep >= 400000) thisStep = 0; // to prevent overflow
  setTimeout("stepper();", 30);
}
 
var leaves = new Array();
var sky;
var score;
function onLoad()
{
  sky = document.getElementById("sky");
  score = document.getElementById("score");
  for (var x = 0; x < LEAVES; x++)
  {
    leaves.splice(0, 0, new aLeaf(x, sky, Math.random() * MAX_WIDTH, Math.random() * MAX_HEIGHT, ouch));
  }
  startStepping();
}
 
var myScore = 0;
var ouch = function(e)
{
  myScore++;
  score.innerHTML = "Score: " + myScore;
  return 0;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title>Leaves</title> 
    <meta name="keywords" http-equiv="keywords" content="Leaves floating around." /> 
    <meta name="description" content="Guess what query term on Google Images produces the pictures below to achieve new levels of stardom!" /> 
    <link REL="SHORTCUT ICON" HREF="http://derek.gopherwoodstudios.com/favicon.ico">

<script type="text/javascript" src="/js/vendor/soundmanager2.js"></script>

</head> 
  <body onLoad="onLoad();"> 
   <div style="position: absolute; margin: -160px 0 0 -300px; left: 50%; top: 50%; width: 600px;"> 
     <div id="sky" style="position: relative; border: 5px solid black; width: 600px; height: 300px; background: url(/attach/bg.jpg) center center repeat-x;"></div> 
    <div style="width: 610px;"><div style="font-weight:bold; float: right;">a really simple game by <a href="http://derek.gopherwoodstudios.com/">Derek</a></div><div id="score" style="color: red; font-weight: bold;"></div></div> 
    <div style="padding: 40px 0 0 0; text-align: center; font-weight: bold; font-size: 12px; font-family: candara, arial, sans-serif;"><a href="http://gopherwoodstudios.com/?t=Wind:" style="color: #aaa; text-decoration: none;">Have an idea to improve this game?</a></div> 
   </div> 
   <a href="http://gopherwoodstudios.com/game.asp" class="corner-link"><span>More Games</span></a>

</body> 
</html>