Mixing HTML5 Video and Canvas - HTML5 Canvas - page 501

while while ( ! found ) {

var

var rndCol = Math . floor ( Math . random () * cols );
var

var rndRow = Math . floor ( Math . random () * rows );
iif ( board [ rndCol ][ rndRow ] != false

false ) {

found = true true ;

}

}

Finally, we move the piece we found in board to the current location we are filling in
newBoard . Then we set the piece in the board array to false so that when we test for the
next piece, we won't try to use the same piece we just found. When we are done filling up
newBoard , we return it as the newly randomized array of puzzle pieces:

newBoard [ i ][ j ] = board [ rndCol ][ rndRow ];
board [ rndCol ][ rndRow ] = false

false ;

}

} return return newBoard ;

}
Drawing the screen

The drawScreen() function isthe heart ofthis application. Itiscalled onaninterval andthen
usedtoupdatethevideoframesandtodrawthepuzzlepiecesonthescreen.Agoodportionof
drawScreen() looks like applications we have built many times already in this topic. When
it begins, we draw the background and a bounding box on the screen:

function function drawScreen () {

//Background
context . fillStyle = '#303030' ;
context . fillRect ( 0 , 0 , theCanvas . width , theCanvas . height );
//Box
context . strokeStyle = '#FFFFFF' ;
context . strokeRect ( 5 , 5 , theCanvas . width − 10 , theCanvas . height − 10 );

However, the primary work of this function is—you guessed it—another set of two nested
for:next loopsthatdrawthepuzzlepiecesontothecanvas.Thissetneedstodothreethings:

1. Draw a grid of puzzle pieces on the canvas based on their placement in the board two-
dimensional array.

2. Find the correct part of the video to render for each piece based on the finalCol and
finalRow properties we set in the dynamic object for each piece.