CS 2510, Spring 2026, Topics

These are the topics we are going to cover in class each day. Links to example student videos and slides from class

Day 01 - August 24 - Introduction (🧑‍🏫Lecture 1)

📢Announcements

• Welcome to class
• Get a GitHub account

💡New Idea: Game Programming Courses at UNO

• Game Programming Course Layout:

  • graph LR
    CS2510["CS2510 Introduction to Game Programming"]-->CS3510["CS3510 Advanced Game Programming"]
    CS2510-->CS4620["CS4620 3D Computer Graphics"]
    

    Loading
  • CS 2510, Introduction to Game Programming
    • Build a 2D game engine and a game from scratch in JavaScript
  • CS 3510, Advanced Game Programming
    • Build a 3D game using a commercial game engine (Unity) as a team
  • CS 4620, 3D Graphics
    • Understand how to create and drawing 3D assets

💡New Idea: Other Game Programming Resources at UNO

• Many students use their capstone to build something game-related
• The art department has courses on developing 2D and 3D assets
• Maverick Meadow in the UNO student organization focused on game development

🎉Course Goals

• We are going to build a 2D game engine and game in JavaScript
• So we can focus on programming, not gathering assets, our games in this class will not include:
  • Images (Including emoji)
  • Sounds
• I will be using the VS Code IDE in class, but you can use any IDE
• I will be using the Live Server in VS Code, but you don't have to.
• You can see some examples of what previous students have done on YouTube

💡New Idea: Macro view of methods of drawing in HTML

• Box Model
  • 
  • 🔗Addition information at:
    • W3 Schools about the box model
    • MDN about the box model
• SVG
  • 🔗Additional information at:
    • MDN about SVG
    • W3 Schools about SVG
• Canvas
  • 🔗Additional information at:
    • W3 Schools about canvas
    • MDN about canvas API

💡New Idea: New JS concepts

• Structure of an HTML document

  • doctype
  • html
  • head
  • body
  • script
  • Example code: Code from the instructor showing basic HTML Structure on GitHub
  • 🔗Additional information: W3 Schools Introduction to HTML

• Access elements in JS

  • 🔗Additional information: W3 article about Query Selector

• Declaring variables in JS

  • let and const
  • Example code: A file written by the instructor that is designed to teach about JavaScript
  • 🔗Additional information: Geeks for Geeks about let and const

• Good Introductory Websites in JS

  • JavaScript.info Tutorial Site
  • W3 Schools JS tutorials
  • Geeks for Geeks JS tutorials

💡New Idea: Methods of drawing specific to canvas

• Showing color
  • See slides: 3 Ways to show Color
  • 🔗Additional information: W3 School about named colors
  • 🔗Additional information: Website about rgb and hexadecimal values
• Paths/Polygons
  • 🔗Additional information: Website about drawing paths
• Circles (Arcs)
  • Introduction to radians
• Text
  • See slides: Fonts
  • 🔗Additional information:
    • MDN about drawing text
    • W3 Schools about drawing text
• Example code: Code written by the instructor to show what we are learning

👩‍💻Activity

• Take what we have learned about drawing and draw something more advanced. Here are some ideas to try:
  • Batman Logos
  • 

🤔To Think About

• Use an HTML canvas to draw the basic outline of a game you like. We can call this "blocking" out a game.
• Block out a game you enjoy using the basic drawing tools we use in class. Here are some examples of the instructor blocking out the original Super Mario Bros game.
• Example code:
  • Example code from the instructor showing how to block a game using arrays
  • Example code from the instructor showing how to block a game drawing "freehand"