preface

It is not difficult to develop a small game based on Html5. The basic idea is to use Html5 canvas to draw the game image, and to realize the interaction of the game by listening to the TOUCH event of Dom elements and triggering the corresponding animation. The difficulty lies in solving the compatibility problems of game pictures and sound effects of different devices after development.

Using Hilo can help us solve some of the common potholes we encounter during development. In Hilo, all elements, including the stage and the objects in the stage, are one object, with similar properties such as width, height, etc. An object can contain another child object, such as a stage object, which can have children such as a character. All element class objects are subclasses of the Hilo.View class.

Here is an example of how to use Hilo to develop an H5 mini-game.

A, install,

Introduce the Hilo class library.

<script type="javascript" src="hilo-standalone.js" ></script>
Copy the code

2. Resource preloading

Preload various image resources to improve user experience.

Var queue = new hilo.loadQueue (); var resources = [ {id:'ball'.type:'png',src:_ball,noCache:false,crossOrigin:'anonymous'},
    {id:'ball2'.type:'png',src:_ball2,noCache:false,crossOrigin:'anonymous'},]; queue.add(resources); queue.on('complete'.function(e) {// Logic after loading, such as hiding loading}); queue.start();Copy the code

Create a stage

Stage is a variety of graphics, wizard animation, and so on the total carrier. All visible objects created with Hilo must be added to the stage or its children before they can be rendered and displayed. The stage is essentially a Container, but it’s a top-level Container. In addition to having the functionality of a normal container, it also has some special properties and methods.

  • The HTML code
<div id="game-container"></div>
Copy the code
  • Js code
var stage = new Hilo.Stage({
    renderType:'canvas',
    container: document.getElementById('game-container'),
    width: 480,
    height: 320
});
Copy the code

Enable event interaction

Hilo objects are not allowed to trigger events such as clicks by default and need to be enabled for stage objects first. The following code enables event listening for user finger start touch, move, stop touch, and so on.

stage.enableDOMEvent(Hilo.event.POINTER_START, true);
stage.enableDOMEvent(Hilo.event.POINTER_MOVE, true);
stage.enableDOMEvent(Hilo.event.POINTER_END, true);
Copy the code

5. Create a timer

Used to constantly refresh the render page animation

var ticker = new Hilo.Ticker(100);
ticker.addTick(stage);
ticker.addTick(Hilo.Tween);
ticker.start();
Copy the code

Add stage elements

Add an element “ball” to the stage. Image is the resource object, which can be retrieved from the preloaded queue. X is the starting abscissa of the ball, y is the starting ordinate of the ball, width and height are the width and height respectively.

var ballImg = queue.getContent('ball');
ball = new Hilo.Bitmap({
    image:ballImg,
    x:ballX,
    y:ballY,
    width:trueBallWidth,
    height:trueBallHeight
});
stage.addChild(ball);
Copy the code

Listen for touch events

The user records the coordinates of the touch point at the beginning of touching the stage, and then records the coordinates of the touch point at this time after touching the stage, and calculates the direction of finger sliding by these two coordinates, so as to control which direction the ball is thrown.

stage.on(Hilo.event.POINTER_START,function(e)
    e.preventDefault();
    currentEvent = e.changedTouches[0].identifier;
    startTouchXList[currentEvent] = e.changedTouches[0].clientX;
    startTouchYList[currentEvent] = e.changedTouches[0].clientY;
    endTouchXList[currentEvent] = e.changedTouches[0].clientX;
    endTouchYList[currentEvent] = e.changedTouches[0].clientY;
});

stage.on(Hilo.event.POINTER_MOVE,function(e)
    e.preventDefault();
    currentEvent = e.changedTouches[0].identifier;
    endTouchXList[currentEvent] = e.changedTouches[0].clientX;
    endTouchYList[currentEvent] = e.changedTouches[0].clientY;
});

stage.on(Hilo.event.POINTER_END,function(e) e.preventDefault(); endTouchXList[currentEvent] = e.changedTouches[0].clientX; endTouchYList[currentEvent] = e.changedTouches[0].clientY; / / throw the ball throwBall(startTouchXList[currentEvent],startTouchYList[currentEvent],endTouchXList[currentEvent],endTouchYList[currentE vent]); })Copy the code

Eight, animation implementation

To control the movement of the tmpBall object with the Hilo.Tween.to method.

var tmpBall = new Hilo.Bitmap({
    image:ballImg,
    x:ballX,
    y:ballY-5,
    width:trueBallWidth,
    height:trueBallHeight }); stage.addChild(tmpBall); To (tmpBall,{x: endpoint. x, y: endpoint. y, width:trueBallWidth/percent,
    height:trueBallWidth/percent
},{
    duration:ballSpeed,
    delay:0,
    ease:Hilo.Ease.Linear.EaseNone,
    onComplete:function() {});Copy the code

Reference documentation

  • Liverpoolfc.tv: hiloteam. Making. IO/index. HTML
  • The official presentation: hiloteam. Making. IO/examples/in…

  • Pay attention to the wechat public account “Full stack community”, you can get more front-end, back-end, operation and maintenance technology necessary for webmasters and developers.

  • 18 YUAN US VPS, site construction host:www.salasolo.com