HTML5游戏开发入门

5星 · 超过95%的资源需积分: 10 35 浏览量更新于2024-07-28 收藏 6.55MB PDF 举报

“Introducing HTML5 Game Development” 是一本由Jesse Freeman编著的关于使用HTML5和JavaScript开发游戏的英文原版书籍。本书详细介绍了利用HTML5这一现代Web技术进行游戏开发的基础知识和高级技巧。HTML5是Web开发领域的一个重大进步，它引入了许多新特性，如Canvas、SVG、Web Audio、Web Storage以及离线存储等，这些都极大地扩展了Web应用的能力，特别是在游戏开发方面。 1. **Canvas**：HTML5的Canvas元素提供了一个在网页上动态绘制图形的画布。开发者可以通过JavaScript来控制画布上的每一像素，实现复杂的2D图形和动画，是创建游戏画面的主要工具。 2. **Web Audio API**：这个API允许开发者在网页中添加高质量的音频支持，包括音频播放、混音、处理和效果，为游戏的音效设计提供了强大的支持。 3. **Web Storage** 和 **IndexedDB**：这两者都是HTML5的本地数据存储机制，用于替代传统的Cookie，能够存储大量数据，使得游戏可以离线运行，并且能够保存用户的游戏进度和设置。 4. **Web Workers**：这个特性允许在后台线程中执行复杂的计算任务，避免了UI的卡顿，提高了游戏的性能和响应速度。 5. **WebSocket**：提供了全双工的通信通道，让实时在线游戏成为可能，玩家之间的互动可以即时反馈，无需频繁刷新页面。 6. **Gamepad API**：让游戏可以直接与游戏手柄等外部设备交互，增强了游戏体验。 7. **Geolocation API**：获取用户的地理位置信息，可以用于制作基于位置的游戏。书中不仅会涵盖以上技术的理论知识，还会通过实际案例来演示如何将这些技术应用到游戏开发中，包括游戏框架的选择、游戏物理引擎的实现、碰撞检测、动画制作、游戏状态管理以及优化策略等内容。此外，作者Jesse Freeman是一位经验丰富的游戏开发者，他的指导将帮助读者从零基础开始，逐步掌握HTML5游戏开发的全过程。 “Introducing HTML5 Game Development”是一本面向初学者和进阶者的指南，旨在帮助读者掌握使用HTML5和JavaScript构建互动游戏所需的所有技能。无论你是想开发简单的休闲游戏还是复杂的多人在线游戏，这本书都将是你不可或缺的参考资料。

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

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

剩余119页未读，继续阅读

mozilla2020

粉丝: 0
资源: 2

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

最新资源