A preface.
❝
The author was once obsessed with H5 mini-games (fun, collection, imitation, learning), which became popular in 2014 and exploded in the circle of friends in 2015. At that time, WE often saw H5 mini-games forwarded and shared by friends on wechat moments, and sometimes we would click on them to play them. The simple plot design and operation mode of the game provided us with a way to relax our fragmented time. So what exactly is an H5 mini-game? However, H5 mini game is popular among users and enterprises for its leisure, and has become one of the important forms of interactive leisure entertainment. Ordinary H5 small game, why can attract users never forget? What are the characteristics of it?
❞
Thank you for your encouragement and support 🌹🌹🌹 :
- NodeJS full stack to develop a fully functional Express project (with complete source code)
- (1) Vue+Echarts to build visual big data platform combat project sharing (attached source code)
- Develop a micro channel mini program personalized resume, can open the door of big factory and get tickets? (Attached source code)
Before introducing H5 mini game, let’s experience a classic game that was popular in our circle of friends. Please use wechat to scan it, as shown in the picture:
The above small game has been tested to play, note: the first load of the game may be a little slow (the server bought a cheap, the author is short of money, ha ha 😛), please wait patiently or refresh the page again. The author worked hard to collect and organize for a long time, if you really feel good, please click 👍 and ❤️ to collect, thank you for your support, the follow-up will be more small games after the completion of the test, and then share the first wave. 😘 (full source screenshots at the end of the article)
What is H5 mini game
2.1 What is HTML5
- HTML5 is the latest HTML standard.
- HTML5 is specifically designed to host rich Web content without the need for additional plug-ins.
- HTML5 has new semantic, graphical, and multimedia elements.
- HTML5 provides new elements and new apis that simplify building Web applications.
- HTML5 is cross-platform and is designed to run on different types of hardware (PCS, tablets, phones, TVS, and so on).
Top 10 new FEATURES of HTML5: semantic tags, enhanced forms, video and audio, Canvas drawing, SVG drawing, geolocation, drag-and-drop API, WebWorker, WebStorage, WebSocket, etc. For more details, please go to the HTML5 tutorial
2.2 Understand H5 mini-games
What does H5 mini game mean? There are probably a lot of people who have already played H5 games, but there are a lot of people who don’t know they’ve played H5 games and don’t know what an H5 game is.
H5 is a set of techniques for creating interactive web effects. It stands for HTML5 and stands for mobile Web pages. H5 games can be regarded as web games on mobile terminals, which can be experienced without downloading software. This is the advantage of H5 in communication. To put it bluntly again, H5 games are mobile page games.
For players, H5 mini-games have even more advantages. No need to download and click to play, no need to take up too much memory, easy and casual play, the required time is more fragmented, convenient circle of friends to share, show off and social…
On the technical side, the barriers to developing mobile mini-games with the H5 are lower and require less time. Games can be written like web pages without a lot of extra learning, with plenty of documentation and plugins available.
Three. H5 small game features
3.1 advantage
- Development costs are relatively low
- Cross-system, cross-terminal, cross-platform
- No need to download and install, click and play
- Reasonable social interaction
- Safety and save traffic
- Go viral
3.2 disadvantages
- The production threshold is relatively low
- Lack of fixed flow inlet (difficult to realize)
- Experience gap (performance, traffic, etc.)
- As a marketing tool
- User retention is low
- From mild to moderate to severe
Iv. H5 small game technology stack
4.1 the primary version
The elements in the screen are relatively simple, the logic is not too complex, and the structure is consistent with the conventional Web page. The main technology stack is based on DOM elements + jQuery + native JavaScript + CSS3 implementation effect.
The intermediate version 4.2
Compared with traditional Web pages, the complexity is higher, and the main technology stack is based on Canvas + JavaScript + part of DOM elements + CSS3 to achieve the effect.
4.3 premium
H5 games with high complexity, the main technology stack is based on the H5 game engine to achieve the effect.
4.4 H5 mini game engine
To learn more about the H5 game engine, check out this article H5 Game Development: Getting Started with the Game Engine
4.5 Understand front-end engineering and Webpack
“1) Front-end engineering“
In recent years, the rapid development of the front-end field, front-end work is no longer cut a few pictures, write a few pages so simple, the project is relatively large, it is likely to be collaborative development of many people, modular, componentization, CSS precompilation and other technologies have been widely used. Front-end automation (semi – automation) engineering has become the mainstream. Front-end engineering mainly solves the following problems:
- Merge and compress Javascript and CSS code
- CSS preprocessing: compilation of Less, Sass, Stylus
- Generate Sprite diagram
- ES6 to ES5 syntax
- modular
- .
“2) Gulp and Webpack“
Many of you know gulp and Webpack as well as Grunt. What’s the difference?
After the Gulp and Grunt merge, the compressed code is still the code you wrote, only the local variable names have been replaced, some syntax has been transformed, and the overall content has not changed.
And webpack after the code has not only you write the code, which includes a lot of Webpack itself module processing code. During compilation, the Webpack project automatically loads some content.
“3) Webpack and engineering“
Webapack (Web Network Pack) is mainly applicable to single-page applications (SPa-SinglePage Application). SPA is usually composed of an HTML file and a bunch of JS loaded on demand. The dependency diagram for WebPack looks like this:
Moduls: Moduls with dependencies
These are the H5 games to understand the basic content points.
5. Some screenshots of the game
Attach the complete source code screenshot
Seven. 💕 After watching three things:
- Thumb up | you can
Go to -- > Favorites -- > ExitIn one go, but don’t forget to like 🤭 - Focuses on | point, don’t get lost 😘 next time
- You can also go to GitHub to get the source of all my open source projects at 🤗
Eight. Write at the end
Share here, if you find a small game BUG, or fun, you can tell me, feedback BUG I will fix in time, but also look forward to more exchanges and learning with you. Later will share more selected mobile phone templates, web templates, H5 games, web cool effects and other source code. Pay attention to the author’s public account, please look forward to.
Free quick access to game source code: pay attention to the public number, the background reply “game” two words can be obtained.
Please pay attention to the author’s public account: “Lazy code farmers”
