HTML and CSS Reference
In-Depth Information
NOTE
This part of the function works because we have limited the number of pieces that can be selected to
2
. For a game such as poker, which requires the player to select five cards, you would use a slightly
different algorithm that tests for
5
cards instead of
2
, and then calculate the value of the hand.
Testing the game
Believeitornot,thatisallthecodeweneedtotalkabout—therestyouhaveseenmanytimes
before. Try running the game (
CH6EX10.html
). When it loads, you should see the video or-
ganized in a 16-piece grid. Each part of the video will be playing, just like one of those magic
trickswhereawomanappearstobeseparatedintomultipleboxesbutherlegs,arms,andhead
are still moving. In fact, this game is sort of like one of those magic tricks because, in reality,
the video was never “cut” in any way. We simply display the parts of the video to make it ap-
pear to be cut into 16 independent, moving pieces that can be swapped to re-form the original
video.
Example 6-10
shows the full code listing for the Video Puzzle application.
Example 6-10. Video puzzle
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH6EX10: Video Puzzle
</title>
</title>
<
script src
=
"modernizr.js"
><
/script>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
'load'
,
eventWindowLoaded
,
false
false
);
var
var
videoElement
;
var
var
videoDiv
;
function
function
eventWindowLoaded
() {
videoElement
=
document
.
createElement
(
"video"
);
videoDiv
=
document
.
createElement
(
'div'
);
document
.
body
.
appendChild
(
videoDiv
);
videoDiv
.
appendChild
(
videoElement
);
videoDiv
.
setAttribute
(
"style"
,
"display:none;"
);
var
var
videoType
=
supportedVideoFormat
(
videoElement
);
iif
(
videoType
==
""
) {
alert
(
"no video support"
);
return
return
;
}
videoElement
.
addEventListener
(
"canplaythrough"
,
videoLoaded
,
false
false
);
