Images on the Canvas - HTML5 Canvas - page 298

function function drawScreen () {

blueObject . x += blueObject . dx ;
redObject . x += redObject . dx ;

context . clearRect ( 0 , 0 , theCanvas . width , theCanvas . height );
context . drawImage ( blueObject . image , blueObject . x , blueObject . y );
context . drawImage ( redObject . image , redObject . x , redObject . y );

console . log ( "redObject.redImageData.data[3]=" +
redObject . redImageData . data [ 3 ]);

iif ( boundingBoxCollide ( blueObject , redObject )){
console . log ( "bounding box collide" );

var var xMin = Math . max ( blueObject . x , redObject . x );

var var yMin = Math . max ( blueObject . y , redObject . y );

var

var xMax = Math . min ( blueObject . x + blueObject . width ,
redObject . x + redObject . width );

var var yMax = Math . min ( blueObject . y + blueObject . height ,

redObject . y + redObject . height );

for for ( var var pixelX = xMin ; pixelX < xMax ; pixelX ++ ) {

for

for ( var var pixelY = yMin ; pixelY < yMax ; pixelY ++ ) {

var var bluepixel = (( pixelX - blueObject . x ) + ( pixelY - blueObject . y )

* blueObject . width ) * 4 + 3 ;
var

var redpixel = (( pixelX - redObject . x ) +
( pixelY - redObject . y ) * redObject . width ) * 4 + 3 ;

iif (( blueObject . blueImageData . data [ bluepixel ] !== 0 ) &&
( redObject . redImageData . data [ redpixel ] !== 0 )) {
console . log ( "pixel collision" )
blueObject . dx = 0 ;
redObject . dx = 0 ;
break break ;

}

}

}

}

}