A bouncing box

<html>
<head>
<style>
.car
{
background-color:gray;
width:10px;
height:10px;
}
.grass{background-color:green;}
</style>
</head>
<body onload="">
<script>
var cars = new Object();
function CreateCars(){
     writting('<div id="car"><table class="car"><tr><td></td></tr></table></div>');
     cars.visual = document.getElementById('car');
     cars.visual.style.position = "absolute";
     cars.visual.style.top = "100px";
     cars.visual.style.left = "100px";
     cars.p = new Object();
     cars.p.x = 100;
     cars.p.y = 100;
     cars.v = new Object();
     cars.v.x = 7;
     cars.v.y = 9;
}
function sta(){
      if (cars.p.x > 1010 || cars.p.x <10){
         cars.v.x = cars.v.x *-1;
      }
      if (cars.p.y > 200 || cars.p.y <100){
         cars.v.y = cars.v.y *-1;
      }
      cars.p.x = cars.p.x + cars.v.x;
      cars.p.y = cars.p.y + cars.v.y;
      cars.visual.style.left = cars.p.x + "px";
      cars.visual.style.top = cars.p.y + "px";

      setTimeout('sta();', 100);
}

function writting(text){
      document.getElementById('edspace').innerHTML = document.getElementById('edspace').innerHTML + text;
}
</script>
<input type="button" value="add" onclick="CreateCars();" >
<input type="button" value="move" onclick="sta();">
<div style = "position:absolute;left:10px;top:100px;"><table class="grass"><tr><td width="1000px" height="100px"></td></tr></table>
</div>
<x id="edspace"></x>
</body>