spotco · January 23, 2014 21:03
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
 <head>
    <title>HTML5 Canvas</title>
    <script>
 function get_canvas_cursor_position(canvas, evt) {
 	var rect = canvas.getBoundingClientRect();
 	return {
 		x: evt.clientX - rect.left,
 		y: evt.clientY - rect.top
 	};
 }
  
 var _canvas;
 var _g;
 var WID = 850;
 var HEI = 500;
 var _gameobjs = [];

 var COLOR = {
 	RED: "rgb(255,0,0)",
 	GREEN: "rgb(0,255,0)",
 	BLUE: "rgb(0,0,255)",
 	BLACK: "rgb(0,0,0)",
 	WHITE: "rgb(255,255,255)"
 };
    
 window.onload = function() {
 	_canvas = document.getElementById("game");
 	_g = document.getElementById("game").getContext("2d");
 		
 	window.addEventListener('keydown', key_down);
 	window.addEventListener('keyup',key_up);
 	_canvas.addEventListener('mousedown',mouse_down);
 	_canvas.addEventListener('mouseup',mouse_up);
 	_canvas.addEventListener('mousemove',mouse_move);
 	
 	setInterval(update, 40);
 	
 	_gameobjs.push(make_object(150,50));
 }

 function mouse_down(e){
 	var mouse_pos = get_canvas_cursor_position(_canvas,e);
 	_gameobjs.push(make_object(mouse_pos.x,mouse_pos.y));
 }
 function mouse_up(e) {var mouse_pos = get_canvas_cursor_position(_canvas,e);}
 function mouse_move(e) { var mouse_pos = get_canvas_cursor_position(_canvas,e);}
 function key_down(e) { console.log(e.keyCode) }
 function key_up(e) {}

 function make_object(x,y) {
 	var rtv = {};
 	rtv.x = x;
 	rtv.y = y;
 	rtv.vx = Math.random()*5-2.5;
 	rtv.vy = Math.random()*20-10;
 	return rtv;
 }

 function get_gravity_center() {
 	return {x:WID/2,y:HEI/2};
 }

 function distance_to_gravity_center(x,y) {
 	var grav_center = get_gravity_center();
 	return Math.sqrt(Math.pow(grav_center.x-x,2)+Math.pow(grav_center.y-y,2));
 }

 function update() {
 	_g.clearRect(0,0,WID,HEI);
 	
 	_g.fillStyle = COLOR.BLACK;
 	_g.fillRect(0,0,WID,HEI);
 	
 	_g.fillStyle = COLOR.GREEN;
 	_g.beginPath();
 	_g.arc(WID*0.5,HEI*0.5,20,0,Math.PI*2);
 	_g.closePath();
 	_g.fill();
 	
 	for(var i_obj = 0; i_obj < _gameobjs.length; i_obj++) {
 		var itr_obj = _gameobjs[i_obj];
 		
 		itr_obj.x += itr_obj.vx;
 		itr_obj.y += itr_obj.vy;
 		
 		var intensity = 1/distance_to_gravity_center(itr_obj.x,itr_obj.y) * 100;
 		var delta = {x:get_gravity_center().x-itr_obj.x, y:get_gravity_center().y-itr_obj.y};
 		var delta_len = Math.sqrt(Math.pow(delta.x,2)+Math.pow(delta.y,2));
 		var normalized_delta = {x:delta.x/delta_len,y:delta.y/delta_len};
 		itr_obj.vx += normalized_delta.x*intensity;
 		itr_obj.vy += normalized_delta.y*intensity;
 		
 		_g.fillStyle = COLOR.RED;
 		_g.beginPath();
 		_g.arc(itr_obj.x,itr_obj.y,5,0,Math.PI*2);
 		_g.closePath();
 		_g.fill();
 	}
 }
  
    </script>
 </head>
 <body>
    <canvas id="game"  width="850px" height="500px" style="margin:auto;display:block;"></canvas>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>HTML5 Canvas</title>
	<script>
	function get_canvas_cursor_position(canvas, evt) {
	var rect = canvas.getBoundingClientRect();
	return {
	x: evt.clientX - rect.left,
	y: evt.clientY - rect.top
	};
	}

	var _canvas;
	var _g;
	var WID = 850;
	var HEI = 500;
	var _gameobjs = [];

	var COLOR = {
	RED: "rgb(255,0,0)",
	GREEN: "rgb(0,255,0)",
	BLUE: "rgb(0,0,255)",
	BLACK: "rgb(0,0,0)",
	WHITE: "rgb(255,255,255)"
	};

	window.onload = function() {
	_canvas = document.getElementById("game");
	_g = document.getElementById("game").getContext("2d");

	window.addEventListener('keydown', key_down);
	window.addEventListener('keyup',key_up);
	_canvas.addEventListener('mousedown',mouse_down);
	_canvas.addEventListener('mouseup',mouse_up);
	_canvas.addEventListener('mousemove',mouse_move);

	setInterval(update, 40);

	_gameobjs.push(make_object(150,50));
	}

	function mouse_down(e){
	var mouse_pos = get_canvas_cursor_position(_canvas,e);
	_gameobjs.push(make_object(mouse_pos.x,mouse_pos.y));
	}
	function mouse_up(e) {var mouse_pos = get_canvas_cursor_position(_canvas,e);}
	function mouse_move(e) { var mouse_pos = get_canvas_cursor_position(_canvas,e);}
	function key_down(e) { console.log(e.keyCode) }
	function key_up(e) {}

	function make_object(x,y) {
	var rtv = {};
	rtv.x = x;
	rtv.y = y;
	rtv.vx = Math.random()*5-2.5;
	rtv.vy = Math.random()*20-10;
	return rtv;
	}

	function get_gravity_center() {
	return {x:WID/2,y:HEI/2};
	}

	function distance_to_gravity_center(x,y) {
	var grav_center = get_gravity_center();
	return Math.sqrt(Math.pow(grav_center.x-x,2)+Math.pow(grav_center.y-y,2));
	}

	function update() {
	_g.clearRect(0,0,WID,HEI);

	_g.fillStyle = COLOR.BLACK;
	_g.fillRect(0,0,WID,HEI);

	_g.fillStyle = COLOR.GREEN;
	_g.beginPath();
	_g.arc(WID0.5,HEI0.5,20,0,Math.PI*2);
	_g.closePath();
	_g.fill();

	for(var i_obj = 0; i_obj < _gameobjs.length; i_obj++) {
	var itr_obj = _gameobjs[i_obj];

	itr_obj.x += itr_obj.vx;
	itr_obj.y += itr_obj.vy;

	var intensity = 1/distance_to_gravity_center(itr_obj.x,itr_obj.y) * 100;
	var delta = {x:get_gravity_center().x-itr_obj.x, y:get_gravity_center().y-itr_obj.y};
	var delta_len = Math.sqrt(Math.pow(delta.x,2)+Math.pow(delta.y,2));
	var normalized_delta = {x:delta.x/delta_len,y:delta.y/delta_len};
	itr_obj.vx += normalized_delta.x*intensity;
	itr_obj.vy += normalized_delta.y*intensity;

	_g.fillStyle = COLOR.RED;
	_g.beginPath();
	_g.arc(itr_obj.x,itr_obj.y,5,0,Math.PI*2);
	_g.closePath();
	_g.fill();
	}
	}

	</script>
	</head>
	<body>
	<canvas id="game" width="850px" height="500px" style="margin:auto;display:block;"></canvas>
	</body>
	</html>
No results found