Javascript 101

Nimish Narang
What will we Learn?
• Coding basics with Javascript syntax
• Game development with Javascript
• Three separate parts:
• Javascript language basics
• Game development basics
• Building the final game
What do you Need Going in?
• Some experience with HTML and CSS
• No experience with game development or Javascript
necessary
• Text editor
• Browser
How will the Tutorials Work?
• Start with an intro in the slides
• Look at some code examples - follow along with an online
compiler or a text editor
• Code challenge at the end of the tutorials
• Provide a solution at the beginning of the next tutorial
Why Learn Javascript?
• Javascript is one of the most popular languages
• Javascript is used everywhere to power web and mobile
apps, websites, games, and even machine learning and
data science software
• Javascript is easy to learn with plenty of support
• All you need to run it is a text editor and a browser
Language Basics
What will we Cover?
• Variables and Strings
• Operators
• Arrays and dictionaries
• Functions, parameters, and return values
• If statements
• While and for loops
• Break, continue, and return statements
• Classes and objects
Variables
What are Variables?
• A way to keep track of values and data in our code
• Assign a value to a name
• Can change the value unless using constants
• We will cover 2 types here:
• Numbers (whole or decimal)
• Booleans (true/false)
Strings
What are Strings?
• Another kind of variable
• Represent text, messages, names, etc.
• Anything between “ “ or ‘ ‘
Operators
What are Operators?
• Allow us to perform tests or modify variable values
• We will cover 5 types:
• Assignment
• Arithmetic
• Comparison
• Logical
• Ternary
Arrays
What are Arrays?
• Allow us to store multiple values in a single variable
• Access values by index
• Come with various operations to retrieve properties or
modify the values in some way
• Can have multidimensional arrays (matrices)
Dictionaries
What are Dictionaries?
• Similar to arrays as we store multiple values
• Each element is a key-value pair
• Access and store items based on key instead of index
Functions
What are Functions?
• Allow us to store code and choose when and where to
execute it
• Implement a function to specify what code to run
• Call a function to execute the code within
• Can take values as input via parameters
• Can output values via return value
If Statements
What are If Statements?
• Perform a test and run code if test returns true
• Way to add logic to code
• Variants include:
• Else-if to add additional test
• Else to add a default value
• Can nest if statements or use logical operators for
additional tests
While Loops
What are While Loops?
• Way to run code multiple times
• Similar to an if statement but continue to execute the code
as long as the condition is true
• Stop running the code once condition is false
Control Statements
What are Control Statements?
• Allow you to exit loops or functions prematurely or skip
loop iterations
• We will cover:
• break
• continue
• return
For Loops
What are For Loops?
• Similar to while loops but with predefined start and end
points and iterator
• Pair well with arrays
• Variant is the forEach loop which implicitly visits every
member of an array from start to finish
Classes and Objects
What are Classes and Objects?
• Objects are constructs within code that have state and
behaviour
• State is the properties/attributes and is defined with
variables/fields
• Behaviour is what an object can do and is defined with
functions/methods
• Classes act as blueprints to objects and are the code
implementations
Inheritance
What is Inheritance
• A class gets all of the fields and methods of another class
• Subclass inherits from superclass
• Use the keyword super to get access to superclass
implementation of something
Game Development
What will we Cover?
• Canvas
• Drawing on a canvas
• Adding movement to objects
• Updating multiple items
• Adding player controls
• Collision detection and objectives
• Sprites
Canvas
What is a Canvas?
• Platform we draw on
• Packaged in HTML <canvas> tag
• Add a width and height
• Access the canvas and canvas context inside <script> tag
Drawing on Canvas
How do we Draw on a Canvas?
• Supply a drawing context and draw function
• Add a rectangle with specified dimensions
• Draw rectangle on canvas context
• Call draw function from a step function
Adding Movement
How do we add Movement
• Create update function
• Update positions of items in the game
• Call update function in step function
• Can update multiple items with an array and for loops
Player Controls
How do we add Controls?
• Add event listeners
• Listen for events such as mouse clicks or key presses
• Call functions to update positions accordingly
• Call update functions
Collision Detection
How do we Detect Collisions?
• Check x and y positions
• Determine if there is overlap by comparison
• Do this for all objects
• End game or perform other collision logic
Sprites
What is a Sprite?
• Entity in game with an image and properties such as x and
y position and width and height
• Can represent player, enemies, or even background and
other objects
• Load in images
• Draw sprite images instead of rectangles
Javascript 101
Nimish Narang
What did we Learn?
• Coding basics with Javascript syntax
• Game development with Javascript
• Two separate parts:
• Javascript language basics
• Game development basics with the final game
Language Basics
• Variables and Strings
• Operators
• Arrays and dictionaries
• Functions, parameters, and return values
• If statements
• While and for loops
• Break, continue, and return statements
• Classes and objects
Game Development
• Canvas
• Drawing on a canvas
• Adding movement to objects
• Updating multiple items
• Adding player controls
• Collision detection and objectives
• Sprites