Hallo, ich habe heute ein bisschen rum gespielt und bin auf ein Problem gestoßen.

Es geht darum das ich mit einer Funktion Boxen erstelle, und diese dann mit einer weiteren Funktion "herunterfallen" lasse.

Das Problem ist, dass ich egal wie viele Boxen ich erstelle, jeweils nur eine herunterfallen lassen kann. Das Herunterfallen geschieht über eine Funktion welche per timeout eine Weitere aufruft, vielleicht könnt ihr mir sagen wie ich das Problem lösen könnte

In Zeile 94 erstelle ich das Spielfeld, in Zeile 95 und 96 2 Boxen und in und Zeile 97 und 98 weise ich den Boxen die Physik zu, welche sie herabfallen lässt, zumindest eine, hier der Code:

Code:
<!DOCTYPE html>
<html>

<head>
  <title>JavaScript Graphic Engine</title>

  <meta charset="ISO-8859-1">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="keywords" content="">
<style>
* {
  margin: 0;
  padding: 0;
}
</style>
<script>

  /* fehleranalyse aus übersichtsgründen entfernt */

  function createArea(name, resX, resY, color)
  {
    /* fehleranalyse aus übersichtsgründen entfernt */

    // Inputs okay, create Element:
    var element      = document.createElement("div");
    var elementStyle = document.createAttribute("style");
        elementStyle.nodeValue = "width: "+ resX +"px !important; height: "+ resY +"px !important; background-color: "+ color +" !important;";
    var elementId = document.createAttribute("id");
        elementId.nodeValue = name;
    element.setAttributeNode(elementStyle);
    element.setAttributeNode(elementId);
    var motherDiv = document.getElementById("playground");
    motherDiv.appendChild(element);
    return false;
  }

  function createObject(area, name, resX, resY, posX, posY, color)
  {
    /* fehleranalyse aus übersichtsgründen entfernt */

    // Inputs okay, create Element:
    var element      = document.createElement("div");
    var elementStyle = document.createAttribute("style");
        elementStyle.nodeValue = "position: absolute; left: "+posX+"px; top: "+posY+"px; width: "+ resX +"px !important; height: "+ resY +"px !important; background-color: "+ color +" !important;";
    var elementId = document.createAttribute("id");
        elementId.nodeValue = name;
    element.setAttributeNode(elementStyle);
    element.setAttributeNode(elementId);
    var motherDiv = document.getElementById(area);
    motherDiv.appendChild(element);
    return false;
  }

  function addPhysicGravity(element, intense, step)
  {
    object = document.getElementById(element);
    area = document.getElementById(element).parentNode;
    moveSpeed = intense;
    moveStep = step;
    var fallDistance = area.offsetHeight - (object.offsetTop + object.offsetHeight);
    /* fehleranalyse aus übersichtsgründen entfernt */
    counter = (fallDistance/moveStep);
    window.setTimeout("fallDown(object, moveSpeed, moveStep, counter)", moveSpeed);
  }

  function fallDown(element, intense, step, counter)
  {
    moveStep = step;
    newPosition = element.offsetTop + moveStep + "px";
    element.style.top = newPosition;
    newCounter = counter - 1;
    moveSpeed = intense;
    if(1<counter)
    {
      window.setTimeout("fallDown(object, moveSpeed, moveStep, newCounter)", moveSpeed);
    }
    else
    {
      if(object.offsetTop + object.offsetHeigt != object.parentNode.offsetHeight)
        object.style.top = object.parentNode.offsetHeight - object.offsetHeight+"px";
    }
  }

</script>
</head>

<body>
  <div id="playground">
    <!-- manual test element: -->
    <div style="position: absolute; width: 50px; height: 50px; left: 100px; top: 200px; background: pink;" id="block"></div>
  </div>
<script>
  createArea('room01', 450, 450, 'red');
  createObject('room01', 'obj01', 50, 50, 270, 300, 'blue');
  createObject('room01', 'obj02', 50, 50, 200, 300, 'green');
  addPhysicGravity('obj01', 1, 1);
  addPhysicGravity('obj02', 1, 1);
</script>
</body>
</html>
Liebe Grüße