摘 要

电子游戏发展了几十年，随着时间的推移，游戏开发技术变得越来越复杂。从早期的像素游戏，到后来的2D游戏，再到3D游戏，以至于现在的主机游戏。玩家越来越多被精美的画面，逼真的特效，强烈的打击感所吸引。而HTML5游戏作为随点击玩，获取途径广泛，支持跨平台交互等优点，越来越深受玩家的推捧和喜爱，并且HTML5游戏开发方式快捷，获取收入比例巨大，越来越多的开发商将视角指向了HTML5游戏这片市场。

本课题研究的重点是设计并实现一种基于HTML5技术的并且利用egret开发引擎开发的一个HTML5游戏。游戏开发这里，尽量满足跨平台性，兼容性。

开发引擎采用的是Egret公司的Egret 2D开发引擎和Egret Runtime打包工具以及Egret Wing 开发平台。

在根据HTML5技术的基础上，准备开发一个著名的HTML5游戏lt;围住神经猫gt;项目，此游戏简单益智，是广大网友休闲时期的轻松游戏。

文章首先阐述了HTML的基本概念、研究现状和未来发展趋势，然后深入研究了

Egret的基本技术以及TypeScript语言。参考 Egret公司 发布的白皮书，HTML5游戏开发的核心技术。基于 Egret 2D游戏引擎，设计并实现了一个基于 Egret 2D 的HTML5游戏。

关键词：Egret；HTML5；第三方库；显示对象；跨平台；触摸事件

Research and development of H5 game based on egret game development engine

ABSTRACT

Video games have been developing for decades, and as time goes on, game development then to 3D games, so far as host games. More and more players are attracted by exquisite pictures, vivid special effects, and a strong sense of striking. HTML5 game as a click on the play, access to extensive advantages to support cross platform interaction, more and more by the game player pushed holding and love, and HTML5 game development fast, get a huge proportion of income, more and more developers will point to the HTML5 game from the perspective of the market.

The focus of this research is to design and implement a HTML5 game based on HTML5 technology and developed by using egret development engine. Game development here, as much as possible to meet cross platform compatibility.

The development engine uses Egret's Egret 2D development engine and Egret Runtime packaging tools as well as the Egret Wing development platform.

On the basis of HTML5 technology, we are going to develop a famous HTML5 game lt; surround cat gt; project. This game is simple and easy to play. It is an easy game for casual friends.

The article first expounds the basic concept of HTML, research status and future trends, and then in-depth study

Egret basic technology and TypeScript language. Refer to the white paper released by Egret, the core technology of HTML5 game development. Based on Egret 2D game engine, a HTML5 game based on Egret 2D is designed and implemented.

Key words：Egret; HTML5; third party libraries; display objects; cross platform; touch events

目 录

1 HTML5游戏………………………………………………………………………………………1

1.1 什么是HTML5………………………………………………………………1

1. 2 HTML的前世今生....…………………………………………………………………………1

1.3什么是HTML5游戏…………………………………………………3

1.3.1从技术角度出发…………………………………………………3

1.3.2从非技术角度出发…………………………………………………3

1.3.3 HTML5游戏的发展历程………………………………………3

1.3.4 HTML5游戏的优点…….....…………………………………4

1.3.5 HTML5游戏的缺点………………………………………………4

1.4 HTML5游戏的发展…………………………………………………5

1.4.1产品研发阶段…………………………………………………5

1.4.2测试上线运营阶段……………………………………………6

1.4.3未来............………………………………………………6

1.5本章总结.........………………………………………………6

2 Egret游戏引擎概述………………………………………………………………………………7

2.1 egret引擎简介……………………………………………………………………7

2.1.1 egret引擎的特点…………………………………………………7

2.1.2 egret引擎的主要功能……………………………………………8

2.2 搭建开发环境…………………………………………………………………………8

2.2.1Egret版本引擎的选择………………………………………………8

2.2.2Egret引擎安装过程及引擎维护界面………………………………8

2.2.3Egret WIng：强大的IDE功能…………………………………9

2.2.4 ResDepot：资源管理工具………………………………………9

2.2.5 exture Merger：资源打包工具………………………………………10

2.3 库与代码风格…………………………………………………………………………...........10 2.3.1Egret引擎的代码风格………………………………………………10

2.3.2核心库与扩展库的使用方法………………………………………………11

2.3.3第三方库的集成方法………………………………………………12

2.4 小结…………………………………………………………………………13

3 Egret2D游戏开发技术………………………………………………………………………………14

3.1 显示对象……………………………………………………………………14

3.1.1 视觉编程…………………………………………………14

3.1.2 显示对象的基本概念…………………………………………………15

3.1.3 显示对象的基本方法…………………………………………………16

3.2 显示容器…………………………………………………………………………17

3.2.1 显示容器的概念与实现………………………………………………………17

3.2.2 添加显示对象到显示列表………………………………………………………18

3.2.3 深度管理………………………………………………………18

3.2.4 访问容器子对象………………………………………………………22

3.3 矢量绘图…………………………………………………………………………24

3.3.1 绘制矩形………………………………………………………24

3.3.2 绘制圆形………………………………………………………26

3.4 遮罩…………………………………………………………………………27

3.4.1 矩形遮罩………………………………………………………27

3.4.2 显示对象遮罩………………………………………………………28

3.5 碰撞检测…………………………………………………………………………29

3.5.1 非精确碰撞检测………………………………………………………29

3.5.2 精确碰撞检测………………………………………………………31