Foundation Game Design With Html5 and JavaScript by Spuy, Rex van der -- Read -- Imperial Library of Trantor

Index

Cover Title Copyright Dedication Contents at a Glance Contents About the Author About the Technical Reviewer About the Cover Image Artist Acknowledgments Introduction Chapter 1: Learning HTML and CSS

What you need

A computer Programming software Graphic design software (optional) What kinds of games can I make?

Learning HTML

Tags Structuring HTML documents A basic web page

Make it prettier with CSS

Font styles List styles Borders, padding, height, and width Cascading styles Using <DIV> elements

Loading background images into HTML elements

Positioning elements with CSS Floating elements More about block sizes: The box model

Organizing your files

Separating HTML and CSS code Organizing code and media

Learning more about HTML and CSS Summary

Chapter 2: Learning JavaScript

Setting up

Displaying messages in the console What should you do if your program doesn’t work?

Variables

Working with numbers Working with true or false variables Decision making Checking more conditions Using && and || Using functions

Controlling HTML and CSS

Creating new text in an HTML element Changing CSS with JavaScript Clicking on buttons Counting Entering and displaying text

Organizing your JavaScript code

Linking the JavaScript program to the HTML document Using the program.js file

A quick guide to debugging code Summary

Chapter 3: Your First Games

A basic number-guessing game

Initializing variables Using functions to modularize the program Forcing strings to become numbers Displaying the game state Winning and losing Modular programming with functions

Polishing up

Allowing only numbers to be entered Using the Enter key to input numbers Improving the user interface Creating random numbers Finishing the game

Making really nice buttons

Round corners Gradients Drop shadows Understanding the :hover and :active states

Seeing the game

Adding a visual display to the number-guessing game

Alien Attack!

Setting up the game Figuring out if the alien has been hit Moving the game objects Making the game better

Summary

Chapter 4: Creating a Game World

Loops Using arrays for storing lots of information

Array basics Pushing elements into an array Removing elements from an array Searching arrays A simple database

Making an adventure game

Drawing the map Moving around the world Finding the player’s action Adding images Checking game-world boundaries Game items

The complete code listing

Creating quests and puzzles

Making your own game Summary

Chapter 5: Making Maps

Arrays inside arrays

Looping through a 2D array Visualizing 2D arrays

Case study: Island Adventure

Drawing the map Displaying the map Adding the ship Moving the ship Figuring out where the ship is Creating the game Adding the monster Moving the monster

Summary

Chapter 6: Game Objects and Animation

Displaying images with canvas

Using the canvas’s drawImage method

How to make objects

Object properties Object methods Using object properties inside methods

Making copies of objects

Adding new properties and methods Looping through objects

Object states

Displaying the states with canvas

Timed state changes

Using setTimeout

Animation

Frames and tilesheets An object for animation Using a tilesheet with more than one row Looping animations Randomly starting animations

Monster Smash!

Making a smashable monster Making lots of monsters Clicking on the monsters Finishing the game

Summary

Chapter 7: Game Sprites

Sprites

Creating a basic animated sprite Making sprites Setting up the canvas and sprite images Animating and displaying a sprite

requestAnimationFrame Making many sprites

Using individual image files for each sprite

An interactive sprite

Moving the sprite Making it bigger and smaller Hiding and showing the sprite

An interactive sprite with rotation

Adding transparency Adding shadows Using the final render function Using HTML sprites

Moving a sprite with the keyboard

Moving with velocity Using the keyboard’s arrow keys Figuring out if a key is not being pressed Making the sprite move

Setting screen boundaries

Blocking movement at the screen edges Screen wrapping

Scrolling

Better scrolling Parallax scrolling

Moving a sprite with the mouse and touch

Chasing the mouse Moving a sprite by touch

Summary

Chapter 8: Bumping into Things

Point collisions

The hitTestPoint function Rendering canvas text

Circle collisions

Detecting collisions between circles Programming the circle collision code Preventing the circles from overlapping

Rectangle collisions

Detecting collisions between rectangles Changing a sprite’s state Changing a character’s health meter Updating a score Preventing rectangles from overlapping Using the blockRectangle function

Using collision functions in your games Summary

Chapter 9: Making Video Games

The file and folder structure

The tilesheet The HTML file

Starting the project

The alienArmada1.js file Loading multiple assets Using a game state manager

Firing missiles Making aliens

The alienObject The alien timer The makeAlien function Moving the aliens

Shooting down aliens Displaying game messages

Setting up the game messages Displaying the score and ending the game Displaying the game over messages

Adding sound

Loading sounds Playing sound effects

The final game code Summary

Chapter 10: Maze Games

Planning maze games Building the maze

Designing the maze with 2D arrays The BUILD_MAP game state Building the level map Layering the map level arrays

Making bigger sprites and game messages Playing Time Bomb Panic

Moving the player character Collisions with the boxes and the screen boundaries Defusing the bombs The game timer Ending the game

The complete code for Time Bomb Panic Scrolling Time Bomb Panic

Making big level maps Adding gameWorld and camera objects Scrolling the camera Preventing the UI sprites from scrolling Rendering the scrolling game world

Wandering maze monsters

A moving monster Navigating maze walls Changing the monster’s direction Hunting the player Changing the monster’s state More about pathfinding

Switching game levels

Keep level maps in arrays Use a LEVEL_COMPLETE state Loading the next level

Using a tile map editor Summary

Chapter 11: Platform Games and Physics

Natural motion using physics

A new spriteObject for physics and platform games Acceleration Friction Bouncing Gravity Jumping Jumping on platforms

Hedgehog Apocalypse!

Designing the level The level map arrays Initializing the game objects and object arrays Building the level map Creating the user interface Jumping on boxes Moving the hedgehogs Squashing the hedgehogs Ending the game Preventing the arrow keys from scrolling the browser window The complete code listing

Summary

Chapter 12: Touch and the Mouse

Finding the mouse and touch X and Y positions

Using the mouse Using touch

Moving a sprite with easing

Optimizing easing Click to move an object

A mouse-based and touch-based platform game

Mouse-based platforms Touch-based platforms

Rotation

Rotating sprites with canvas Calculating rotation Using rotation in a game Driving a car

Killer Bee Pandemonium

Making Button Fairy Making Killer Bee chase the mouse Using a timer to fire bullets Putting together the finished game

Using drag and drop for canvas

Selecting draggable sprites Calculating the mouse’s velocity The drag-and-drop code listing

Combining a touch interface and the mouse in one program Where do you go next?

What you should know about JavaScript and HTML5 JavaScript frameworks and APIs Saving game data and files Multiplayer games Games for mobile devices, tablets, and the desktop

Summary

Index

← Prev
Back
Next →

← Prev
Back
Next →