Building a game with java script (march 2017, los angeles)

Building a game with JavaScript

March 2017

bit.ly/js-game-la

http://bit.ly/js-game-la

© 2016 Thinkful, Inc. All Rights Reserved. PRIVATE & CONFIDENTIAL2

About us

We train developers and data scientists through 1-on-1 mentorship and career prep

© 2016 Thinkful. All Rights Reserved. 3

About me

Rich Greenhill

Founded software solutions company

Instructor for Thinkful’s remote bootcamps

Former video games media and publishing executive


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/

http://bit.ly/2gfeIDR


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. Defining problems

2. Finding solutions to those problems

3. Implementing those solutions in a language your computer can understand


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

http://www.nytimes.com/projects/2012/snow-fall/


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

http://facebook.com


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

http://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/

Download ZIP of code: bit.ly/starter-code

http://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 Double click 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)


Working with other’s code

Take a tour of your starting point Open each of the files in sublime text Notice how the files 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 specific 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 specific 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 specific image file 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 specific feedback: getting warmer or colder?

Count number of guesses with each guess

Output each guess to the guess list

New game button


Quick poll about location & time

How long was your commute here today?

Under 30 mins

Over 30 mins — what if we were in DTLA?

Would 7pm have been a better time for you?


What is Thinkful?

1-on-1 mentorship

Full-stack curriculum

Career prep and job-placement


1-on-1 mentorship


Independently verified 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])

mailto:[email protected]

Thank you! Email me with questions or suggestions:

[email protected]

March 2017

mailto:[email protected]?subject=

Building a game with java script (march 2017, los angeles)

Education

Transcript of Building a game with java script (march 2017, los angeles)