Home > Article > Web Front-end > 10 recommended articles about somatosensory
1. Introduction What kind of game are we going to make? At the Chengdu TGC2016 exhibition not long ago, we developed a somatosensory game for "Naruto Mobile", which mainly simulates the mobile game chapter "Nine-Tails Attack". The user becomes the fourth generation and competes with the Nine-Tails, attracting a large number of players. participate. On the surface, this game is no different from other somatosensory experiences. In fact, it has been running under the browser Chrome. In other words, we only need to master the corresponding front-end technology to develop a web based somatosensory game based on Kinect. 2. What is the implementation principle and idea? Using H5 to develop Kinect-based somatosensory games, the working principle is actually very simple. Kinect collects player and environmental data, such as human skeleton, and uses a certain method to allow the browser to access these data. 1. Collect data. Kinect has three lenses. The middle lens is similar to an ordinary camera and acquires color images. The left and right lenses obtain depth data through infrared rays. We use the SDK provided by Microsoft to read the following types of data: color data: color images; depth data: color trial information; human skeleton data: based on calculations based on the above data, we obtain human skeleton data. 2
1. Detailed explanation of examples of developing Kinect somatosensory games using HTML5
Introduction: Use H5 to develop Kinect-based somatosensory games. The working principle is actually very simple. Kinect collects player and environmental data, such as human bones, and uses a certain method to allow the browser to access these data.
2. Implementation code of 3D three-dimensional CSS3 elastic button
##Introduction: This is another excellent pure CSS3 button animation. This CSS3 button is characterized by a 3D three-dimensional visual effect, and the button is elastic and has a texture when you click the button. Especially against the background, the buttons appear more crystal clear and the three-dimensional effect becomes stronger. Another feature of this button is that it uses CSS3 to achieve animation effects, and the principle is simple. It just uses CSS3 to re-render the checkbox. Online demo source code download HTML code: