View Single Post
Old 03-21-2010, 07:27 AM   PM User | #2
TinyScript
Regular Coder

 
Join Date: Mar 2009
Location: Portland Oregon
Posts: 690
Thanks: 44
Thanked 63 Times in 62 Posts
TinyScript is on a distinguished road
I kinda winged it. You could post all your code for real solution.
Sorry I renamed your c2d variable. I really like calling it ctx short for context

Code:
<script>
<script>
var canvas = null;
var c2d = null;
//...
window.onload = init;
function init() {
asteroids=[{x:470,y:290,angle:1.71,points_x:[-30,-10,0,20,40,20,-10],points_y:[ 0,-20,-50,-30,0,20,20]},{x:270,y:290,angle:1.71,points_x:[-30,-10,0,20,40,20,-10],points_y:[ 0,-20,-50,-30,0,20,20]}]
player={x:50,y:50,angle:1.71,inertia:0,inertiaAngle:0}
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	setInterval( step, 60 );
}

function step() {
	for (i in asteroids){asteroids[i].angle+= i%2==0?.05:-.05}
ctx.fillStyle="rgba(0,0,0,.5)"
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	for (u=0;u<asteroids.length;u++) {
		ctx.save();
ctx.beginPath()
		Asteroid_draw(asteroids[u]);
ctx.closePath()
ctx.strokeStyle = "#00ff00";
	ctx.stroke();
		ctx.restore();
	}
	ctx.save();
ctx.beginPath()
	Player_draw(player);
ctx.closePath()

	ctx.restore();
	
	ctx.strokeStyle = "#00ff00";
	ctx.stroke();

player.x<0?player.x=canvas.width:player.x%=canvas.width
player.y<0?player.y=canvas.height:player.y%=canvas.height

if(player.inertia>0)player.inertia-=.01

player.x+=Math.sin(player.inertiaAngle)*player.inertia;player.y+=-Math.cos(player.inertiaAngle)*player.inertia
}
function Asteroid_draw(obj) {

	ctx.translate( obj.x, obj.y)
	ctx.rotate(obj.angle);
ctx.moveTo(obj.points_x[0],obj.points_y[0]);
	for (i=0;i<obj.points_x.length-1;i++) {
		
		ctx.lineTo(obj.points_x[i],obj.points_y[i]);
	}
ctx.lineTo(obj.points_x[0],obj.points_y[0]);

	//ctx.moveTo(obj.points_x[0],obj.points_y[0]);
	//ctx.lineTo(obj.points_x[obj.points_x.length-1],obj.points_y[obj.points_x.length-1]);
}
function Player_draw(obj) {
	ctx.translate( obj.x, obj.y );
	ctx.rotate(obj.angle);
	//Points {0,-12}{7,5}{-7,5}
	ctx.moveTo(0,-12);
	ctx.lineTo(7,5);
	ctx.moveTo(7,5);
	ctx.lineTo(-7,5);
	ctx.moveTo(-7,5);
	ctx.lineTo(0,-12);
}
document.onkeydown=function(event){keyDown(event)};

function keyDown(event) { 

		if (event.keyCode == 37) {player.angle-=.1}/*left*/
	else 	if (event.keyCode == 39) {player.angle+=.1}/*right*/
	else 	if (event.keyCode == 38) {player.inertia+=.1;player.inertiaAngle=(player.inertiaAngle+player.angle)/2}/* up*/
	else 	if (event.keyCode == 40) {player={x:50,y:50,angle:1.71,inertia:0,inertiaAngle:0}}/*down*/

}


</script>
<canvas id="canvas" width="600" height="600"></canvas>
<canvas id="canvas" width="600" height="600"></canvas>

Last edited by TinyScript; 03-21-2010 at 08:13 AM.. Reason: added key events because I love asteroids!
TinyScript is offline   Reply With Quote