Jump Start CoffeeScript
166 Pages
English

Jump Start CoffeeScript

-

Description

A practical and concise introduction to CoffeeScript, a programming language that compiles into JavaScript and that makes working with JavaScript easier. The book lays out the basics of the language, its syntax, and the interesting features that set it apart from JavaScript. It should satisfy anyone with an intermediate level of understanding of JavaScript who needs a conceptual and practical introduction to CoffeeScript.

The book is based around a practical project, leading you through the building of a simple HTML-based 2D game, and explaining the language's philosophy, syntax, and features step-by-step along the way. You'll be able to see results on-screen from the very beginning, starting with a simple JavaScript drawing function transformed into CoffeeScript. The game's code is based on well- understood principles and prior art, using common, simple programming patterns that are easy to grasp while also demonstrating CoffeeScript's expressiveness.

This is a fun and fast-paced book that rewards you for each completed step with interesting game features. You will finish the book with the sense of accomplishment that comes from building something fun, as well as having gained a solid understanding of CoffeeScript and an interest in exploring its more advanced features.


Subjects

Informations

Published by
Published 28 November 2012
Reads 4
EAN13 9781457191961
Language English
Document size 1 MB

Legal information: rental price per page €. This information is given for information only in accordance with current legislation.

By Earle Castledine
GET UP TO SPEED WITH COFFEESCRIPT IN A WEEKEND
JUMP START COFFEESCRIPT BYEARLE CASTLEDINE
ii
Jump Start CoffeeScript by Earle Castledine
Copyright©2012 SitePoint Pty. Ltd.
Product Manager: Simon Mackie Technical Editor: Diana MacDonald Assistant Technical Editor: Ben Axnick Indexer: Glenda Browne
Expert Reviewer: Craig Sharkie English Editor: Kelly Steele Cover Designer: Alex Walker
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
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
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 1Getting 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
vi
Chapter 2CoffeeScript Fundamentals. . . . . . . . . . 23 More of the Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Setting Up Our Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 alertversusconsole.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 3Features 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
Dispatching with Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Adding the Professor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 And There Was Light! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Chapter 4Game Loop and Classes. . . . . . . . . . . . . . . 67 The Game Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Improving Our Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Looping withRequestAnimationFrame70. . . . . . . . . . . . . . . . . . . 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 5Bringing 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
viii
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 6CoffeeScript 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 7Epilogue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145. . . And on the Seventh Day ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Preface
1 CoffeeScript is “a little language that compiles into JavaScript.” 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,reallyfun.
Jump Start CoffeeScriptis 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/