Building a game with JavaScript (March 2017, washington dc)

Building a game with JavaScript
March 2017
bit.ly/js-game

© 2017 Thinkful. All Rights Reserved. 2
About me
Dan Friedman
Founder of Thinkful, an online school for programming
where we’ve taught over 7,000 students
Worked as a front-end developer and product
manager at an agency in New York

About you
Why are you here?
Do you want to work better with developers?
Do you want to start working in tech?
Do you have an idea that you want to build?
Programming experience?
First lines of code will be written tonight?
Been self teaching for 1-3 months?
Been at this for 3+ months

Today’s Goals
Build a functional game – emphasis on build
Practice solving problems like real developers
Learn JavaScript fundamentals as we use them
Pick up a touch of jQuery

What we’re building
Here’s what we’ll build: http://bit.ly/2gfeIDR
http://jeya.io/ThinkFul/projects/hotORcold/

Roadmap
Context: JavaScript and the web
Setting up our project
Working with HTML/CSS
Using jQuery to handle user events like button clicks and
form submission
Breaking up complex behaviors into distinct, short
JavaScript functions

What is Programming?
Programming is writing instructions for a
computer to execute

Programming is problem-solving

Programming is a process:
1. Deﬁning problems
2. Finding solutions to those problems
3. Implementing those solutions in a language your
computer can understand

Perception

Reality

JavaScript: a brief history
Written by Brendan Eich in 1995 for use in Netscape
Initial version written in 10 days
Completely unrelated to Java, but maybe named after
it to draft off its popularity
Over 10 years, became default programming language
for browsers

JavaScript: today
Has an exceptional community of developers, libraries
and frameworks.
A partial list: https://en.wikipedia.org/wiki/
List_of_JavaScript_libraries
Continues to evolve under guidance of Ecma
International, with input from top tech companies
Great place for beginners to start programming

Most commonly used language on GitHub
Details here: http://githut.info/
JavaScript: today

Why learn JavaScript
Most popular language means job opportunities
Good starting place to see if coding is for you
Coding as a medium of expression

How the web works
You type a URL: facebook.com (your computer is the
client)
The browser communicates with the DNS server to find
the IP address
The browser sends an HTTP request to the server asking
for specific files
The browser receives those files and renders them as a
website

Client / Server
Front-end developer Back-end developer
Client Server

Client / Server
Client: UI Logic Server: Business logic
Request
Response
Database server

Example: Facebook
HTML/CSS/
JavaScript
determine layout
of news feed,
how you can
interact with it
Algorithm determines
what’s in your feed
Request
Response
Database serves photos,
videos, status updates
Navigate to
facebook.com

Which are we learning?
100% of client-side code is written in
JavaScript. You can also use JavaScript to write
server-side code thanks to Node.js. If you want
to work with a database, learn SQL.

Context: Modern use of JavaScript
Used for both client and server programming
Has an exceptional community of developers, libraries
and frameworks.
A partial list: https://en.wikipedia.org/wiki/
List_of_JavaScript_libraries
Great place for beginners to start programming

Setup (1 of 3)
Text editor
If you don’t already have one, download Sublime
Text: https://www.sublimetext.com/3
Download ZIP of code: bit.ly/starter-code

Setup (2 of 3)
Open Sublime Text
Go to “Project” -> “Add Folder to Project”

Setup (3 of 3)
Open the HTML ﬁle in your browser
Double click on it in Finder (Mac) / Explorer (PC)
If you’re not sure where it is, right-click on the ﬁle in
Sublime text, and then reveal in “Finder” (Mac) /
“Explorer” (PC)

Working with other’s code
Take a tour of your starting point
Open each of the ﬁles in sublime text
Notice how the ﬁles are organized into folders
This is what it’s like to work on a team

A dash of HTML
Open index.html in Sublime Text
HTML is the content and structure of a webpage
Three key concepts:
Tags
Elements
Attributes

index.html walkthrough
Head
Header
Modal
Guessing section

HTML Tags
Every tag starts with a less than sign and ends with a
greater than sign
<html> This is an HTML tag
<body> This is a body tag
<h1>Hello world!</h1> This line has two H1
tags, one opening and one closing
</body>
</html>

HTML Elements
HTML elements usually consist of an opening tag, closing tag,
and some content.
<html>
<body> This HTML element starts on this line and
ends two lines below
<h1>Hello world!</h1> This is an HTML element
</body>
</html>
Some consist of just a self-closing tag
<img src=“http://i.imgur.com/Th5404r.jpg">

HTML Attributes
HTML attributes are for setting properties on an HTML
element. Here are three common attributes worth
remembering:
<a href=“https://somewhere.com">This is a link</a> href
is an attribute for setting the destination of a link
<h1 class=“headline”>This is a headline</h1> class is an
attribute that doesn’t show up in the rendered webpage,
but will be important when we start talking about CSS
<h1 id=“headline”>This is a headline</h1> id is an
attribute that doesn’t show up in the rendered webpage,
but will be important when we start talking about CSS

A dash of CSS
Open style.css in Sublime Text
CSS determines the visual presentation of your HTML
webpages, including layout and visual appearance of speciﬁc
elements
Key concepts:
Selectors
Property
Value

style.css walkthrough
reset.css
Background color on html and body elements
Modal

CSS Selectors
CSS selectors determine which HTML elements are targeted
for speciﬁc styles:
p This selects all paragraph tags
.header This selects HTML elements with the class
“header”
#navigation This selects HTML elements with the ID
navigation
p.header This selects paragraph tags with the header
class

CSS Properties
CSS properties determine what about the appearance
you’re setting:
color This determines the font color
font-family This lets you set the typeface as well as
backup typefaces
background-image This lets you set a background
image for an element
height This lets you set the height of an element

CSS Values
Each property has a set of acceptable values that you can set:
color: red, blue, green, #CCCCCC These are all acceptable
values for the color property
font-family: helvetica, arial, sans-serif These are all acceptable
values for the font-family property
background-image: url("imageFile.jpg") This property looks
for a URL value that points to a speciﬁc image ﬁle
height: 40px 50% Height can be set as an explicit width or as
a percentage of the containing box
Click on a property to see the acceptable values: http://
www.htmldog.com/references/css/properties/

CSS Example
h1 {
color: red;
font-size: 36px;
}

Breaking the problem into steps

Breaking the problem into steps
Start a new game on page load
Accept user guess
Give user feedback based on their guess
Allow user to start a new game
Hide / show modal if a user clicks for instructions

Breaking the problem into sub-steps
Write pseudocode that summarizes the steps we need
to implement

What needs to be done to set up the game?

Generate a random number between 0 - 100
console.log random number (to make sure it’s
working)
Set “Guess counter” to 0 and display it

Starting to translate that to code
Write a function that uses JavaScript’s built-in method
to generate a random number and assign it to a
variable

JavaScript variables
Declaring a variable
var firstVariable;
Assigning a value to it
firstVariable = 6;
Retrieving that value
alert(firstVariable); Causes a popup to appear with
the alert message "6"

Functions
A function describes a repeatable process or behavior.
JavaScript has some built-in functions, and in writing a
complex program, you’ll write many, many functions
that handle sub-sets of the behavior you’re creating.
type in the console: alert(‘Hello from JavaScript land’);

The code!

Displaying the guess count

Putting it all together: newGame()
Set guessCount to 0
Display that guessCount
Run the random number generator

Putting it all together: newGame()

Functions: parameter and return
We sometimes pass a parameter and return a value.
Parameters let us call a function multiple times with
different inputs in order to get different outputs.
Return sends back a value to wherever the function was
called from

Receive user input

Check how the user did

Check how the user did: checkTemperature()

What’s left?
More speciﬁc feedback: getting warmer or colder?
Count number of guesses with each guess
Output each guess to the guess list
New game button

What is Thinkful?
Online coding bootcamp with 1-on-1
mentorship — learn anytime & anywhere &
get a job, guaranteed

1-on-1 mentorship

Results
Bhaumik Liz

Special offer
• Try the program for two weeks – includes six mentor
sessions – for $50
• Learn HTML/CSS/JavaScript
• Option to continue into web development bootcamp
• Come talk to me if you’re interested (or email me at
dan@thinkful.com)

Thank you!
Email me with questions or suggestions:
dan@thinkful.com
March 2017

Building a game with JavaScript (March 2017, washington dc)

More Related Content

Building a game with JavaScript (March 2017, washington dc)