usagi · November 1, 2012 02:41
diff --git a/hoge.html b/hoge.html
 <!DOCTYPE HTML>
 <html>
 <head>
 <script>
 var mybutton=function(name_,x_,y_){
  this.name = name_;
  this.x = x_;
  this.y = y_;
  this.radius = 10;
  this.time = 0;
  this.on_click = function(){
    console.log(this.name);
  };
  this.on_update = function(){
    this.time += 500;
    this. x += 10 * Math.sin(this.time / 1000);
  };
  this.on_draw = function(){
    context.beginPath();
    context.arc(this.x,this.y,this.radius,0,2*Math.PI,false);
    context.stroke();
  };
 };

 var os = [
  new mybutton("one",10,10),
  new mybutton("two",40,40),
 ];

 var context = null;

 var update = function(){
  for(var i in os)
    os[i].on_update();
 };

 var draw = function(){
  context.clearRect(0,0,500,500);
  for(var i in os)
    os[i].on_draw();
 };

 var update_and_draw = function(){
  update();
  draw();
 };

 var click = function(e){
  //document.getElementById("ccc").innerHTML=e.layerX;
  var x = e.layerX;
  var y = e.layerY;
  for(var i in os){
    var o = os[i];
    var dx = x - o.x;
    var dy = y - o.y;
    var d = Math.sqrt(dx*dx+dy*dy);
    if(d <= o.radius)
      o.on_click();
  }
 };

 window.addEventListener("load",function(){
  var ddd = document.getElementById("ddd");
  ddd.addEventListener("click",click);
  context = ddd.getContext("2d");
  setInterval(update_and_draw,500);
 });
 </script>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>無題ドキュメント</title>
 </head>

 <body>
 <canvas id="ddd" width="500" height="500" style="border:solid 1px #F39">
 </canvas>
 <div id="ccc">
 </div>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<script>
	var mybutton=function(name_,x_,y_){
	this.name = name_;
	this.x = x_;
	this.y = y_;
	this.radius = 10;
	this.time = 0;
	this.on_click = function(){
	console.log(this.name);
	};
	this.on_update = function(){
	this.time += 500;
	this. x += 10 * Math.sin(this.time / 1000);
	};
	this.on_draw = function(){
	context.beginPath();
	context.arc(this.x,this.y,this.radius,0,2*Math.PI,false);
	context.stroke();
	};
	};

	var os = [
	new mybutton("one",10,10),
	new mybutton("two",40,40),
	];

	var context = null;

	var update = function(){
	for(var i in os)
	os[i].on_update();
	};

	var draw = function(){
	context.clearRect(0,0,500,500);
	for(var i in os)
	os[i].on_draw();
	};

	var update_and_draw = function(){
	update();
	draw();
	};

	var click = function(e){
	//document.getElementById("ccc").innerHTML=e.layerX;
	var x = e.layerX;
	var y = e.layerY;
	for(var i in os){
	var o = os[i];
	var dx = x - o.x;
	var dy = y - o.y;
	var d = Math.sqrt(dxdx+dydy);
	if(d <= o.radius)
	o.on_click();
	}
	};

	window.addEventListener("load",function(){
	var ddd = document.getElementById("ddd");
	ddd.addEventListener("click",click);
	context = ddd.getContext("2d");
	setInterval(update_and_draw,500);
	});
	</script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>無題ドキュメント</title>
	</head>

	<body>
	<canvas id="ddd" width="500" height="500" style="border:solid 1px #F39">
	</canvas>
	<div id="ccc">
	</div>
	</body>
	</html>