About Class

This class will teach students how to make HTML5 Browser games utilizing HTML, CSS, JavaScript and the jQuery library. Students will be taught the fundamentals of Object Oriented Programming and strengthen their logic and problem solving abilities. Through lectures, programming demonstrations, class discussions, and individual work, students will learn how to create a game of their own design that can be played in any browser. Emphasis will be on learning the fundamentals of programming, how to access the DOM, how to plan programming projects, and avoid typical pitfalls in programming. Students will be assigned milestone assignments (such as flow charts, wireframes and programming) to ensure their final project is completed on time.

Learning Objectives

By the end of this course, students will have a solid foundation of the basics of programming and be able to create games by:

  • Understanding the fundamentals of Object Oriented Programming through the use of JavaScript and the Document Object Model
  • Learning the value of logic and flowcharts in planning a programming project
  • Using JavaScript and the HTML Document Object Model to create interactive games or applications
  • Gaining experience in problem solving and debugging
  • Create an application of their own design

Methods of Instruction:

  • Mini-lectures
  • Code Challenges
  • Code demonstrations to illustrate concepts
  • Online interaction using the class website
  • Group discussions
  • Peer review and critique

Suggested Textbooks/Readings:

Web Design with HTML, CSS, JavaScript and jQuery SetJSJQHTMLCSSBook

What you should know:

In this course, I expect that you may know some HTML and you know some CSS. If you do not right now, don’t worry! We’ll be covering that in this class as well, though it is a brief overview. Jon Ducket’s books, pictured alongside are excellent references as well. Since JavaScript is a language that was specifically created to make interactive web pages, you’ll need to know how to make basic web pages. Those books can help.

With CSS – We’ll learn how to create and apply styles to html elements, by selecting Ids, classes and other CSS selectors.

I don’t expect you to be a programmer, yet — that is specifically what we are here for. We’re going to cover the basics of programming via JavaScript. All programming languages have the things we are going to cover. We’ll learn all about variables, arrays, loops, conditional statements, functions and all the basic programming concepts. While we start with vanilla JavaScript we will move quickly into the use of the jQuery Library.

jquery-logo

What is jQuery?

It is one of the most popular, widely-used, open-source JavaScript libraries on the web today. Using jQuery brings a whole host of benefits. First, it simplifies the tasks commonly involved with creating web pages and applications that are highly interactive and responsive. Things like AJAX, dynamic content, and complex animations are all made easier by using jQuery. Second, jQuery works across all the current modern browsers, and it takes the worry out of a lot of browser-specific features.

This allows you to concentrate on the design and finished result, instead of spending all your time trying to figure out how to build for the variety of browsers out there. jQuery has you covered! Third, jQuery’s code syntax is nice and compact. It allows you to write code that is a lot less verbose than using plain JavaScript. This results in code that is easier to read, understand and maintain.

In this class we’ll be using HTML5, CSS and JavaScript to make interactive browser games as such the final project will be to make a complete in browser javascript game utilizing JavaScript and jQuery. Since we only have 6 weeks and 12 sessions, I will have some pre-done templates available for you to use and expand upon to give you a headstart on your projects. We will cover these the first day.

Why Games?

For one, who doesn’t like games? Games are fun and allow us to exercise our creativity and learn problem solving in a way that is not so boring and regimented.

Game design also requires a certain set of skills such as visual design, presentation, UI design and some empathy. It also makes you use logic, comparison statements and other constructs that you will use in any other programming language.

The class Syllabus can be publically viewed on Google Docs.