Analysis of innovative video puzzles in HTML5 II

The second page of the first part of the website, the symbol of the moon bear, is a highly interactive page of the moon bear. Nine video fragments are randomly distributed on the page, you can move fragments with a mouse or touch to complete the puzzle.

 

In this Demo, We need to reference two JavaScript libraries, jQuery and Hammer. js.

Hammer. javascript is a gesture-based JavaScript library that can add events such as Tap, Swipe, and Drag to webpages. It also supports mouse and touch input, eliminating the need to listen to events and determine browser compatibility.

Create a jiugongge

First, we will create a nine-phase grid on the page:

                                      }

The size of each grid (. container) is 226*127, and the white part (. container I) is 218*119.

Insert video

Then we insert a Video into the page. We use the Video tag added in HTML5 and use two Video sources to be compatible with most browsers, set the video to Autoplay and Loop. We recommend that the video source size be the same as that of the jiugongge:

At last, you can hide the video and run it silently behind the scenes:

    }

Create video fragments

Video fragment itself is a canvas element, which uses JS to draw Video frames in a multipart and loop manner to the canvas.

             };

    };

The above JS method/function will be used later.

          rndArray = [0, 1, 2, 3, 4, 5, 6, 7, 8].shuffle();

The preceding variables are used. Note that zIndex is used to save the z-index value of the fragment, ctxs is used to save the canvas context of the fragment, and rndArray is a 0 ~ Random array of 8.

   for (var i = 0; i                          

 

Currently, there is no limit on the location where fragments appear, So fragments may overwrite the text on the page. You can complete them yourself.

If you run the page now, you can see the random fragments on the page, but you can only see the black because the video has not been drawn to the page.

 

Draw video fragments

It is actually very simple to draw a video to the canvas. It mainly uses the drawImage method of the canvas.

The drawImage method receives nine parameters.

Context. drawImage (image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

The image points to the source to be used, which can be an image, video, or Canvas Element,

SourceX and sourceY indicate the coordinates in the upper left corner of the image,

SourceWidth and sourceHeight indicate the width and height to be drawn from the image,

DestX and destY indicate to draw the image to the coordinates in the upper left corner of the canvas,

DestWidth and destHeight indicate the width and height of the canvas.

Reading the text may be difficult to understand. The following figure should help you understand:

 

We create a drawVideo function to draw a video.

 

       for (var i = 0; i        

 

Call setInterval to draw every 50 milliseconds.

 

Process drag operations

Add a gesture object to the event object of hammer. js, which stores information about this operation, such as moving distance, moving rate, moving angle, and duration.

We first create three functions, corresponding to three events during the drag process.

Add. dragging (add box-shadow), and set a higher layer of z-index to ensure that the current position is saved to data ("offset.

    };

When dragging fragments, you only need to add deltaX/deltaY to the saved offset, which is the correct position.

        };

Finally, drag and drop to remove the dragging class.

If the center of the Shard is inside the corresponding cell, move the cell and close hammer.

If there are nine fragments in the jiugongge, the puzzle will be completed!

                 if (centerX > containerOffset.left && (centerX  containerOffset.top && centerY            

Finally, initialize the fragments and bind the function to the corresponding event. This interactive game is complete.

 

In fact, there are a lot of special effects on the website. You can try them on your own: http://moonbear.animalsasia.org/ie /. I hope this article will bring you some inspiration and apply it to your website development.