jump start coffeescript

By Earle Castledine GET UP TO SPEED WITH COFFEESCRIPT IN A WEEKEND By Earle Castledine www.it-ebooks.info JUMP START COFFEESCRIPT BY EARLE CASTLEDINE www.it-ebooks.info Jump Start CoffeeScript by Earle Castledine Copyright © 2012 SitePoint Pty. Ltd. Expert Reviewer: Craig SharkieProduct Manager: Simon Mackie English Editor: Kelly SteeleTechnical Editor: Diana MacDonald Cover Designer: Alex WalkerAssistant Technical Editor: Ben Axnick Indexer: Glenda Browne Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews. Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein. Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark. Published by SitePoint Pty. Ltd. 48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: business@sitepoint.com ISBN 978-0-9872478-2-7 (print) ISBN 978-0-9872478-3-4 (ebook) Printed and bound in the United States of America ii www.it-ebooks.info Dedication To Amelia: If I could write, I’d write a book for you. About the Author Sporting a Masters in Information Technology and a lifetime of experience on the Web of Hard Knocks, Earle Castledine (aka Mr Speaker) holds an interest in everything computery. Raised in the wild by various 8-bit home computers, he settled in the Internet during the mid-nineties and has been living and working there ever since. A senior systems analyst and JavaScript flâneur, he is equally happy in the muddy pits of .NET code, the dense foliage of mobile apps and games, and the fluffy clouds of client-side interaction development. As co-creator of client-side opus http://www.turntubelist.com/, as well as many web-based experiments, Earle recognizes the Internet not as a lubricant for social change, but as a vehicle for unleashing frivolous ECMAScript gadgets and interesting time-wasting technologies. About the Expert Reviewer Craig was once happy to call himself a developer, speaker, author, and advocate. Since then, he’s added JS meet founder and JSConf organizer to the list—and expert reviewer. Should you add husband and father, and you’d be getting closer to working out why he’s often un- reasonably happy. In 2000, he was asked by short-sighted bosses where he wanted to be in five years’ time, and twelve years on he’s still doing the same thing—working with languages he loves in a community that expands on possibilities as fast as it creates them. About SitePoint SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, Mobile, design, and more. About Jump Start Jump Start books provide you with a rapid and practical introduction to web development languages and technologies. Around 150 pages in length, they can be read in a weekend, giving you a solid grounding in the topic and the confidence to experiment on your own. iii www.it-ebooks.info www.it-ebooks.info Table of Contents Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi Challenge Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii Friends of SitePoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii Chapter 1 Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 HTML5 Game Jam Challenge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 The Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Missing Cruft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Whitespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Types, Variables, and Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Starting the Game Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Installing: an Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Client-side Compilation on the Fly . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Installing CoffeeScript Properly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Choosing Our Tech . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Further Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Drawing Something: Using Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 We’re on Our Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 www.it-ebooks.info Chapter 2 CoffeeScript Fundamentals . . . . . . . . . . 23 More of the Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Setting Up Our Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 alert versus console.log . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Returning to JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Conditionals and Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Loops and Ranges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Objects and Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Introducing Professor Digman-Rünner . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 The Canvas API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Context and Soaking up Nulls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Drawing Primitives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Draw an Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Processing a Sprite Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Random Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Ready to Rumble . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Chapter 3 Features to Boost Your Game . . . . . . . . 47 Team Meeting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Functions Revisited . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Default Argument Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Function Gotchas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 List Comprehensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Creating a Level . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Building Larger Projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Removing the Safety Wrapper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Compiling a List of Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Getting Serious with Cake . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Handling Player Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 vi www.it-ebooks.info Dispatching with Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Adding the Professor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 And There Was Light! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Chapter 4 Game Loop and Classes . . . . . . . . . . . . . . . 67 The Game Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Improving Our Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Looping with RequestAnimationFrame . . . . . . . . . . . . . . . . . . . 70 Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Constructor and Auto Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Class Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Game Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 The Level Class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 The Block Class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Loading Levels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Driving a Level . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Kicking It All Off . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Adding New Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Stay Classy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Chapter 5 Bringing a Game to Life . . . . . . . . . . . . . . . 91 Block Collision Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Destructured Assignment 1: Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Splats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Gravity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Ladders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Collecting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Testing Class Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Collision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Ninja AI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 vii www.it-ebooks.info Destructured Assignment 2: Objects . . . . . . . . . . . . . . . . . . . . . . . . 113 Adding the AI Rules into the Code . . . . . . . . . . . . . . . . . . . . . . . . . 115 Power to the Professor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Digging Holes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Building Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Set for Life . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Chapter 6 CoffeeScript and HTML5 FX . . . . . . . . 121 HTML-ifying things . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Using jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 CSS Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Canvas Scrolling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Audio and Sound Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Walk Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Falling Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Screens and Dialogs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Particles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Game Over . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Chapter 7 Epilogue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 And on the Seventh Day . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 viii www.it-ebooks.info Preface CoffeeScript is “a little language that compiles into JavaScript.” 1 It aims to smooth over some of JavaScript’s rougher edges while highlighting and augmenting the impressive flexibility at the core of the JavaScript language. It’s clean, concise, and maintainable, and makes writing client-side code really, really fun. Jump Start CoffeeScript is a book about CoffeeScript. Its goal is to help you become productive with CoffeeScript as quickly as possible. From the first line in the book, you’ll be writing code that shows just how easy it is to take the plunge into this delightfully addictive world. Along the way, we’ll make a game. Not just the outer husk of a boring space-based shoot ’em up, but a complete, extensible HTML5 game with tile maps, particle effects, AI, and (of course) ninjas. You’ll see how CoffeeScript’s succinctness and elegance is the perfect partner for effectively prototyping and refining your ideas. That’s it. By the end of this book, you’ll know how to make HTML5 games, and proficiently code (and think) in CoffeeScript, as well as have a deeper understanding of the power and beauty of JavaScript itself. Who Should Read This Book If you have some knowledge of web programming concepts and want to streamline writing JavaScript, this book is for you. Conventions Used You’ll notice that we’ve used certain typographic and layout styles throughout this book to signify different types of information. Look out for the following items. Code Samples Code in this book will be displayed using a fixed-width font, like so: 1 http://coffeescript.org/ www.it-ebooks.info [...]... define a snippet of CoffeeScript, you have to wrap it in a script tag and give it the custom type text /coffeescript (rather than the usual text/javascript) This www.it-ebooks.info 11 12 Jump Start CoffeeScript prevents the browser from trying to execute it as regular JavaScript, and gives the CoffeeScript library a way to find all the code it needs to compile: alert... means that CoffeeScript runs wherever JavaScript runs, and can do whatever JavaScript can do And with the rise of technologies like Node.js and HTML5, that’s a lot of places and a lot of functionality www.it-ebooks.info 2 Jump Start CoffeeScript Why write a language that’s simply a copy of another language? Because the primary purpose of CoffeeScript is to be a simpler version of JavaScript CoffeeScript. .. some CoffeeScript > alert "CoffeeScript is here, too!" CoffeeScript running directly in the browser … weird! If you didn’t get the alert dialog, double-check the path to the library, and be sure you set the script type correctly You should make sure the functions we wrote above work here too www.it-ebooks.info Getting Started Installing CoffeeScript. .. implementation is not from CoffeeScript, but from the native browser code that’s called from the JavaScript output When we’re using CoffeeScript in the browser, we have access to the DOM as we do in JavaScript www.it-ebooks.info 3 4 Jump Start CoffeeScript Let’s remove the default CoffeeScript code and add some of our own We’ll create a small function to reverse a string There’s no need to fully understand... (collided) { lives = lives - 1; if (lives === 0) { alert("Game Over"); } } www.it-ebooks.info 5 6 Jump Start CoffeeScript JavaScript under the Hood This is the actual JavaScript that the CoffeeScript transpiles itself into It may not be exactly how you’d write your own JavaScript, but it is functionally equivalent In CoffeeScript, we don’t use a var declaration; it’s done for us, and we’re using some kind... headers to each file, for example Types, Variables, and Scope CoffeeScript types are JavaScript types: numbers are numbers, strings are strings, Booleans are Booleans But the way variables are handled is quite different As you’ve seen from the examples so far, there is no var statement in CoffeeScript it’s www.it-ebooks.info 7 8 Jump Start CoffeeScript handled automatically So, if you had the following... bytes Again, typing a few extra characters is not the issue; the point is that our CoffeeScript code contains just the bare essentials to define www.it-ebooks.info 9 10 Jump Start CoffeeScript our problem In this case, it does it by replacing the function keyword with the symbol ->, and by having implicit returns The CoffeeScript compiler tries to make sure that all statements in the language can be... run some code? It turns out that the options available for executing CoffeeScript are legion As we only have a few minutes to get up to speed, we’ll choose the simplest: ■ Head to the CoffeeScript website [http://www .coffeescript. org] ■ Select the Try CoffeeScript tab ■ Activate the Run button, as shown in Figure 1.2 Figure 1.2 Hello CoffeeScript Ebbs and Flows The Internet ebbs and flows like the tides,... the CoffeeScript website If that’s the case, don’t fear: we’re covering more options in the section called “Starting the Game Project” The default code is a simple alert box that shows the text, “Hello, CoffeeScript! ” Any CoffeeScript code in the left panel will be transpiled to its JavaScript output, shown in the right-hand panel, and executed The actual pop-up box implementation is not from CoffeeScript, ... CoffeeScript to thank for it! Starting the Game Project Hmmm, this is a bad sign It’s the kick-off meeting on day one and your team is already half an hour late After ordering another cup of coffee,2 you decide you might as well start on the game The first step is to create the base project and set up your environment for development Installing: an Overview As we mentioned right at the beginning, CoffeeScript . Castledine GET UP TO SPEED WITH COFFEESCRIPT IN A WEEKEND By Earle Castledine www.it-ebooks.info JUMP START COFFEESCRIPT BY EARLE CASTLEDINE www.it-ebooks.info Jump Start CoffeeScript by Earle Castledine Copyright. writing client-side code really, really fun. Jump Start CoffeeScript is a book about CoffeeScript. Its goal is to help you become productive with CoffeeScript as quickly as possible. From the. You’ll find a stack of information on JavaScript, PHP, Ruby, Mobile, design, and more. About Jump Start Jump Start books provide you with a rapid and practical introduction to web development languages