入门HTML5游戏开发指南

需积分: 9 84 浏览量更新于2024-07-26 1 收藏 6.61MB PDF 举报

"introducing html5 game development - Jesse Freeman - O'Reilly Media" 《Introducing HTML5 Game Development》是由Jesse Freeman编写的书籍，适合HTML5初学者，它为那些想要踏入HTML5游戏开发领域的读者提供了一个良好的起点。本书旨在帮助读者理解和掌握利用HTML5这一强大的Web技术来创建互动游戏的基本概念和实践技巧。 HTML5是现代网页开发的标准，它提供了许多新的功能和API，使得开发者可以直接在浏览器中构建复杂的应用和游戏，而无需依赖插件。这本书将引导读者探索HTML5中的关键特性，如Canvas画布、Web Audio API、WebGL用于3D图形处理以及Web Storage和离线应用存储等。书中的内容可能包括： 1. **HTML5基础知识**：讲解HTML5的基础语法，包括新的元素、属性和语义化标签，如何在网页中组织内容。 2. **Canvas绘图**：详细介绍Canvas API，如何使用JavaScript进行动态绘图，创建动画和游戏图形。 3. **Web Audio API**：教授如何处理音频，实现游戏音效和背景音乐。 4. **WebGL**：介绍如何通过WebGL进行3D图形编程，创建复杂的视觉效果。 5. **数据存储**：探讨Web Storage和IndexedDB，学习如何在本地存储用户数据和游戏进度。 6. **游戏架构和设计**：讨论游戏设计模式，如游戏循环、碰撞检测、对象实例化和管理。 7. **性能优化**：讲解如何优化HTML5游戏性能，使其在各种设备上运行流畅。 8. **实战项目**：通过实际的游戏开发案例，让读者将理论知识付诸实践。 9. **跨平台兼容性**：介绍如何处理HTML5在不同浏览器和设备间的兼容性问题。 10. **最佳实践和资源**：分享开发过程中的一些最佳实践，以及推荐的工具和框架。该书由O'Reilly Media出版，拥有专业的编辑、开发编辑和制作团队支持，确保内容的专业性和质量。封面和内页设计独特，配有插图，便于读者理解复杂的概念。此外，O'Reilly Media还提供在线版本，让读者可以随时随地访问学习资源。《Introducing HTML5 Game Development》是一本全面的指南，旨在帮助初学者掌握HTML5游戏开发的核心技能，开启他们的游戏创作之旅。如果你对使用HTML5构建互动游戏感兴趣，这本书无疑是你不可或缺的参考资料。

Tools you will need:

PHP

For saving levels created with Weltmeister.

Apache

For locally hosting and testing your game.

IDEs

Impact has no IDE dependencies; you can create your games with any simple text

editor. I prefer to use WebStorm or PHPStorm since these IDEs, which are made

by JetBrains, offer code hinting, project management, refactoring, and debugging.

Browsers

Impact works very well on WebKit browsers, especially Chrome, but any modern

browser with support for Canvas and the Audio tag should also work.

Setting Up a Local Environment

Before getting started, we are going to have to set up a simple Web development envi-

ronment in order to take full advantage of Impact and its level editor. Plus, by setting

up a local development environment, we can simulate what it will be like to host the

game in a production environment. Let’s take a look at configuring Apache, the IDE,

and Impact itself.

Install WebStorm/PHPStorm

While you can use any basic text editor, I prefer to use an IDE that offers a more robust

set of features such as code hinting, refactoring, project management, version control

integration, and a debugger. JetBrains has two IDEs that both handle JavaScript/

HTML5 development. If you only plan on doing JavaScript development, I would sug-

gest using WebStorm. If you need to do HTML5 and PHP development (which comes

in handy since Impact’s level editor uses PHP) you should look at PHPStorm.

Installing these applications is straightforward. Here are URLs for each IDE:

WebStorm

http://www.jetbrains.com/webstorm

PHPStorm

http://www.jetbrains.com/phpstorm

Each IDE has a 30-day trial and after the trial costs $99 for a license. There are a lot of

resources out there on how to use each IDE, so I am not going to cover it here.

2 | Chapter 1: Introduction To Impact

www.it-ebooks.info

15 #canvas {

16 position: absolute;

17 left: 0;

18 right: 0;

19 top: 0;

20 bottom: 0;

21 margin: auto;

22 border: 1px solid #555;

23 }

24 </style>

26 <script type="text/javascript" src="lib/impact/impact.js"></script>

27 <script type="text/javascript" src="lib/game/main.js"></script>

28 </head>

29 <body>

30 <canvas id="canvas"></canvas>

31 </body>

32 </html>

Outside of the style tag, you may notice there isn’t a lot of code actually embedded in

the page. We have two script tags that load in the impact.js framework and our

main.js JavaScript file. Finally the only tag in body is the Canvas element.

The Canvas element is part of the HTML5 spec and is what actually

allows Impact to run in the browsers. Think of the canvas as an image

that we can draw bitmap data into. Impact takes care of all the under-

lying code we would have had to write in order to display game graphics

to the screen. You can learn more about how the Canvas tag works at

http://www.whatwg.org/specs/web-apps/current-work/multipage/the

-canvas-element.html#the-canvas-element. It’s also important to note

that the Canvas element only works in modern browsers such as

Chrome 13+, Safari 3.2+, Firefox 6+ and IE 9+. For a full list of browsers

that support the Canvas element, go to http://caniuse.com/#search=can

vas.

You can also add your own HTML code around the Canvas element and design this

page to look like any other HTML file. Just keep in mind that we use the canvas id in

our game in order to tell impact where to render our game’s graphics to, so don’t change

it unless you update your game’s initialization logic.

Now we are ready to learn more about the Impact framework.

Modules

Impact’s source code is organized into modules. Since JavaScript itself does not have

an include() function that can load other JavaScript source files into an object, Impact

has its own system. A module typically looks like this:

6 | Chapter 1: Introduction To Impact

www.it-ebooks.info

剩余119页未读，继续阅读

kueifu

粉丝: 0
资源: 28

入门HTML5游戏开发指南

IntroducingHTML5GameDevelopment.pdf 英文原版

Introducing JavaScript Game Development.pdf

Introducing JavaScript Game Development Build a 2D Game from the Ground Up epub

Introducing JavaScript Game Development Build a 2D Game from the Ground 无水印原版pdf

Learn Unity for Android Game Development A-Guide to Game Design Development

Game Audio Development with Unity 5.X

Swift Game Development: Learn iOS 12 3rd Edition

Game Development with Swift(PACKT,2015)

Beginning iOS AR Game Development：Developing Augmented Reality Apps.epub

Beginning.Facebook.Game.apps.development

最新资源