Take you to develop mobile games with H5

Source: Internet
Author: User

Take you to develop mobile games with H5

In the jy1.x version, you want to do a PC-side mini-game, it will be very simple, including that you want to in the lower version of the browser IE8, there will be no obvious lag, you only need to care about the logic of the game, more suitable for the logic of the simple game, in JY website also wrote a lot of small game demo, but later due to work , has not been too to maintain him, really a blink of an eye, is already the era of mobile Internet, 5 years later today, with the re-conceived JY framework impulse, so the new JY2.0 began to build. It will only apply to H5 mobile game development, it will be more to focus on more complex JS games, not limited to the red and white machine era.

When using JY1, I did a tower defense H5 game, it does a bit like "defend radish", of course, it is just a prototype, as shown, its demo address is H5 Tower defense game

It's designed to be a form of canvas plus div blending, which is the start of JY2.0, in a game where we usually divide the three-layer structure:

    1. The first layer, view, is the core part of the game, the whole animation display;
    2. The second layer, control operations layer, which is used to respond to user input;
    3. The third layer, the model data layer, is to display the relevant information of the current user, such as grade, Blood bar and so on.

Easy to remember, you can understand that MVC, of course, is not a half-wool relationship. This is the jy1.x version of the play, if interested can go to GitHub on the code down to see. In the JY2, I made the canvas easier, all the game elements inherit the sprite class, I divided the entire JY library into 10 classes:

    • Index.ts Main entry category, Class JY
    • Iscreen.ts window interface class, interface Iscreen
    • Sprite.ts Game elf class Sprite
    • Writetext.ts Text Control class WRITETEXT
    • Control.ts Controller, Iscreen implementation class Control implements Iscreen
    • Stage.ts game stage, ibid.
    • Descrition welcome interface, ibid.
    • Title.ts start interface, ibid.
    • Gameover.ts Game End Interface, ibid.
    • Score.ts Integral interface, IBID.

There may be some questions, this is JS, how to have class and interface Ah, in order to increase the syntax of JS, so I am using typescript to write, typescript is a kind of more like C # JS implementation, more perfect than es6, especially the strong type.

With these, we can start to build a pure H5 game, because of the time, I will first release the game!

The game has been integrated into the app and can be downloaded via https://beta.bugly.qq.com/jsc7, or http://www.lovewebgames.com/app/bigeatsmall/bigeatsmall.apk and iOS jailbreak version Http://www.lovewebgames.com/app/bigeatsmall/bigeatsmall.ipa

This game is a hybrid app that uses HTML and JS to integrate into the app, which is a bit like the big battle of devouring snakes and balls. To be continued, remember to follow my JS game framework JY

Take you to develop mobile games with H5

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.