Web Game Development

doing it the unconventional way

A 90 mins CSE154 Exploration Session by Jeremy Zhang

A little bit about me, Jeremy Zhang

  • Majorless Junior
  • Infrastructure TA
  • GitGrade
  • Attendance Tool
  • JSLint
  • HUGE fan of the My Little Pony: Friendship is Magic TV show
But first... we must take attendance!

https://staff.washington.edu/jkzhang/attendance

A bit about the attendance webapp

  • MaterializeCSS theme
  • PHP & MySQL Backend
  • CSE154 topics friendly :)

https://staff.washington.edu/jkzhang/attendance
Password:

rainbowdash

So why are we here? What are we going to talk about today?

Recall to the first day of the quarter...

When I trashed the course website!

Outline of today's session

  1. Show where things come from and how I designed the April Fool's site
  2. Applying basic game development logic into web programming

Let's-a-go!

Origins of the intro logo animation

Smash Bros. Ultimate Trailer

When the game is booted

How did I make the animation?

(It's not CSS animations btw)

Adobe Flash!

Errr... actually they rebranded it to Adobe Animate

So back to the website.

Javascript Libraries!

A library to play sound

soundmanager2

A library to shake things

jRumble

And a library that makes javascript easier to use

jQuery

There is actually a lot of JavaScript frameworks in the world!

No need to reinvent the wheel if it already exists!

I'm bored, let's go make a game!

Hypothetically, we want to take a character...

Corrin

Animate it by responding to keyboard presses

Corrin being animated

And move it around a stage!

Let's begin!

So why sprites, not GIF?

(Gif is pronounced with a hard G btw, not the peanut butter kind)

So why sprites, not GIF?

  • More control to display which frames to show for the character
  • Loads much faster as a single image compared to a gif which is comprised of multiple images

Why that?


							setInterval(function () {console.log(this)}, 100);
							// Actually prints the Window object
							
							/* Using "that" */
							let that = this; // "this" keyword refers to the class
							setInterval(function () {console.log(that)}, 100);
							// Print's the class

The setTimeout() and setInterval() are both methods of the HTML DOM Window object.

Find the right keyCode!

https://keycode.info/

So why JavaScript classes?

So things can easily be cloned!

Corrin get's a Partner Pikachu

Or maybe even to recreate your own Kirby Victory Dance!!

If you don't know what that is, here is a video of the history of Kirby's Victory Dances.

And.. That's all folks!

Since we ended "early" and the room is booked until 6:30pm, is anyone up for some rounds of Smash Bros Ulimate game?