Tired of learning to code by watching endless lectures, or reading long narratives? Are you the type who likes to dive right in and start coding and creating? Do typical coding books bore you? If you answered yes to any of these questions, this book is for you! The best way to learn is to learn by doing. In this guide you’ll learn HTML, Javascript and CSS as you develop an entire app based on the game Wack-A-Mole. All of the assets you need are provided in the book, and via convenient download. The game includes three different levels, sounds, animations, background music, score keeping and much more. As you quickly progress through the book you’ll learn the HTML, Javascript and CSS used to make an arcade-style video game. About the App Development Guide series The App Development Guide series from LearnToProgram Media is designed to provide you with guides to creating interesting apps. The app development guides provide all of the code, assets, and other materials you will need to create complete applications. Some apps in this series are designed to work within a web browser-others are designed to be deployed to mobile devices-either as a native iOS or Android App or as a HTML5 based app that works on both platforms. I think that, naturally, the best way to learn app development is to actually build apps. Our goal is not to provide an exhaustive explanation for every tag, method and property we use in building the apps. In this series, it is our hope that the guides will provide context to integrate what you’ve learned previously, and, perhaps, set you up for future learning. Table of Contents Introduction Playing the Game Assets - Images, Animations, and Sounds The Container - index.html and mole.css CreateJS - createjs.js Helper Files - constants.js, display.js, and globals.js The Game Logic - game.js Mise en Place - window.onload, init, setupCanvas, and preloadAssets Welcoming the Player - assetsLoaded() and registerSpriteSheets() Loading Each Level - loadLevel() Starting the Level - startLevel(), createLevelGrid(), and displayLevelGrid() Starting the Gameplay - playGame() and displayScore() The Game Loop - playLoop() and endLevel() Popping Up Moles - createRandomMole() Wacking the Mole - hit(mole) Ending the Game - gameOver()
