HTML5与JavaScript游戏设计进阶指南

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

"Advanced Game Design with HTML5 and JavaScript" 是由 Rex van der Spuy 编著的一本实用教程，专门针对那些希望利用 HTML5 和 JavaScript 从头开始创建视频游戏的专业开发人员或有志于游戏开发的进阶学习者。这本书共分为 11 章，深入探讨了游戏制作的核心技术，包括但不限于： 1. **最新 JavaScript ES6 技能**：书中介绍最新的 JavaScript 版本，帮助读者掌握必备的语言技能，以便构建高效的游戏。 2. **Canvas 绘画 API**：章节中讲解如何利用 Canvas API 创建游戏图形，如精灵（sprites）和场景图（scene graph），以及管理游戏资源。 3. **游戏资产处理**：学会加载、管理和优化游戏素材，如纹理贴图（texture atlas）的使用。 4. **矢量数学与物理**：通过向量数学和分离轴理论（Separating Axis Theorem, SAT），作者展示了如何控制游戏世界的几何和物理行为，以及高级碰撞检测策略。 5. **音频处理**：通过 WebAudio API 创建定制的音乐和音效播放器，实现丰富的音频体验。 6. **关键帧动画与交互**：掌握帧速率控制和游戏循环技巧，以及如何创建响应鼠标的交互式元素。 7. **粒子效果与场景管理**：学习如何设计粒子爆炸和屏幕震动效果，以及如何管理复杂的游戏场景。 8. **代码精进**：本书鼓励开发者深入理解代码，避免依赖框架或引擎，提高代码质量。 9. **自定义游戏引擎**：通过构建自己的引擎，学习如何使用可重用组件快速开发游戏，提升效率。这本书适合有一定 JavaScript 经验的开发者，无论是作为资深程序员提升技能的途径，还是作为 "Foundation Game Design with HTML5 and JavaScript" 的后续读物，都能在本书中找到深入学习游戏设计和编程技术的机会。所有内容均结合实例进行讲解，包括数百幅插图和数千行源代码，让读者能够直接应用到自己的项目中，并激发创新思维。"Advanced Game Design with HTML5 and JavaScript" 是一本帮助开发者将游戏设计技能推向更高层次的实用指南。"

Acknowledgments

All illustrations were created by the author, except the following:

The game graphics for Treasure Hunter were designed by Lanea Zimmerman

from the Tiny 16 tileset: opengameart.org/content/tiny-16-

basic. Thanks, Lanea!

For the game Flappy Fairy, the scrolling cloud background was created by the

author Downdate (opengameart.org/content/cartoony-sky) and

the green block by the author GameArtForg

(opengameart.org/content/blocks-set-01).

In Chapter 8, the walking elf character was based on graphics designed by

Wulax (opengameart.org/content/lpc-medieval-fantasy-character-sprites) and

forest background graphics were based on tiles designed by Leonard Pabin

(opengameart.org/content/whispers-of-avalon-grassland-tileset).

Thanks to Sami ur Rahman Qazi for a suggested improvement on how the gotoAndStop

method handles texture atlas frames of differing sizes in Chapter 4.

And, as always, thanks to the superhuman efforts of Ben Renow-Clarke and Christine Ricketts

for the seemingly impossible feat of pulling this whole book together and making it such a fun

project to work on.

Introduction
How do you make a video game? This book will show you everything you need to know. You’ll
learn how to make all kinds of 2D action games by building your own development tools, from
scratch, using low-level open-source technologies. All you need is this book, a text editor, a web
browser and any old computer. No libraries, no frameworks, no game engines, no black-box
mystery code, and no expensive proprietary software or licenses. And you’ll be able to publish
your games cross-platform to the desktop, mobile devices, and the Web. As you’ll soon see, by
writing just few hundred lines of code, you’ll be well on your way to developing any 2D video game
you can imagine.
Sound like fun? It’s the best fun there is! Here’s what you’ll learn:
New JavaScript tips and tricks, including some that arrived with ES6 (Chapter
1).
How to draw graphics on the screen and use those graphics to create
reusable game components (Chapters 2 and 4).
How to create a scene graph (a parent-child hierarchy for game objects) for
maximum flexibility in creating game scenes (Chapter 4).
How to efficiently load images, sounds, fonts, and other game assets
(Chapter 3) and build a loading progress bar (Chapter 11).
How to animate objects with physics (Chapter 5), and how to created detailed
game characters using keyframe animation (Chapter 8).
Everything you need to know about collision detection (Chapter 7), including
the video game designer’s “secret black art”: vector math (Appendix A).
Saving and loading game data, running a game in full screen mode (Chapter
1), and scaling a game to any window size (Chapter 11.)
What is the separating axis theorem (SAT) and why is it useful for games?
Find out in Appendix A!
How to create buttons, add mouse, touch and keyboard interactivity to your
games, and learn how to create a drag-and-drop system for game objects
(Chapter 6).
How to add special effects to your games: easy parallax scrolling, particle
effects (Chapter 8), and screen shaking (Chapter 11).
How to play and control sound files and how to generate synthesized sound
effects dynamically from pure code (Chapter 9).
How to build a tweening system and make game objects follow fixed curved
paths (Chapter 10).
How to put all these pieces together to make your own game engine so that

you can build games in the quickest, easiest, and most fun way (Chapter 11).

And you’ll learn lots of the most modern coding and game development

practices along the way.

This book is a self-contained, classical education in making video games and a compendium

of all the important techniques you’ll need to know to flourish as a game designer. If you were

alone on a desert island with only a solar-powered laptop, a pile of coconuts, and this book, you’d

have everything you need to recreate the entire history of 2D video games from Spacewar! to

Flappy Bird.

Things You Need to Know

To make the best use of this book you need to have a moderate degree of programming literacy.

You should be able to glance at a block of code in whatever programming language you’re most

familiar with and have a general idea of how it works. You don’t need to think of yourself as a

“programmer” or some kind of expert. You just need to be able to fumble your way through

programming problems with a reasonable degree of confidence. If you enjoy programming, you’ll

love this book.

The programming code in this book is written in JavaScript. JavaScript belongs to the C family

of languages (C, C++, C#, Objective-C, Java, and AS3.0) so if you know any of those languages,

you’ll be able to use JavaScript with ease. And even if you’ve never used JavaScript before,

Chapter 1 gives you a quick primer.

Have you never done any programming before? Then start with this book’s predecessor,

Foundation Game Design with HTML5 and JavaScript. It will teach you how to program, while

you’re learning how to make games, and cover everything you need to know to start using this

book.

Have you read Foundation Game Design with HTML5 and JavaScript? If so, you’re well

prepared. If you think you might have forgotten a bit, or need a refresher before you start, relax!

I’ve written this book in a very sneaky way. It covers all the basics, from scratch, and squeezes in

all the advanced, interesting new stuff all along the way. So, if you’ve forgotten something, like how

to make and render a sprite, don’t worry: it’s all in here and packed with loads of clever new tricks.

Where the Foundation book was all about learning how to program and how to do things in the

most understandable way, this Advanced book is all about doing things in the best and most

exciting ways. I’ve written this to be a completely comprehensive book about making games that

will reintroduce you to our beloved art form with enlightening and eye-opening new ways of doing

things.

How to Read This Book

This is a storybook. You can read it in bed, or on the beach. Just as you would with Jane Eyre or

The Lord of the Rings, start at Chapter 1 and work your way through to the end. Each chapter

builds on the techniques and concepts of the previous chapter. But if there are specific techniques

you want to know about right away, just jump in at any spot—you should be still be OK.

The only part that’s different is Appendix A: “Vectors for Movement and Collision Detection.”

You can read it at any time. Appendix A is a deep exploration of vector math concepts which are

generally relevant to all the other chapters in the book—but also optional. If you want to know all

about vectors before you start Chapter 1, go ahead and read the Appendix first. But if you’re not

really that interested, or just want to keep it for future reference, you can skip it completely.

The Source Code

Most of the content in this book is actually not in this book. You’ll find it in the source code files that

accompany each chapter. You can download the source code from this book’s product page at

www.apress.com, or at this book’s GitHub repository:

https://github.com/kittykatattack/agd

Yes, there’s a lot of source code! In fact, there’s so much that most of the printed examples in

this book only highlight the most significant, vital parts. You’re a good enough programmer to

understand how those parts fit into the bigger picture. But if you have any doubts, open up the

complete working source code and take a look.

All the code in this book is written in pure JavaScript and HTML. It doesn’t use any abstraction

layers like CoffeeScript, TypeScript, or JQuery.

This book was written during a time when many of the best features of HTML5 for game

developers were still experimental and required “vendor prefixes” to work properly on all platforms.

I’ll mention in the text if it’s likely that you’ll need to use them, but I’ll try to keep them out of the

printed code in this book. (For maximum compatibility I’ve kept them in the source code, but

usually tidied them away in a JS polyfill file.) Hopefully, you’re reading this book in a happy, future

time when these vestigial tails of HTML5’s evolution have disappeared. But until then, here are the

most common vendor prefixes in current use:

Vendor CSS Prefix JavaScript Prefix

Microsoft

Mozilla

Opera

Chrome, Safari

-ms-

-moz-

-o-

-webkit-

moz

webkit

Tip Writing cross-platform CSS can be particularly difficult, because there are often

discrepancies between vendors about how CSS properties are defined. You can make CSS fun

again by using a good preprocessor like Sass, and use its Compass extension to create all the

vendor-specific code for you automatically.

Also, make sure that you run all the source code in a webserver. Many JavaScript and HTML5

features that we’ll be using in this book, like XHR, will only work inside a webserver. A nice cross-

platform way to do this is to install Node, which is a marvelous pure JavaScript server. Visit

nodejs.org and follow the instructions to install it on your platform. Then install a great little

helper utility that runs on top of it, called http-server: (github.com/nodeapps/http-

server). It’s a fast, mini-webserver that you can run with one line of code. Use the command line

to CD to the root directory of your project and type

http-server

剩余488页未读，继续阅读

ramissue

粉丝: 354
资源: 1487

HTML5与JavaScript游戏设计进阶指南

Advanced Game Design with HTML5 and JavaScript

advanced game design with html5 and javascript

foundation-game-design-w-html5-[removed]Rex van der Spuy的“带有HTML5和JavaScript的基础游戏设计”的源代码-html game source code

JavaScript Applications with Node.js, React, React Native and MongoDB

Hands-On Game Development with WebAssembly Learn WebAssembly C++.epub

Angular.2.By.Example.178588719X

HTML5与JavaScript高级游戏开发指南

Foundation HTML5 Animation with JavaScript - HTML5动画设计基础

IncompatibleClassChangeError(解决方案).md

中国智慧工地行业市场研究（2023）Word(63页).docx

最新资源