1. Written by Matthew Shelley for Professor Wei Shi

2. More Canvas with Input

3. In This Example...  User Input  Keyboard Events  Mouse (click) events for canvas  Touch events on mobile devices are also included  Game Objects  Represented by coloured rectangles, which can be clicked  Canvas  Inheritance  Render game objects to canvas (only once)  Click game objects through canvas based on z-index

4. Overview of Files  userinput_canvas.htm  Very basic page, which serves to include the necessary JavaScript, CSS, and library files  userinput_canvas.css  Disables selecting and dragging of the canvas and any images, due to undesirable behaviour  userinput_canvas.js  Creates canvas, draws to it, and handles clicking of game objects within

5. Structure of.js File  Constants  A few constants are stored atop the.js file  UserInputAndCanvasExample  Namespace for the entire demo, which exposes a single public method, init()  $(document).ready(function() {...});  Called when the document has finished loading

6. UserInputAndCanvasExample  m_keydownFunc [variable / function]  Takes in a ‘key code’ for the key just pressed  BaseCanvas [class]  Basic canvas object, which references a jQuery canvas element to respond to clicks and touches  GameObject [class]  A simple object, which can be rendered and clicked  GameWorld [class]  Extends BaseCanvas to manage and render objects  m_gameWorld [variable / object]  Reference to a GameWorld object

7. User Input  m_keydownFunc(e)  Assigned to the document body through init()  Uses a switch statement to handle each key press  e.which returns the key code  For key values, see:  http://www.cambiaresearch.com/articles/15/javas cript-char-codes-key-codes http://www.cambiaresearch.com/articles/15/javas cript-char-codes-key-codes

8. User Input  Each canvas object has a virtual function to handle click and touch events:  canvasElementClickOrTouchCallback(e)  Assigned in the constructor for each canvas  To fetch the relative position of a click or touch within a canvas, pass along e to:  getClickOrTouchPosition(e)

9. Game Objects  Represent a coloured rectangle, which can be drawn and clicked on through the canvas  isPointInside(point)  Checks if a point exists within a given area  handleClick() [virtual]  Response for a click

10. Canvas  BaseCanvas  Creates a canvas element, which is wrapped by jQuery, and assigns the click callback  Assign ‘self’ reference to DOM element  Click method simply avoids ‘bubble up’  Note: this method treats ‘this’ as the DOM element  Disables dragging and selecting through DOM methods; supposedly jQuery has problems  Does not have a render() method, as there is nothing for an empty canvas to render

11. Canvas  GameWorld  Extends BaseCanvas to handle GameObject creation, clicking, and drawing  When clicked, the object with the highest zIndex that contains the ‘target’ has its handleClick() method called  createGameObject  Creates a game object and then stores it in an array based on its zIndex  renderOneFrame  Draws all game objects exactly once

12. Useful Links  Most of the code from the example:  http://www.ibm.com/developerworks/web/library/ wa-games/index.html http://www.ibm.com/developerworks/web/library/ wa-games/index.html  jQuery:  http://jquery.com/ http://jquery.com/  Class:  http://ejohn.org/blog/simple-javascript- inheritance/ http://ejohn.org/blog/simple-javascript- inheritance/  jCanvas:  http://calebevans.me/projects/jcanvas/index.php http://calebevans.me/projects/jcanvas/index.php

13. More JavaScript

14. JavaScript Object Notation  Variables in JavaScript are dynamically-typed  A variable can be a string, then an integer, then an array, then a function, then an object, etc.  Objects are also dynamic, as new properties can be added or deleted as necessary  Properties are just variables, too! Similarly, they are dynamic and can be objects as well.  Objects can be seen as ‘associative arrays’ or ‘dictionaries’; they assign values to properties

15. JavaScript Object Notation  An ‘empty’ object can be created like so:  var x = {}; // an empty associative array  An object can have some initial properties:  var x ={a: 1, b: 2};  var y = {‘a’: 29, “b”: 3};  var z = {a: 18, “b” 33};  Any of these formats is valid  Any string can be used with no limit on length

16. JavaScript Object Notation  To read a property:  x.a  x[‘a’]  x[“a”]  To set a property:  x.a = 7;  x[‘a’] = 17;  x[“a”] = 81;

17. JavaScript Object Notation  To create a property:  Simply set its value as though it already existed  To delete a property:  delete x.a;  delete x[‘b’];  delete x[“c”]  To check if a property exists:  (a in x) OR (‘b’ in y) OR (“c” in z)  You cannot do “not in” or “!in” or some variant  x.hasOwnProperty(‘a’) OR y.hasOwnProperty(“b”)  You can do !x.hasOwnProperty(...)

18. JavaScript Object Notation  To traverse each property: for (key in obj) // this is a for-each loop { if (obj.hasOwnProperty(key)) obj[key].doSomething(); }  No assumptions can be made on key ordering  We refer to this entire notation as JSON

19. Common jQuery  jQuery is an additional library for JavaScript that is commonly used in client-side applications  The primary $(...) method is complex  As per the name jQuery, it queries the document for DOM elements, which meet certain criteria, and then returns their ‘jQuery-wrapped’ versions  $(“body”) returns the body element, for instance  $(“img”) returns every img tag  jQuery simplifies the majority of traditional DOM-manipulation methods

20. Common jQuery  To create an element:  jqElement = $(document.createElement("canvas")) ;  jqElement = $(“ ”); // create raw HTML  jqElement = $(“ ”);  To add an element to another:  jqElement.append(objectToAdd);  $(“body”).append(“ ”); // append raw HTML  To remove an element:  jqElement.remove(); // also removes any children

21. Common jQuery  To set an attribute of a jQuery element:  jqElement.attr(“attr”, “value”);  Note that if the selector retrieves more than 1 element all of those element will be updated!  $(“img”).attr(“width”, 320); // all image widths change  To append callbacks:  jqElement.on(“click”, someFunc);  jqElement.click(function() {...});

22. BREAK

23. WebSockets

24.  WebSockets work similar to sockets, but instead they specifically communicate between a web browser and a web server  Messages are sent and received between the two  The protocols ws:// and wss:// are built atop of http:// and https://, respectively  Ports 80 and 443 are similarly used  WebSockets require both server and client support  So, you might need a virtual private server

25. WebSockets – Echo Example  Launch the websocket-echo.htm example  A connection is made with the server ws://echo.websocket.org/  A message is sent to the server  The same message is received  Both messages are displayed for comparison  Afterward, the client disconnects

26. Useful Links  About WebSockets:  http://www.websocket.org/aboutwebsocket.html http://www.websocket.org/aboutwebsocket.html  Websocket Echo Example:  http://www.websocket.org/echo.html http://www.websocket.org/echo.html

27. Node.js

28. Software Installation  First, please download and install node.js  http://nodejs.org/ http://nodejs.org/  Click ‘Install’ or go to the ‘Downloads’ page  Once downloaded, run the installer  Second, please download PuTTY  http://www.chiark.greenend.org.uk/~sgtatham/pu tty/download.html http://www.chiark.greenend.org.uk/~sgtatham/pu tty/download.html

29. Introduction to Node.js “Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”Chrome's JavaScript runtime - nodejs.org

30. Using Node.js  With command prompt, navigate to the folder containing your code  Use the cd command on Windows  To run a file named ‘example.js’:  node example.js  Server-side JavaScript code  We are not writing code for a web browser, but rather code that will be handled by the server

31. Node.js – Example 1  The first example displays “hello,” and then “world” 2 seconds later to command prompt

32. Node.js – Example 2  We create an http server, which listens to requests on port 8000 and responds to all incoming connections similar to before  First, run the example via Command Prompt  Then, connect to localhost:8000 via PuTTY  “Hello” followed by “world” 2 seconds later should appear in PuTTY’s console

33. Node.js – Example 3  This example creates a TCP ‘echo’ server that simply sends back each message that the server receives  Like before, load the example in command prompt and then connect to localhost:8000 through PuTTY  Type a message in PuTTY to see it returned

34. Node.js – Example 4  The final example creates a simple chat room where multiple users can write and messages, which are then broadcast to everyone else  This example demonstrates how to  store multiple connections;  filter out who receives what messages; and,  handle clients that disconnect  Multiple PuTTY clients are necessary

35. Socket.IO  Socket.IO builds on top of node.js to improve network connectivity on many devices, while providing some ‘interface’ improvements  http://socket.io/ http://socket.io/  To install socket.io, use command prompt (assuming node.js has been installed):  npm install socket.io

36. Socket.IO - Example  Run “node socketio-example.js” via command prompt, like usual  Launch “socketio-example.htm” in a web browser, preferably Google Chrome  Using developer tools, it is possible to see messages logged to the console  These messages contain messages received by the client that were sent by the server

37. Disclaimer  Unless you have a Virtual Private Server or a host that supports websockets, node.js or some variant, you will not be able to use any of these services outside of your computer  As an alternative, one can use AJAX to call server-side code, such as PHP  We will look into AJAX in the next lecture

38. Useful Links  node.js  http://www.nodejs.org/ http://www.nodejs.org/  “Introduction to Node.js with Ryan Dahl”  http://www.youtube.com/watch?v=jo_B4LTHi3I http://www.youtube.com/watch?v=jo_B4LTHi3I  “How do I get started with node.js?”  http://stackoverflow.com/questions/2353818/how- do-i-get-started-with-node-js http://stackoverflow.com/questions/2353818/how- do-i-get-started-with-node-js  “Advanced HTML5 JavaScript: Down 'n Dirty”  http://www.youtube.com/watch?v=Pm6Ch4qoNe 8&feature=relmfu http://www.youtube.com/watch?v=Pm6Ch4qoNe 8&feature=relmfu