SlideShare una empresa de Scribd logo
1 de 22
Descargar para leer sin conexión
Build a Game with Javascript
March 2018
WIFI: Deskhub-main
Password: stake2017!
http://bit.ly/jsgame-sd
codepen.io - glitch.com
1
Instructor
Amanda Pattridge
Application Developer
at TechFlow, Inc
TAs
bit.ly/jsgame-sd 2
About you
What's your name?
What brought you here today?
What is your programming experience?
bit.ly/jsgame-sd 3
About Thinkful
Thinkful helps people become developers or data scientists
through 1-on-1 mentorship and project-based learning
These workshops are built using this approach.These workshops are built using this approach.
bit.ly/jsgame-sd 4
Suggestions for learning
Don't treat this as a drill, we're making something realwe're making something real
Don't get discouraged, struggle leads to masterystruggle leads to mastery
Don't be shy, take full advantage of our supporttake full advantage of our support
bit.ly/jsgame-sd 5
This is what we're making
View example here
bit.ly/jsgame-sd 6
Agenda
Learn key Javascript concepts (30 min)
Go over starter code (10 min)
Build your site with our support! (30 min)
Go over answer key (10 min)
Steps to continue learning (10 min)
bit.ly/jsgame-sd 7
Defining a variable with Javascript
var numberOfSheep = 20
Initialize variable
Name of variable
Value of variable
8
Variable examples
9
Declaring a function with Javascript
function greet() {
return "Hello world!";
}
Initialize function Name of function
What the function does
10
Function examples
11
If/Else Statements
go to gas stationkeep driving
if false if true
need gas?
family roadtrip
12
If/Else Statements
function familyRoadtrip() {
if (needGas == true) {
getGas();
}
else {
keepDriving();
}
}
13
Comparing Values
== (equal to)
5 == 5 --> true
5 == 6 --> false
!= (not equal to)
5 != 5 --> false
5 != 6 --> true
14
If/Else Statements and Comparing Values
15
Parameters within functions
function adder(a, b) {
return a + b;
}
adder(1,2);
Parameters in declaration
Parameters used
within the function
16
Examples of parameters within functions
17
Real developers use Google... a lot
18
Glitch setup & first steps!
http://bit.ly/tf-guessing-game
19
Answers!
20
Ways to keep learning
21
Thinkful's Free Resource
HTML, CSS and JavaScript
Unlimited mentor-led Q&A sessions
Personal Program Manager
OnlyOnly availableavailable during this eventduring this event
bit.ly/tfsd-wd
22

Más contenido relacionado

La actualidad más candente

Jsgamesd-11.21.17
Jsgamesd-11.21.17Jsgamesd-11.21.17
Jsgamesd-11.21.17Thinkful
 
How to Design Original, Impactful D&I Programming
How to Design Original, Impactful D&I ProgrammingHow to Design Original, Impactful D&I Programming
How to Design Original, Impactful D&I ProgrammingLever Inc.
 
DevOpsDays Baltimore 2018:: Avoiding pitfalls of non technical managers - Vic...
DevOpsDays Baltimore 2018:: Avoiding pitfalls of non technical managers - Vic...DevOpsDays Baltimore 2018:: Avoiding pitfalls of non technical managers - Vic...
DevOpsDays Baltimore 2018:: Avoiding pitfalls of non technical managers - Vic...DevOpsDays Baltimore
 
Bagwjs1211
Bagwjs1211Bagwjs1211
Bagwjs1211Thinkful
 
3 Teknik Merancang pra desain presentasi yang luar biasa
3 Teknik Merancang pra desain presentasi yang luar biasa3 Teknik Merancang pra desain presentasi yang luar biasa
3 Teknik Merancang pra desain presentasi yang luar biasaFitriadye Banjang
 
Success on Purpose: Business Planning
Success on Purpose: Business PlanningSuccess on Purpose: Business Planning
Success on Purpose: Business PlanningKatie Clancy
 
Monthly Report For Your Business
Monthly Report For Your BusinessMonthly Report For Your Business
Monthly Report For Your BusinessRyan McCready
 
Build an App with JavaScript & jQuery
Build an App with JavaScript & jQuery Build an App with JavaScript & jQuery
Build an App with JavaScript & jQuery Aaron Lamphere
 
Breaking Into Startups as A Developer
Breaking Into Startups as A Developer Breaking Into Startups as A Developer
Breaking Into Startups as A Developer Max Ong Zong Bao
 
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...goodfriday
 
The Right Type of Prototype
The Right Type of PrototypeThe Right Type of Prototype
The Right Type of PrototypeGail Swanson
 
phxwebapp95
phxwebapp95phxwebapp95
phxwebapp95Thinkful
 
phxwebapp95
phxwebapp95phxwebapp95
phxwebapp95Thinkful
 
Ck sxsw ideas_alive final
Ck sxsw ideas_alive finalCk sxsw ideas_alive final
Ck sxsw ideas_alive finalCramer-Krasselt
 
How to build Sticky digital products
How to build Sticky digital productsHow to build Sticky digital products
How to build Sticky digital productsLiew Wei Da Andrew
 
Startup management general deck
Startup management general deckStartup management general deck
Startup management general deckLiew Wei Da Andrew
 
Being A Scrum Master During NcoV Time
Being A Scrum Master During NcoV TimeBeing A Scrum Master During NcoV Time
Being A Scrum Master During NcoV TimeThanh-Phuong Nguyen
 
Building effective salesforce for growth
Building effective salesforce for growthBuilding effective salesforce for growth
Building effective salesforce for growthLiew Wei Da Andrew
 

La actualidad más candente (20)

Jsgamesd-11.21.17
Jsgamesd-11.21.17Jsgamesd-11.21.17
Jsgamesd-11.21.17
 
How to Design Original, Impactful D&I Programming
How to Design Original, Impactful D&I ProgrammingHow to Design Original, Impactful D&I Programming
How to Design Original, Impactful D&I Programming
 
DevOpsDays Baltimore 2018:: Avoiding pitfalls of non technical managers - Vic...
DevOpsDays Baltimore 2018:: Avoiding pitfalls of non technical managers - Vic...DevOpsDays Baltimore 2018:: Avoiding pitfalls of non technical managers - Vic...
DevOpsDays Baltimore 2018:: Avoiding pitfalls of non technical managers - Vic...
 
Bagwjs1211
Bagwjs1211Bagwjs1211
Bagwjs1211
 
3 Teknik Merancang pra desain presentasi yang luar biasa
3 Teknik Merancang pra desain presentasi yang luar biasa3 Teknik Merancang pra desain presentasi yang luar biasa
3 Teknik Merancang pra desain presentasi yang luar biasa
 
2015 08-06
2015 08-062015 08-06
2015 08-06
 
Success on Purpose: Business Planning
Success on Purpose: Business PlanningSuccess on Purpose: Business Planning
Success on Purpose: Business Planning
 
Monthly Report For Your Business
Monthly Report For Your BusinessMonthly Report For Your Business
Monthly Report For Your Business
 
Build an App with JavaScript & jQuery
Build an App with JavaScript & jQuery Build an App with JavaScript & jQuery
Build an App with JavaScript & jQuery
 
Breaking Into Startups as A Developer
Breaking Into Startups as A Developer Breaking Into Startups as A Developer
Breaking Into Startups as A Developer
 
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...
 
The Right Type of Prototype
The Right Type of PrototypeThe Right Type of Prototype
The Right Type of Prototype
 
phxwebapp95
phxwebapp95phxwebapp95
phxwebapp95
 
phxwebapp95
phxwebapp95phxwebapp95
phxwebapp95
 
Ck sxsw ideas_alive final
Ck sxsw ideas_alive finalCk sxsw ideas_alive final
Ck sxsw ideas_alive final
 
How to build Sticky digital products
How to build Sticky digital productsHow to build Sticky digital products
How to build Sticky digital products
 
Startup management general deck
Startup management general deckStartup management general deck
Startup management general deck
 
Being A Scrum Master During NcoV Time
Being A Scrum Master During NcoV TimeBeing A Scrum Master During NcoV Time
Being A Scrum Master During NcoV Time
 
Boot Camp@Bar Camp
Boot Camp@Bar CampBoot Camp@Bar Camp
Boot Camp@Bar Camp
 
Building effective salesforce for growth
Building effective salesforce for growthBuilding effective salesforce for growth
Building effective salesforce for growth
 

Similar a Jsgame 3.1.18-sd

Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)Justin Ezor
 
Buildwebsite 12.18.17
Buildwebsite 12.18.17Buildwebsite 12.18.17
Buildwebsite 12.18.17Thinkful
 
Deck 4-361-414-444
Deck 4-361-414-444Deck 4-361-414-444
Deck 4-361-414-444Justin Ezor
 
Websitebuildsd10.16
Websitebuildsd10.16Websitebuildsd10.16
Websitebuildsd10.16Thinkful
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317Ivy Rueb
 
Intro to JavaScript: Build a Virtual Pet
Intro to JavaScript: Build a Virtual PetIntro to JavaScript: Build a Virtual Pet
Intro to JavaScript: Build a Virtual PetJustin Ezor
 
Virtualpet9.21.17 sd
Virtualpet9.21.17 sdVirtualpet9.21.17 sd
Virtualpet9.21.17 sdThinkful
 
Intro to JavaScript: Build a Web App
Intro to JavaScript: Build a Web AppIntro to JavaScript: Build a Web App
Intro to JavaScript: Build a Web AppJustin Ezor
 
Deck 4-361-414-420
Deck 4-361-414-420Deck 4-361-414-420
Deck 4-361-414-420Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)Justin Ezor
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408Justin Ezor
 
Thinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScriptThinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScriptTJ Stalcup
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptTJ Stalcup
 
Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)Justin Ezor
 
Introjssd113017
Introjssd113017Introjssd113017
Introjssd113017Thinkful
 
Build a Virtual Pet with JavaScript - June 17 LA
Build a Virtual Pet with JavaScript - June 17 LABuild a Virtual Pet with JavaScript - June 17 LA
Build a Virtual Pet with JavaScript - June 17 LAThinkful
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptTJ Stalcup
 
Build Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DCBuild Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DCTJ Stalcup
 

Similar a Jsgame 3.1.18-sd (20)

Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409-417-452
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-317-409 (1)
 
Buildwebsite 12.18.17
Buildwebsite 12.18.17Buildwebsite 12.18.17
Buildwebsite 12.18.17
 
Deck 4-361-414-444
Deck 4-361-414-444Deck 4-361-414-444
Deck 4-361-414-444
 
Websitebuildsd10.16
Websitebuildsd10.16Websitebuildsd10.16
Websitebuildsd10.16
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-33-82-317
 
Intro to JavaScript: Build a Virtual Pet
Intro to JavaScript: Build a Virtual PetIntro to JavaScript: Build a Virtual Pet
Intro to JavaScript: Build a Virtual Pet
 
Virtualpet9.21.17 sd
Virtualpet9.21.17 sdVirtualpet9.21.17 sd
Virtualpet9.21.17 sd
 
Intro to JavaScript: Build a Web App
Intro to JavaScript: Build a Web AppIntro to JavaScript: Build a Web App
Intro to JavaScript: Build a Web App
 
Deck 4-361-414-420
Deck 4-361-414-420Deck 4-361-414-420
Deck 4-361-414-420
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-128-133-443 (1)
 
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
Deck 8983a1d9-68df-4447-8481-3b4fd0de734c-41-93-163-212-239-274-347-408
 
Thinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScriptThinkful DC - Building a Virtual Pet with JavaScript
Thinkful DC - Building a Virtual Pet with JavaScript
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScript
 
Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)Deck 6-80-140-196-213-271-321-364-438 (2)
Deck 6-80-140-196-213-271-321-364-438 (2)
 
Introjssd113017
Introjssd113017Introjssd113017
Introjssd113017
 
Build a Virtual Pet with JavaScript - June 17 LA
Build a Virtual Pet with JavaScript - June 17 LABuild a Virtual Pet with JavaScript - June 17 LA
Build a Virtual Pet with JavaScript - June 17 LA
 
Build a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScriptBuild a Virtual Pet with JavaScript
Build a Virtual Pet with JavaScript
 
Build Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DCBuild Your Own Website - Thinkful DC
Build Your Own Website - Thinkful DC
 
Vpjs913
Vpjs913Vpjs913
Vpjs913
 

Más de Jordan Zurowski

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)Jordan Zurowski
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)Jordan Zurowski
 
How to choose a programming language 2.20.18 sd
How to choose a programming language   2.20.18 sdHow to choose a programming language   2.20.18 sd
How to choose a programming language 2.20.18 sdJordan Zurowski
 

Más de Jordan Zurowski (8)

Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-55-78 (12)
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
 
Intro js3.22.18
Intro js3.22.18Intro js3.22.18
Intro js3.22.18
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
 
How to choose a programming language 2.20.18 sd
How to choose a programming language   2.20.18 sdHow to choose a programming language   2.20.18 sd
How to choose a programming language 2.20.18 sd
 
Introjs2.13.18sd
Introjs2.13.18sdIntrojs2.13.18sd
Introjs2.13.18sd
 
Gttech2.8.18
Gttech2.8.18Gttech2.8.18
Gttech2.8.18
 

Último

TC_Philosophy_Report_by_BSCrim.4-A2023--
TC_Philosophy_Report_by_BSCrim.4-A2023--TC_Philosophy_Report_by_BSCrim.4-A2023--
TC_Philosophy_Report_by_BSCrim.4-A2023--RvEscoro
 
7 tips to help you become a Supercommunicator
7 tips to help you become a Supercommunicator7 tips to help you become a Supercommunicator
7 tips to help you become a SupercommunicatorAlex Clapson
 
Warp Speed Habits: A Brain Based Roadmap to Create Habits.pdf
Warp Speed Habits: A Brain Based Roadmap to Create Habits.pdfWarp Speed Habits: A Brain Based Roadmap to Create Habits.pdf
Warp Speed Habits: A Brain Based Roadmap to Create Habits.pdfmneves5
 
Purposive Communication lesson8 application letter
Purposive Communication lesson8 application letterPurposive Communication lesson8 application letter
Purposive Communication lesson8 application letterrubycaquilala
 
Be Our Guest - Rotaract Club of Paramaribo 2024
Be Our Guest - Rotaract Club of Paramaribo 2024Be Our Guest - Rotaract Club of Paramaribo 2024
Be Our Guest - Rotaract Club of Paramaribo 2024Jean-luc van Charante
 
Stu Hirst - Imposter Syndrome 2024 - Presented at Cloud Expo Europe (Cyber Ke...
Stu Hirst - Imposter Syndrome 2024 - Presented at Cloud Expo Europe (Cyber Ke...Stu Hirst - Imposter Syndrome 2024 - Presented at Cloud Expo Europe (Cyber Ke...
Stu Hirst - Imposter Syndrome 2024 - Presented at Cloud Expo Europe (Cyber Ke...Stu Hirst
 

Último (6)

TC_Philosophy_Report_by_BSCrim.4-A2023--
TC_Philosophy_Report_by_BSCrim.4-A2023--TC_Philosophy_Report_by_BSCrim.4-A2023--
TC_Philosophy_Report_by_BSCrim.4-A2023--
 
7 tips to help you become a Supercommunicator
7 tips to help you become a Supercommunicator7 tips to help you become a Supercommunicator
7 tips to help you become a Supercommunicator
 
Warp Speed Habits: A Brain Based Roadmap to Create Habits.pdf
Warp Speed Habits: A Brain Based Roadmap to Create Habits.pdfWarp Speed Habits: A Brain Based Roadmap to Create Habits.pdf
Warp Speed Habits: A Brain Based Roadmap to Create Habits.pdf
 
Purposive Communication lesson8 application letter
Purposive Communication lesson8 application letterPurposive Communication lesson8 application letter
Purposive Communication lesson8 application letter
 
Be Our Guest - Rotaract Club of Paramaribo 2024
Be Our Guest - Rotaract Club of Paramaribo 2024Be Our Guest - Rotaract Club of Paramaribo 2024
Be Our Guest - Rotaract Club of Paramaribo 2024
 
Stu Hirst - Imposter Syndrome 2024 - Presented at Cloud Expo Europe (Cyber Ke...
Stu Hirst - Imposter Syndrome 2024 - Presented at Cloud Expo Europe (Cyber Ke...Stu Hirst - Imposter Syndrome 2024 - Presented at Cloud Expo Europe (Cyber Ke...
Stu Hirst - Imposter Syndrome 2024 - Presented at Cloud Expo Europe (Cyber Ke...
 

Jsgame 3.1.18-sd