Build a game with javascript (april 2017)
53
April 2017 Build a Game with Javascript http://bit.ly/tf-js-game-atl
Transcript of Build a game with javascript (april 2017)
About us
We train developers and data scientists through 1-on-1 mentorship and career prep
About me
• Jasjit Singh
• Self-taught developer
• Worked in finance & tech
• Co-Founder Hotspot
• Thinkful General Manager
What’s your goal?
• 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?
What’s your programming background?
• First lines of code will be written tonight?
• Been self teaching for 1-3 months?
• Been at this for 3+ months
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
• Homework!
Roadmap
•Context: JavaScript and the web
•Setting up our project
•HTML/CSS refresher
•Using jQuery to handle user events
•Breaking up complex tasks into Javascript functions
What is programming?
Programming is writing instructions for a computer to execute. Programming is problem-solving.
Programming is a process
1. Defining problems
2. Finding solutions to those problems
3. Implementing those solutions in a language your computer can understand
Perception
Reality
Brief history of Javascript
• Written by Brendan Eich in 1995 for Netscape
• Initial version written in 10 days
• Completely unrelated to Java, named as a marketing stunt because Java was “hot” at the time
Javascript today
• Only programming language to become standard in browsers
• Continues to evolve under guidance of ECMA International, driven by browser makers
• Huge community of developers, libraries and frameworks
• Lots of job opportunities
• Fairly easy syntax, though quirky
How the web works
Type a URL from a client (e.g. google.com)
Browser communicates with DNS server to find IP address
Browser uses the protocols HTTP and IP to send a request for specific “files”
Browser receives those files and renders them as a website (HTML and CSS)
Clients / Servers
Client (sends requests) Frontend Developer Manages what user sees
Server (sends response) Backend Developer
Manage what app does
Example: facebook.com
HTML, CSS, & Javascript render
interactive newsfeed
Algorithm determines what’s in your feed
Request
Get data about your friends and their posts
Open browser and navigate to facebook.com
Application Logic
Database
Response
Client Server
Setup (1 of 3)
•If you don’t have text editor, download Sublime Text: https://www.sublimetext.com/
•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 file in your browser by double clicking on it in Finder (Mac) / Explorer (PC)
• If you’re not sure where it is, right-click on the file in Sublime text, and then reveal in “Finder” (Mac) / “Explorer” (PC)
HTML/CSS Refresher
•Open index.html in Sublime Text
•HTML is the content and structure of a webpage
•Three key concepts:
•Tags •Elements •Attributes
HTML tags
Every tag starts with a “less than” sign and ends with a “greater than” sign
<html> #this is an HTML opening tag
<body> #this is a body opening tag
<h1>Hello world!</h1> #this is set of H1 tags
</body> #this is a body closing tag
</html> #this is an HTML closing tag
HTML elements
HTML elements usually consist of an opening tag, closing tag, and some content
<html> #html element starts here
<body> #body element starts here
<h1>Hello world!</h1> #this is an HTML element
</body> #body element ends here
</html> #html element ends here
HTML attributes
HTML attributes set properties on an element — the are attached in the opening tag
<a href=“https://somewhere.com">This is a link</a>href is an attribute that sets the destination of a link
<h1 class=“headline”>This is a headline</h1>class is one attribute that identifies element (for CSS & Javascript)
index.html walkthrough
index.html Walkthrough
CSS refresher
•Open style.css in Sublime Text
•CSS determines the visual presentation of your HTML webpages, including layout and visual appearance of specific elements
•Key concepts:
•Selectors •Property •Value
Example selectors
p (selects all paragraph tags)
.name (selects HTML elements with class “name”)
#intro (selects HTML elements with id “intro”)
p.name (selects paragraph tags with class “name”)
CSS properties
Determines the aspect of the element’s appearance to change
• color (set the font color)
• font-family (sets main typeface and backup typefaces)
• background-image (sets background image)
• height (sets the height of an element)
CSS values
Determines the aspect of the element’s appearance we wish to change
• color: red, blue, green, #CCCCCC acceptable values for the color property
• font-family: helvetica, arial, sans-serif acceptable values for the font-family property
• background-image: url(“imageFile.jpg")looks for a URL value for image file
• height: 40px, 50% set in pixels or percentage of container height
Declaration block
This is a declaration block containing two declarations
p {
color: red;
font-size: 36px;
}
CSS example
Break the game 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
Start a new game on page load
•Generate a random number between 0 - 100
•Print random number (to make sure it’s working)
•Set “Guess counter” to 0 and display it
Translating into code
Write a function that uses JavaScript’s built-in method to generate a random number and assign it to a variable
Examples
• Declaring variable: var firstVariable;
• Assigning value: firstVariable = 6;
• Retrieve value: alert(firstVariable)
Example on JSBin: http://bit.ly/js-example-two
Basic functions
A function lets you separate your code into bite-sized pieces which you can use over again.
When you write a function to use later, you are “declaring” it. When you use (or run) that function you are “calling” it.
Example
Declaring a function function doSomething () {alert(“Done!”)
}
Calling a function doSomething()
The code!
Displaying the guest count
Putting it all together
•Set guessCount to 0
•Display that guessCount
•Run the random number generator
Putting it together: the code
Functions: parameter & 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
Receiving user input
Checking how the user did
Checking how the user did
Homework
•More specific feedback: getting warmer or colder?
•Count number of guesses with each guess
•Output each guess to the guess list
•New game button
More about Thinkful
• Anyone who’s committed can learn to code
• 1-on-1 mentorship is the best way to learn
• Flexibility matters — learn anywhere, anytime
• Thinkful only makes money when you get a job
More about Thinkful
You’ll learn concepts, practice with drills, and build capstone projects for your own portfolio — all guided by a personal mentor
Our mentors
Mentors have, on average, 10+ years of experience
Our results
Job Titles after GraduationMonths until Employed
Try us out!
Try the program for two weeks, includes six mentor sessions - $50
Learn HTML/CSS/JavaScript
Option to continue onto web development bootcamp
Come talk to me if you’re interested (or email me at [email protected])
