H5 simple version ski adventure game implementation

preface

The purpose of this article is to share the implementation plan of ski game, provide reference for the later partners, but also welcome everyone to put forward suggestions for improvement, will be introduced according to the following steps. Game demo experience link

  • Technology stack
  • Demand analysis
  • Technical solution
  • Game module division
  • conclusion

Technology stack

H5 game engine: the H5 game engine FYGE (currently not open source) API developed by the company can refer to egret engine in order to better achieve the movement effect of objects, the third party physics engine P2.js is used

Demand analysis

Demand side is holding “Ski adventure” mobile game, hoping to achieve a simple version of THE H5 game.

According to the two dimensions of standard-customization and complexity-simplicity, requirements belong to custom development, and componentization was not considered in the first version

Preliminary analysis, the game is divided into four main modules

  1. Game background: close and distant, and random mountain cycle rolling
  2. Ground generation: smooth and continuous
  3. Character movement: Smooth and meets the requirements of simple physics logic, only jumps without acceleration, which is also different from the skiing adventure
  4. Obstacles and item generation: Multiple levels, different paths and items

Technical solution

After preliminary analysis of requirements, the following difficulties and schemes are summarized:

  1. How the ground is made
    • Plan 1:

    The route is generated randomly through Bezier curve repeatedly (advantages: no UI intervention generation, high development efficiency disadvantages: line to line contact will be stuck, time relationship has not found a good solution)

    • Scheme 2:

    The route goes through the image given by the UI, throughgetImageDataRead the picture specified color, according to the step size to generate line height array. (Advantage: generate line segment coherence disadvantage: each level needs to generate, the total development increases.)

  2. How can the movement of characters be coherent and not easily inverted
    • Plan 1:

Character model using rectangular, by modifying the friction and external force to achieve the game (advantages: simple model disadvantages: general effect, landing and increase the external force, the effect is a little stiff). – Option 2:The character model adopts the car model. (Advantage: Smooth motion; disadvantage: complex model.)

Main code:

        // Add elastic constraint between body and two wheels
        var c1 = new p2.PrismaticConstraint(this.role.carBody,this.role.circleBody,{
            localAnchorA : [-45, -46].localAnchorB : [0.0].localAxisA : [0.1].disableRotationalLock : true});var c2 = new p2.PrismaticConstraint(this.role.carBody,this.role.circleBody2,{
            localAnchorA : [ 45, -46].localAnchorB : [0.0].localAxisA : [0.1].disableRotationalLock : true}); c1.setLimits(-8.8);
        c2.setLimits(-8.8);
        this.phyworld.addConstraint(c1);
        this.phyworld.addConstraint(c2);
Copy the code

Conclusion: In summary, the implementation method of scheme 2 is adopted.

Game module division

The game uses Mixins to divide in-game modules

├── frustrate.js ├─ ├─ test.js ├─ test.js ├─ test.js ├─ ├─ mix.js ├─ ├─ ├.js // Game Background ├─ ├.js // Game character logicCopy the code

conclusion

The above is the game development and design ideas, the game implementation is not elegant, this is github game demo address, welcome to leave a message in issues.