Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 1.5 hours on-demand video
  • 34 articles
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
IT & Software Other IT & Software JavaScript

Build the Game of Life

Master HTML, CSS and JavaScript by building a game
Rating: 4.3 out of 54.3 (98 ratings)
1,528 students
Created by Elisabeth Robson, Eric Freeman
Last updated 1/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • JavaScript programming
  • JavaScript event handling
  • How to interact with the web page using JavaScript
  • How to create the Game of Life in a web page

Requirements

  • Basic HTML, CSS, and JavaScript Programming Skills

Description

Welcome to Build the Game of Life, a project that takes you through building a generative, cellular automaton game from start to finish in a one page app using HTML, CSS and JavaScript. This project is a great way for you to integrate your skills with markup, style and behavior by creating an interactive and dynamic application right in your browser. In this project we’ll make heavy use of the DOM, events, timing and simple logic to create a truly generative application.

Who this course is for:

  • Beginner to intermediate web developers

Course content

7 sections • 66 lectures • 1h 50m total length

  • Preview03:42
  • Preview01:30
  • Prerequisites and Tools
    01:48
  • Exercise: Play the game of life on paper
    01:48
  • Observations about the Game of Life
    00:21
  • Field Trip: Learn more about the Game of Life
    00:12
  • Preview01:54
  • The Game Plan: Big Picture
    00:56
  • Audience Question
    00:37

  • Preview01:54
  • Code the Markup with HTML
    01:31
  • Code the Style with CSS
    00:37
  • Exercise: Think about the grid
    00:47
  • Create the Grid
    01:45
  • Overheard on the forum
    00:55
  • Exercise: Try creating the grid
    00:28
  • Create the grid with JavaScript: Overview
    06:29
  • Create the grid with JavaScript: Write the Code
    00:08
  • Crash test the Grid
    01:31

  • Introduction
    01:59
  • How to turn on a cell
    02:02
  • DOM Events Puzzle
    1 question
  • Add a click handler
    02:17
  • Add a click handler: Write the code
    00:15
  • Crash test the click handler
    01:06
  • Take a Break: Explore the Game of Life
    00:19
  • Handle button clicks
    02:30
  • Exercise: Design the Button Handlers
    00:59
  • Implement the button click handlers
    03:36
  • Crash test the button click handlers
    01:32

  • Introduction
    02:01
  • Design the model
    01:08
  • Overheard on the forum
    01:08
  • Code the grid model: Write the Code
    00:46
  • Code the grid model
    04:18
  • Crash test the grid model
    01:51
  • Exercise: Think about the grid model
    00:38
  • The rules of the Game of Life: Overview
    00:50
  • Preview04:46
  • Compute one generation: Overview
    00:34
  • Compute one generation
    06:48
  • Crash test the code to compute one generation
    01:57
  • Exercise: Research the setTimeout function
    00:11
  • Take a break: Generative applications
    00:23

  • Introduction
    02:04
  • The game plan for the view
    01:02
  • Update the View from the Model: Overview
    00:38
  • Update the View from the Model
    03:57
  • Audience question
    00:36
  • Crash test the View code
    01:50
  • Exercise: Think about how to keep the game going
    01:03
  • Plan the timer
    02:26
  • Code the timer: Overview
    00:32
  • Code the timer
    02:29
  • Crash test the timer
    02:45

  • Introduction
    02:18
  • Code the clear button: Overview
    00:48
  • Code the clear button
    02:05
  • Crash test the clear button
    01:25
  • We have a bug!
    03:56
  • Fix the bug
    02:09
  • Bonus: add a random button
    01:14
  • Final design and test: Overview
    00:33
  • Final design and test
    02:11
  • The finish line
    00:59
  • The final code
    00:05

  • Bonus Lesson
    00:14

Instructors

Elisabeth Robson
Co-founder and Principal at WickedlySmart
Elisabeth Robson
  • 4.5 Instructor Rating
  • 173 Reviews
  • 1,812 Students
  • 6 Courses

Elisabeth Robson is a co-founder and principal at WickedlySmart, an author, and software developer, and teaches online courses for for O'Reilly Media and LinkedIn Learning. She's the co-author of four best-selling titles--Head First JavaScript Programming, Head First Design Patterns, Head First HTML & CSS, and Head First HTML5 Programming--and previously the Director of Special Projects and co-director of the Head First series at O'Reilly Media. Prior to her work at O'Reilly Media, Elisabeth was Director of Engineering at The Walt Disney Company. Elisabeth holds a Master's Degree in Computer Science from Yale University. 

Eric Freeman
Computer Scientist
Eric Freeman
  • 4.2 Instructor Rating
  • 121 Reviews
  • 1,587 Students
  • 2 Courses

Eric is described by Head First series co-creator Kathy Sierra as "one of those rare individuals fluent in the language, practice, and culture of multiple domains from hipster hacker, corporate VP, engineer, think tank." Professionally, Eric recently ended nearly a decade as a media company executive-having held the position of CTO of Disney Online at The Walt Disney Company. Eric now devotes his time to writing and teaching software technology. His book Head First Design Patterns is considered an indispensable guide for object-oriented programmers and won the Jolt award for technical excellence.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.