Lab For Do Game

// กำหนดพื้นที่สำหรับวาดรูปวงกลม
<div id="circleArea" style='width:600px; height: 400px; position:absolute'></div>
<script type="text/javascript">
// array สำหรับเก็บ div ของวงกลมทั้งหมด
var arDiv = new Array();
for(var i=0; i<50; i++){
 var cvObj = document.createElement('canvas');  // สร้าง element
 arDiv.push(cvObj);   // จัดเก็บ 
 cvObj.style.position = "absolute";
 
 // random position
 cvObj.style.left = (Math.random()*300).toString()+"px";
 cvObj.style.top = (Math.random()*300).toString()+"px";
 cvObj.speed = parseInt(Math.random()*5);
 
 
  // random ค่าสี
  var color = "#";
 for(var j=0; j<3; j++){
	var preColor = (Math.floor(Math.random()*255)).toString(16);
	if(preColor.length == 1){
	  preColor = "0"+preColor;
	}else if(preColor.length == 0){
	  preColor = "00";
	}
	color += preColor;
 }
 // เรียก context เพื่อจะทำการวาด circle 
 var ctx = cvObj.getContext('2d');
 ctx.fillStyle = color;
 ctx.beginPath();
 ctx.arc(10,10,10,0,Math.PI*2,true);
 ctx.closePath();
 ctx.fill();
 var a = document.getElementById("circleArea");
 if(a != null){
        // เติมลงใน circle div
 	a.appendChild(cvObj);
 }else{
	alert('area div is null');
 }
// update
 function updateObj(){       
 	for(var i=0; i< arDiv.length; i++){
 		var obj = arDiv[i];   
		obj.style.left = (parseInt(obj.style.left)+obj.speed).toString()+("px");                
		if(parseInt(obj.style.left) > 400){
			obj.style.left = 0;
		}
 	}
 }
 var tInterval = setInterval(updateObj, 100);
}
</script>