• Animation
• Keyboard Input

Time for Mouse Fun!

A game is not going to be much fun without some sort of user input. It is time to introduce Listeners. Listeners are waiting for events to occur, like mouse movement or a key being pressed on the keyboard. The first thing we need to do is let the browser know what events we care about. Then we need to indicate what we want to happen if the event occurs. To do this, we also need to talk about functions. You can think of functions as a group of commands. The commands can accept some input and produce a return, although it is optional. When we make a listener for a mouse event, like a click, it will activate (or call) the function that we specify.

can.addEventListener("click", function(e) { drawRectangle(e); } );

I know this can look scary if you are just starting. Honestly, you can just paste it in your code and forget about it. Lets talk about the different parts.

• The "can" at the begining is refering to our canvas element. This means the listener will only activate if you click on the canvas
• The ".addEventListener" is a method of HTML elements. You can set up a listener on anything such as the canvas or a picture
• "click" is the event we are waiting for, it could be "keypress", "mousemove" or any other event
• "function (e)" is an anonymous function, it's purpose is to take 'e' which contains information about the event and do something with it
• "drawRectangle(e);" is made up at this point. It represents the function that will get executed when the event happens. Now we have to define this function in order for everything to work

<!DOCTYPE HTML>
<html>
<head>
<title>Mouse</title>
</head>
<body style="margin:0px; overflow:hidden;">
<canvas id="canvas"></canvas>
<script>

var can = document.getElementById("canvas");
var ctx = can.getContext('2d');
var cw = can.width = window.innerWidth;
var ch = can.height = window.innerHeight;

ctx.fillStyle = "black";
ctx.fillRect(0, 0, cw, ch);

can.addEventListener("click", function(e) { drawRectangle(e); } );

function drawRectangle(event) {
  ctx.fillStyle = "lime";
  ctx.fillRect(event.clientX-10, event.clientY-10, 20, 20);  
}

</script>
</body>
</html>

• Line 18 This is the event listener that we discussed above. It could be translated as "If the canvas element is clicked, send the coordinates to the drawRectangle Function"
• Line 20 This is the drawRectangle function, It takes the event data as input and executes all the commands in between its curly braces
• Line 22 The x and y positions are calculated using the event. Event has a lot of information, but all we need is clientX and clientY. It is important to note that this works well with a full screen canvas, however, if the canvas is somewhere else on the page then you also have to subtract the canvas position from the mouse coordinates

console.log("Is Awesome")

The console.log() command is very useful to figure out problems. You can log variables and objects so that you can see what they contain while the program is running. For example, try putting "console.log(event);" into your drawRectangle() function. When you click in the canvas an object will appear in your console. This object contains all the the properties of that click event which you have access to. You can use things like the event target to make changes to that target. For example, you could change the background color of a HTML element when you click on it.

When you have to troubleshoot a problem it can be very useful to put something like mouse coordinates into the console.log.

console.log("You Clicked at x: "+event.clientX+", y: "+event.clientY);

• Animation
• Keyboard Input