HTML5游戏开发深度解析：从基础到实践

3星 · 超过75%的资源需积分: 10 149 浏览量更新于2024-07-27 收藏 2.87MB PDF 举报

"本书是关于HTML5游戏开发的全面指南，旨在帮助读者从入门到精通。作者Jacob Seidelin深入探讨了使用HTML5、CSS3和WebGL创建有趣游戏的各种技术和策略。" 在《HTML5游戏开发大全：从入门到精通》中，作者首先介绍了Web游戏的历史以及HTML5在游戏开发中的应用。HTML5引入了如Canvas（用于绘制2D图形）、Audio（处理音频）、WebSockets（实现双向实时通信）、WebStorage（提供本地数据存储）以及WebGL（支持3D图形渲染）等新特性，这些都极大地扩展了网页游戏的可能性。虽然HTML5并不直接替代Flash，但它的跨平台兼容性和丰富的功能使其成为游戏开发的新选择。在创建兼容性方面，作者讨论了如何确保游戏能在不同浏览器和旧版本的HTML5环境中运行，包括使用Modernizr库进行特性检测以及通过polyfills来弥补不支持的特性。此外，书中还提到了构建游戏的基本流程，从分析游戏机制，如交换宝石、匹配三个、关卡进度，到识别游戏的不同阶段，如启动画面、主菜单、游戏过程和高分显示。第二章详细介绍了游戏开发的初步步骤，包括理解游戏逻辑，建立应用程序骨架。在这个过程中，读者将学习如何设置HTML结构，添加基本样式，加载脚本，并创建启动屏幕。此外，章节还涉及了Web字体的使用以及启动屏幕的样式设计。第三章则转向移动设备开发，强调一次编写，多平台运行的理念。在移动平台上，开发者面临键盘输入与触摸输入的差异、小屏幕适配等挑战。书中提供了处理移动设备用户输入的方法，并指导如何优化界面以适应不同分辨率的屏幕。通过这本书，读者不仅可以掌握HTML5游戏开发的基础知识，还能了解到如何利用现代Web技术创造引人入胜且具有高度互动性的游戏体验。无论你是初学者还是有经验的开发者，这本书都将是你探索HTML5游戏开发世界的宝贵资源。

Using HTML5 for Games

Many features from the HTML5 specification have applications in game development, but

one of the first features to gain widespread popularity was the

canvas element. The visual

nature of this element without a doubt helped it spread quickly when the first interactive

animations and graphics effects started appearing. More advanced projects soon followed,

giving the new standard a dose of good publicity and promising a future with a more

dynamic and visually interesting web.

Canvas

Hobbyist game developers were also among the first to embrace HTML5, and for good

reason. The

canvas element provides web game developers with the ability to create

dynamic graphics, giving them a welcome alternative to static images and animated GIFs.

Sure, people have created more or less ingenious (and/or crazy) solutions in lieu of better

tools for creating dynamic graphics. Entire drawing libraries rely on nothing more than

coloured

div elements — that may be clever, but it’s not very efficient for doing anything

more than drawing a few simple shapes. Uniform Resource Identifier (URI) schemes exist

that let you assign source files to

img elements, for example, using a base64-encoded data

string, either directly in the HTML or by setting the

src or href property with JavaScript.

One of the clever uses of this

data: URI scheme has been to generate images on the fly

and thus provide a dynamically animated image, which is not a great solution for anything

but small and simple images. Wolf 5K, the winner of the 2002 contest The 5K, which

challenged developers to create a web site in just 5 kilobytes, used a somewhat similar

technique. The game, a small 3D maze game, generated black and white images at runtime

and fed them continuously to the image src property, relying on the fact that img

elements

can also take a JavaScript expression in place of an actual URL.

Graphics drawn on a

canvas surface cannot be declared with HTML markup but rather

must be drawn with JavaScript using a simple Application Programming Interface (API).

Listing 1.1 shows a basic example of how to draw a few simple shapes. Note that the full

API provides much more functionality than the small portion shown in this example.

Listing 1.1 Drawing Shapes with the Canvas API

var canvas = document.getElementById(“mycanvas”),

ctx = canvas.getContext(“2d”);

canvas.width = canvas.height = 200;

// draw two blue circles

ctx.fillStyle = “blue”;

ctx.beginPath();

ctx.arc(50, 50, 25, 0, Math.PI * 2, true);

ctx.arc(150, 50, 25, 0, Math.PI * 2, true);

ctx.fill();

// draw a red triangle

The audio element has a few issues still to be resolved, however. The major browser

vendors all seem to agree on the importance of the element and have all adopted the

specification, but they have so far failed to agree on which audio codecs should be

supported. So, while the theory of the

audio

element is all good, reality has left developers

with no other option than to provide audio files in multiple formats to appease all the

browsers.

The

audio element can be defined both in the mark-up and created dynamically with

JavaScript. (The latter option is of more interest to us as application and game developers.)

Listing 1.2 shows a basic music player with multiple source files, native user interface (UI)

controls, and a few keyboard hotkeys that use the JavaScript API.

Listing 1.2 A Simple Music Player with HTML5 Audio

</audio>

var audio = document.getElementById(“myaudio”);

document.onkeydown = function(e) {

if (e.keyCode == 83) {

audio.pause(); // Key pressed was S

} else if (e.keyCode == 80) {

audio.play(); // Key pressed was P

}

</script>

Audio data APIs that will eventually allow dynamically generated sound effects and

audio filters are in the works at both the Mozilla and WebKit camps. Because these

APIs are still very early in their development, I won’t be using them for the games in

this book, although I briefly examine the possibilities they present in Chapter 10

when I dive into HTML5 audio.

WebSockets

Ajax and the

XMLHttpRequest object that is at its heart brought new life to the web with

the Web 2.0 explosion of the early 2000s. Despite the many great things it has enabled,

however, it is still painfully limited. Being restricted to the HTTP protocol, the action is

rather one-sided, as the client must actively ask the server for information. The web server

has no way of telling the browser that something has changed unless the browser performs

a new request. The typical solution has been to repeatedly poll the server, asking for

updates, or alternatively to keep the request open until there is something to report. The

umbrella term Comet (

en.wikipedia.org/wiki/Comet (programming)) is sometimes

used to refer to these techniques. In many cases, that is good enough, but these solutions

are rather simple and often lack the flexibility and performance necessary for multiplayer

games.

Enter WebSockets. With WebSockets, we are a big step closer to the level of control

necessary for efficient game development. Although it is not a completely raw socket

connection, a WebSocket connection does allow us to create and maintain a connection

with two-way communication, making implementation of especially real time multiplayer

games much easier. In Listing 1.3, you can see that the interface for connecting to the

server and exchanging messages is quite simple.

Listing 1.3 Interacting with the Server with WebSockets

// Create a new WebSocket object

var socket = new WebSocket(“ws://mygameserver.com:4200/”);

// Send an initial message to the server

socket.onopen = function () {

socket.send(“Hello server!”);

};

// Listen for any data sent to us by the server

socket.onmessage = function(msg) {

alert(“Server says: “ + msg);

}

Of course, using WebSockets requires that we also implement a server application that is

compatible with the WebSockets protocol and capable of responding to the messages we

send to it. This doesn’t have to be a complex task, however, as I show you in Chapter 13

when I implement multiplayer functionality using Node.js on the server side.

Web Storage

Cookies are the usual choice when web applications need to store data on the client. Their

bad reputation as spyware tracking devices aside, cookies have also given developers a

much-

needed place to store user settings and web servers a means of recognizing returning

clients, which is a necessary feature for many web applications due to the stateless nature

of the HTTP protocol.

Originally a part of HTML5 but later promoted to its own specification, Web Storage can

be seen as an improvement on cookies and can, in many cases, directly replace cookies as

a larger storage device for key-value type data. There is more to Web Storage than that,

however. Whereas cookies are tied only to the domain, Web Storage has both a local

storage that is similar to cookies and a session storage that is tied to the active window and

page, allowing multiple instances of the same application in different tabs or windows.

Unlike cookies, Web Storage only lives on the client and is not transmitted with each

HTTP request, allowing for storage space measured in megabytes instead of kilobytes.

Having access to persistent storage capable of holding at least a few megabytes of data

comes in handy as soon as you want store to any sort of complex data. Web Storage can

only store strings, but if you couple it with a JavaScript Object Notation (JSON)

encoder/decoder, which is natively available in most browsers today, you can easily work

around this limitation to hold structures that are more complex. In the game I develop

during the course of the book, I use local Web Storage to implement a “Save Game”

feature as well as to store local high score data.

Listing 1.4 shows the very simple and intuitive interface to the storage.

Listing 1.4 Saving Local Data with Web Storage

// save highscore data

localStorage.setItem(“highscore”, “152400”);

// data can later be retrieved, even on other pages

var highscore = localStorage.getItem(“highscore”);

alert(highscore); // alerts 154200

WebGL

WebGL is OpenGL for the web. The most widely used graphics API is now available for

web developers to create online 3D graphics content. Of course, this has major

implications for the kind of web games that are now possible. As a testament to this

significance, Google developers released a WebGL port of the legendary first-person

shooter, Quake II, on April 1, 2010, to general disbelief due to both the carefully chosen

release date and the achievement itself.

Creating a full 3D game is a rather complex task and does not fit within the scope of

this book. Using WebGL also requires developers to be very aware of the platforms

they plan to target because Internet Explorer, for example, has no support

whatsoever and the problem can’t be worked around with polyfills. WebGL is not

used much in this book because it is not yet supported on mobile platforms such as

iOS or Android, although it will be one day. I do however use a bit of WebGL to

create an interesting intro screen for those with WebGL-enabled browsers.

HTML5 is (not) a Flash killer

Ever since the arrival of the

canvas element and the improved JavaScript engines, the

Internet has seen discussions and good old flame wars over whether the new standards

would replace Flash as the dominant delivery method for multimedia applications on the

web. Flash has long been the favorite choice when it comes to online video, music, and

game development. Although competing technologies such as Microsoft’

s Silverlight have

tried to beat it, they have only made a small dent in the Flash market share. HTML5 and its

related open technologies now finally look like a serious contender for that top spot.

It appears that Adobe, too, has acknowledged the power of HTML5 because they are

currently preparing the launch of Adobe Edge

(

http://labs.adobe.com/technologies/edge/), a development environment very

剩余398页未读，继续阅读

Andye

粉丝: 2
资源: 16

HTML5游戏开发深度解析：从基础到实践

html5+css3从入门到精通

HTML5从入门到精通

HTML5+CSS3从入门到精通 源码和示例

HTML5教程从入门到精通及网站源码、HTML5游戏、WEB前端开发技术视频教程

PHP开发从入门到精通

网站开发从入门到精通

php开发从入门到精通

Nginx开发从入门到精通

HTML5游戏开发实战：从入门到精通

Java游戏开发：从入门到精通

最新资源

HTML5+CSS3从入门到精通源码和示例