Menu toggle

Agenda

The Schedule

Week 01 .. 06/21

  • Introductions
  • Course overview
    • Syllabus
  • Class picture
  • Student server prep
    • domainname.com/wbdv265/
    • domainname.com/wbdv265/hwk01/
    • domainname.com/wbdv265/hwk02/
    • domainname.com/wbdv265/hwk03/
    • domainname.com/wbdv265/midterm/
    • domainname.com/wbdv265/hwk04/
    • domainname.com/wbdv265/hwk05/
    • domainname.com/wbdv265/final/
  • Filenaming conventions
    • Upper-lower case letters
    • Numbers
    • "dash" abc-123
    • "underscore" abc_123
  1. Reading Assignment:

    Reading Assignment: HTML5 Game Development Insights by McAnlis, Colt; Sherry, Phil. 2014

    • Read Introduction
    • Read Chapter 1: JavaScript is Not the Language You Think it is

    Regarding your reading assignment, bring with you to class a single sheet of paper (8.5" by 11"). This single piece of paper will have on it three MEANINGFUL questions from the reading assignment, the answer to each question and the page number (or sub-section title) the information came from. At the top of the page you will put your full name, Drexel email prefix, and homework due date. These questions will be used next class for an extra credit quiz. If you do not meet the listed requirements, you will NOT be eligible to participate in said quiz.

  2. Research:
    • GIT repo's "Getting Started"
    • Find at least two online HTML5/CSS3/JS based games that you enjoy playing.
    • Given final project requirements, start thinking about what type of game you want to create and how it should be played.
  3. Create:

    Create a "Game Review" HTML5 web page

    • Valid URL direct links to online HTML5/CSS3/JS based games that you enjoy playing.
    • One short paragraph per link explaining WHY you enjoy playing said games? WHAT could be improved about said games?

How to turn in homework

Submit via your Drexel email account to your instructor email account, subject: "wbdv265-hwk01-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

In the body of your email message put the following:

  • Valid URL direct link to your "Game Review" web page.

Week 02 .. 06/28

Site of the Week

Today

  • REPO - single dev basics:
  • What is a REPO?
  • Benefits?
  • What should be storeed in repos? final build code & images files
  • What should NOT be stored in repos? psd, ai, docs, xls, etc
  • REPO - Sign up for education FREE accounts:
  • REPO - Client Apps:
  • REPO - Basic tasks:
    • Unstaged - Staged local files
    • COMMIT files to local repo
    • PUSH local commited changes to remote server
    • PULL remote server changes down to local repo
    • REVERSE COMMIT - aka UNDO
  • GAME storyboarding and assets preparation
    • Intro screen with instructions
    • Game screen
    • Win screen
    • Lose screen
  • JAVASCRIPT programming basics review
    • Input
    • Process
    • Output
    • Constant
    • Variables
    • Arrays
    • Step by Step processing
    • Conditional statements
    • Loops

Hands on Lecture

  • Let's start by creating a REPO and building a Solo Ping Pong Game
  • Stage 1/3 .. Download student starter files.
  1. Read:

    Due: Prior to next class

    Regarding your reading assignment, bring with you to class a single sheet of paper (8.5" by 11"). This single piece of paper will have on it three MEANINGFUL questions from the reading assignment, the answer to each question and the page number (or sub-section title) the information came from. At the top of the page you will put your full name, Drexel email prefix, and homework due date. These questions will be used next class for an extra credit quiz. If you do not meet the listed requirements, you will NOT be eligible to participate in said quiz.

  2. Create:

    The 1st draft of your game screens:

    • Intro screen with game title & detailed directions on how to play
    • Game screen (timer, score)
    • Win screen (score, replay)
    • Lose screen (score, replay)
    • Each game screen should be jpg or png format, 72 dpi, RGB mode, and (960w by 720h) or (720w by 960h) in pixels.
    • These games screens should be embedded into ONE HTML page using img tags.

How to turn in homework

    Submit via your Drexel email account to your instructor email account, subject: "wbdv265-hwk02-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

    In the body of your email message put the following:

    • The URL to your homework assignment page.
    • Reference Week 01 Agenda for URL naming conventions.

Week 03 .. 07/05

Site of the Week

Today

Hands on Lecture

  • Finish building the Solo Ping Pong Game main screen
  • Stage 2/3 .. student sample files from last week.
  1. Create:

    The FINAL static interface of your game screens:

    • Intro screen with game title & detailed directions on how to play
    • Game screen (timer, score)
    • Win screen (score, replay)
    • Lose screen (score, replay)
    • Each game screen should be jpg or png format, 72 dpi, RGB mode, and (960w by 720h) or (720w by 960h) in pixels.
    • These games screens should be embedded into ONE HTML page using img tags.

How to turn in homework

    Submit via your Drexel email account to your instructor email account, subject: "wbdv265-hwk03-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

    In the body of your email message put the following:

    • The URL to your homework assignment page.
    • Reference Week 01 Agenda for URL & file naming conventions.

Week 04 .. 07/12

Site of the Week

Today

Hands on Lecture

  • Let's finish building the Solo Ping Pong Game
  • Download sound effect folder
  • Stage 3/3 .. student sample files from last week.

Week 05 .. 07/19

Site of the Week

Mobile HTML5 Game Frameworks

Hands on Lecture

  • Let's finish building the Solo Ping Pong Game
  • Stage 3/3 .. student sample files from last week.

Today

Midterm Review

  • Working Sample Review
  1. MIDTERM:

    Successfully customize the Solo Pong game created in class to do the following with zero console errors and/or warnings:

    • Change collision sound effect.
    • Change game orientation from vertical (top/down) to horizontal (left/right).
    • Center Score display object to top-center.
    • Display game instructions in addition to the "Start" button on the main screen.
    • Change the colors of paddles (two different colors).
    • Decrease paddle height by 5 pixels every 4 points.
    • Change ball particles to a different random color on each collision. (Extra Credit Option +5)
  2. Read:

    Due: Prior to next class READ


How to turn in MIDTERM

    Submit via your Drexel email account to your instructor email account, subject: "wbdv265-midterm-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

    In the body of your email message put the following:

    • The direct link URL to your midterm project.
    • The direct link URL to download a zipped version of your midterm project.
    • Reference Week 01 Agenda for URL & file naming conventions.

Week 06 .. 07/26

I'm Attending - An Event Apart Conference

No class lecture this week

Week 07 .. 08/02

Today

HTML game frameworks

  • Why are we using phaser.io for our final project?
  • Installation
  • Testing

Phaser Workflow Options

  • Any editor .. Upload files to http server browser preview and debugging
  • Any editor .. Local server browser preview and debugging (MAMP/WAMP)
  • Brackets live preview .. Note this option may not allow viewing in browser debug mode.

The "Phaser" framework basically boils down to one js file:

  • phaser.js .. uncompressed editable 2.5 mb
  • phaser.min.js .. compressed un-editable 681 kb

Source files

Let's build

  • Phaser single "state" (640x460) with centered image
  • Add text caption to "state"
  • Add a button to "state" with over, out, and down "frames"
  1. Create:

    Based on what we covered in class today and all of your research/reading.. Re-create your game screens (a.k.a states) in four different Phaser projects (a.k.a folders). 960w by 720h or 720w by 960h in pixels. Centered horizontally on HTML page with dark background. All buttons should have meaningfull over, out, and down frames. All text should be rendered as text (except for text on buttons).

    • Intro screen with game title & detailed directions on how to play
    • Game screen (timer, score)
    • Win screen (score, replay)
    • Lose screen (score, replay)

How to turn in homework

    Submit via your Drexel email account to your instructor email account, subject: "wbdv265-hwk04-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

    In the body of your email message put the following:

    • One URL to your homework assignment page. This html page should have links to your four Phaser projects.
    • Direct link to download zipped folder "wbdv265-hwk04-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix] that contains:
      • "intro" folder
      • "game" folder
      • "win" folder
      • "lose" folder
    • Reference Week 01 Agenda for URL & file naming conventions.

Week 08 .. 08/09

Phaser Multi Sreen Navigation

  • Embedding custom fonts
  • Game Screens = Phaser States
  • Game Objects
  • Preloading game graphics
  • Dynamic preloading progress bar
  • Global vs Local variables
  • External modular JS files
  • Working sample walk-through
  1. Create:

    Based on what we covered in class today and all of your research/reading.. Convert your game states (a.k.a screens) into one Phaser project. 960w by 720h or 720w by 960h in pixels. Centered horizontally. All buttons should have meaningfull over, out, and down frames. Navigation buttons should be functional. Add temporary "win" and "lose" buttons to game state to nagivate to said screens/states. All text should be rendered as text with button text being the only exception.

    • Intro screen with game title & detailed directions on how to play
    • Game screen (timer, score)
    • Win screen (final score, final time, replay button)
    • Lose screen (final score, final time, replay button)

How to turn in homework

    Submit via your Drexel email account to your instructor email account, subject: "wbdv265-hwk05-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]

    In the body of your email message put the following:

    • One URL to your homework assignment page.
    • Direct link to download zipped folder "wbdv265-hwk05-s###-jwt23" [replace ### with your class section number, replace jwt23 with your Drexel email account prefix]:
    • Reference Week 01 Agenda for URL & file naming conventions.

Week 09 .. 08/16

Phaser Count Down Timer .. Sample

  • Latest version of Phaser.io 2.4.1
  • Global - Stage - local variables
  • game.time.create
  • loop
  • start
  • Pause timer
  • Reset timer

Lab Time

Time period will consist of demos and troubleshooting group and/or individual issues.


25/40 final project - optional

  • Everything covered in class lecture/lab thus far.
  • Custom Win, Lose, and Points button on "Game" stage/screen.
  • Timer counts down from "02:00" minutes.
  • Clicking on a custom "Points" button will increase the Score.
  • Win screen will show final score and time.
  • Lose screen will show final score and time.
  • Win, Lose replay button with return gamer back to "Game" screen/stage with timer and score reset.
  • ZERO errors or warnings.

Week 10 .. 08/23

Today

  • Project status review
  • Lecture - Lab

Due: Before Saturday Sept 3rd

  • Submit via email to your instructor, subject: "wbdv265-final-s###-jwt23" [replace ### with your class section number, replace jwt23 with your drexel email account prefix]
  • Direct link to your final project game.
  • Bullet list of any extra credit functional features.
  • Direct link to download final project game zipped folder that contains:
    • *.html
    • *.css
    • *.js
    • *.png
    • *.jpg
    • Embedded fonts
    • Any other files needed to run your game
  • Reference Week 01 Agenda for URL & file naming conventions.