Head First JavaScript Programming

Chapter 8. Building an app

Bringing it All Together

Put on your toolbelt. That is, the toolbelt with all your new coding skills, your knowledge of the DOM, and even some HTML & CSS. We’re going to bring everything together in this chapter to create our first true web application. No more silly toy games with one battleship and a single row of hiding places. In this chapter we’re building the entire experience: a nice big game board, multiple ships and user input right in the web page. We’re going to create the page structure for the game with HTML, visually style the game with CSS, and write JavaScript to code the game’s behavior. Get ready: this is an all out, pedal to the metal development chapter where we’re going to lay down some serious code.

This time, let’s build a REAL Battleship game

Sure, you can feel good because back in Chapter 2 you built a nice little battleship game from scratch, but let’s admit it: that was a bit of a toy game—it worked, it was playable, but it wasn’t exactly the game you’d impress your friends with, or use to raise your first round of venture capital. To really impress, you’ll need a visual game board, snazzy battleship graphics, and a way for players to enter their moves right in the game (rather than a generic browser dialog box). You’ll also want to improve the previous version by supporting all three ships.

In other words, ...