ebook img

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

211 Pages·2017·4.96 MB·English
Save to my drive
Quick download
Download
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

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

Introducing JavaScript Game Development Build a 2D Game from the Ground Up — Graeme Stuart Introducing JavaScript Game Development Build a 2D Game from the Ground Up Graeme Stuart Introducing JavaScript Game Development Graeme Stuart Market Harborough, Leicestershire, United Kingdom ISBN-13 (pbk): 978-1-4842-3251-4 ISBN-13 (electronic): 978-1-4842-3252-1 https://doi.org/10.1007/978-1-4842-3252-1 Library of Congress Control Number: 2017962296 Copyright © 2017 by Graeme Stuart This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Cover image designed by Freepik Managing Director: Welmoed Spahr Editorial Director: Todd Green Acquisitions Editor: Louise Corrigan Development Editor: James Markham Technical Reviewer: Aditya Shankar Coordinating Editor: Nancy Chen Copy Editor: Corbin Collins Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected], or visit www.apress.com/ rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book's product page, located at www.apress.com/ 9781484232514. For more detailed information, please visit www.apress.com/source-code. Printed on acid-free paper Table of Contents About the Author ��������������������������������������������������������������������������������vii About the Technical Reviewer �������������������������������������������������������������ix Introduction �����������������������������������������������������������������������������������������xi Part I: Drawing ����������������������������������������������������������������������������������1 Chapter 1: HTML5 and the Canvas Element ������������������������������������������3 HTML Primer ���������������������������������������������������������������������������������������������������������3 Drawing to the Canvas ������������������������������������������������������������������������������������������5 Style the Page to Highlight the Canvas �����������������������������������������������������������������7 Experiment with fillStyle ���������������������������������������������������������������������������������������9 Rendering Text ����������������������������������������������������������������������������������������������������10 More Shapes and Lines ���������������������������������������������������������������������������������������13 Summary�������������������������������������������������������������������������������������������������������������16 Chapter 2: Understanding Paths ���������������������������������������������������������17 Organizing Your Files ������������������������������������������������������������������������������������������17 The Canvas Grid System �������������������������������������������������������������������������������������19 Refactor Early, Refactor Often �����������������������������������������������������������������������������23 Working with Paths ���������������������������������������������������������������������������������������������26 Adding Curves to a Path ��������������������������������������������������������������������������������������33 Summary�������������������������������������������������������������������������������������������������������������37 iii TTaabbllee ooff CCoonnTTeennTTss Chapter 3: Drawing to a Design ����������������������������������������������������������39 Pac-Man ��������������������������������������������������������������������������������������������������������������40 Create a Function ������������������������������������������������������������������������������������������������43 Randomization ����������������������������������������������������������������������������������������������������44 Summary�������������������������������������������������������������������������������������������������������������46 Chapter 4: Drawing a Spaceship ��������������������������������������������������������47 Basic Trigonometry ���������������������������������������������������������������������������������������������47 A Basic Ship ��������������������������������������������������������������������������������������������������������48 Using Object Literals �������������������������������������������������������������������������������������������52 Transforming the Canvas Context �����������������������������������������������������������������������54 Adding Some Curves �������������������������������������������������������������������������������������������60 Summary�������������������������������������������������������������������������������������������������������������69 Chapter 5: Drawing an Asteroid ���������������������������������������������������������71 Drawing Basic Shapes ����������������������������������������������������������������������������������������71 Storing Shape Data ���������������������������������������������������������������������������������������������76 Summary�������������������������������������������������������������������������������������������������������������80 Part II: Animation����������������������������������������������������������������81 Chapter 6: Basic Animation ����������������������������������������������������������������83 Start Simple ��������������������������������������������������������������������������������������������������������83 A More Complicated Example �����������������������������������������������������������������������������86 Summary�������������������������������������������������������������������������������������������������������������92 Chapter 7: Animating Asteroids ����������������������������������������������������������93 A Solid Game Loop ����������������������������������������������������������������������������������������������93 Refactoring into Simple Objects �������������������������������������������������������������������������99 Using Object Constructors ��������������������������������������������������������������������������������101 iv TTaabbllee ooff CCoonnTTeennTTss Extending the Asteroid Prototype ����������������������������������������������������������������������102 Working with Multiple Asteroids �����������������������������������������������������������������������105 Summary�����������������������������������������������������������������������������������������������������������107 Chapter 8: Practicing Objects �����������������������������������������������������������109 Why Objects? ����������������������������������������������������������������������������������������������������109 Pac-Man Chased by Ghosts ������������������������������������������������������������������������������110 The PacMan object �������������������������������������������������������������������������������������������112 The Ghost Object �����������������������������������������������������������������������������������������������117 Summary�����������������������������������������������������������������������������������������������������������123 Chapter 9: Inheritance ����������������������������������������������������������������������125 Set Up a Template ���������������������������������������������������������������������������������������������125 Newton’s Laws of Motion ����������������������������������������������������������������������������������127 A General-Purpose Mass Class �������������������������������������������������������������������������128 A Simple Approach to Inheritance ���������������������������������������������������������������������133 Asteroids �����������������������������������������������������������������������������������������������������������134 The Ship ������������������������������������������������������������������������������������������������������������137 Summary�����������������������������������������������������������������������������������������������������������140 Part III: Building the Game ������������������������������������������������141 Chapter 10: Simple Keyboard Interaction �����������������������������������������143 Controlling Pac-Man �����������������������������������������������������������������������������������������143 Summary�����������������������������������������������������������������������������������������������������������149 Chapter 11: Controlling the Ship ������������������������������������������������������151 Thruster Control ������������������������������������������������������������������������������������������������151 Steering�������������������������������������������������������������������������������������������������������������156 Shooting ������������������������������������������������������������������������������������������������������������158 Summary�����������������������������������������������������������������������������������������������������������168 v TTaabbllee ooff CCoonnTTeennTTss Chapter 12: Collision Detection ��������������������������������������������������������169 A Quick Refactor �����������������������������������������������������������������������������������������������169 Ship vs� Asteroids ���������������������������������������������������������������������������������������������178 Taking Damage �������������������������������������������������������������������������������������������������182 Asteroid vs� Projectile ���������������������������������������������������������������������������������������185 Summary�����������������������������������������������������������������������������������������������������������193 Chapter 13: Death or Glory ���������������������������������������������������������������195 Game Over ��������������������������������������������������������������������������������������������������������195 Restarting the Game �����������������������������������������������������������������������������������������199 Implementing Levels �����������������������������������������������������������������������������������������201 Summary�����������������������������������������������������������������������������������������������������������203 Conclusions �������������������������������������������������������������������������������������������������������204 Index �������������������������������������������������������������������������������������������������207 vi About the Author Graeme Stuart is a self-taught developer with 15 years of experience building data analysis tools and web-based applications using JavaScript, Ruby, and Python. He has a PhD in energy management, and much of his programming skill was originally developed to that end. He taught JavaScript games programming to first-year undergraduates for a while, and this book is the result. He now mostly uses complexity science to encourage a deep understanding of agile approaches to software engineering and to justify his outlandish research ambitions. vii About the Technical Reviewer Aditya Shankar started programming in 1993 when he was first introduced to the world of computers. With no access to the Internet or online tutorials at the time, he wrote his first game in GW-BASIC by painstakingly retyping code from a book he found at the local library. After graduating from the Indian Institute of Technology Madras in 2001, he spent nearly a decade working as a software consultant, developing trading and analytics systems for investment banks and large Fortune 100 companies, before eventually leaving his corporate life behind so he could focus on doing what he loved. A self-confessed technology geek, he has spent his time since then working on his own projects and experimenting with every new language and technology that he could, including HTML5. During this time, he became well known for singlehandedly re-creating the famous RTS game Command and Conquer, as well as Commandos: Behind Enemy Lines, entirely in HTML5. Apart from programming, Aditya is passionate about billiards, salsa dancing, fitness, and personal development. He maintains a personal website where he writes articles on game programming, personal development, and billiards, and shares his popular game demos. When he’s not busy writing or working on his own projects, Aditya does consulting work with companies to help them launch new software products and games. ix Introduction This book provides a full set of exercises in which we will build a fully functional HTML canvas game. Though not a direct clone, the game is inspired by the 1979 Atari classic, Asteroids. The code is provided for you and is introduced piece by piece over the various chapters of the book. If you’d like to try Asteroids, or if you’ve never played it, the the modern Atari version can be played at https://atari.com/arcade#!/arcade/ asteroids/play. I’ve made a few different gameplay decisions for the game we create in this book, and I encourage you to attempt to adapt the game in any direction you like as we go along, if you feel confident in doing so. It’s all good practice! Typically, each chapter introduces an area of game design in a generic way, develops the ideas towards implementing an aspect of the Asteroids game, and urges you to think about alternative approaches. Towards the end of the book, the game will be complete, and you should have all the skills necessary to build a quality game of your own. During most of the exercises, you’re encouraged to be creative. Go through the material provided, consider the challenges presented, and explore the impact of modifying the provided code. There’s no “correct” way to design a game like this—it involves making many decisions, and the provided code is only one of thousands of possible ways to do it. So, please, try it your way if you feel confident enough. That’s a great way to learn something. xi

Description:
Learn to build a fully-functional 2D game inspired by the 1979 Atari classic, Asteroids, using just HTML5, CSS and JavaScript. Developing games has never been easier than it is now. New web technology allows even beginner developers to turn their hand to game development. Developed from an undergrad
See more

The list of books you might like

Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.