Foundation Game Design With HTML5 and JavaScript by Rex van der Spuy

Author:Rex van der Spuy [Spuy, Rex van der]
Language: eng
Format: epub
Tags: Computers, Html, Programming Languages, Web, Web Programming
ISBN: 9781430247166
Publisher: Apress
Published: 2012-11-21T05:00:00+00:00

Clicking on the monsters

How does the program know which monster we’re clicking on? The monster object itself has no way of detecting mouse clicks. But HTML tags, like <div> or <canvas>, can have mouse event listeners attached to them. The program needs to know that when we click on a <canvas> tag, it should make changes to the matching monster object that it’s displaying. This is an easy problem to solve because the array index numbers of the monster objects and the canvas tags are synchronized.

First, recall that the buildMap method attached a mousedown event listener to each of the 12 canvas tags it made in the loop.

canvas.addEventListener("mousedown", mousedownHandler, false);

That means whenever the left mouse button is pressed down over a canvas tag, it calls the mousedownHandler. This same function is shared by all 12 canvas tags. Here is the whole function, and I’ll explain how it works.

function mousedownHandler(event)

{

//Find out which canvas was clicked

var theCanvasThatWasClicked = event.target;

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.