Math, Physics, and Animation - HTML5 Canvas - page 409

context . strokeRect ( 1 , 1 , theCanvas . width - 2 , theCanvas . height - 2 );

ship . velocityx = ship . velocityx + ( ship . velocityx * easeValue );
ship . velocityy = ship . velocityy + ( ship . velocityy * easeValue );

ship . x += ship . velocityx ;
ship . y += ship . velocityy ;

//Draw points to illustrate path

points . push ({ x : ship . x , y : ship . y });

for for ( var var i = 0 ; i < points . length ; i ++ ) {

context . drawImage ( pointImage , points [ i ]. x + shipImage . width / 2 ,
points [ i ]. y , 1 , 1 );

}

context . drawImage ( shipImage , ship . x , ship . y );

}

var var easeValue = . 05 ;

var var p1 = { x : 240 , y : 470 };

var var tempX ;

var

var tempY ;
var var tempSpeed = . 5 ;

var var tempAngle = 270 ;

var

var tempRadians = tempAngle * Math . PI / 180 ;
var var tempvelocityx = Math . cos ( tempRadians ) * tempSpeed ;

var

var tempvelocityy = Math . sin ( tempRadians ) * tempSpeed ;

var var ship = { x : p1 . x , y : p1 . y , velocityx : tempvelocityx , velocityy : tempvelocityy };

var var points = new new Array ();

theCanvas = document . getElementById ( "canvasOne" );
context = theCanvas . getContext ( "2d" );

function function gameLoop () {

window . setTimeout ( gameLoop , 20 );
drawScreen ()

}
gameLoop ();

}

< /script>