Game Development Course

Intended Learning Outcomes

At the end of the workshop, the participants will learn,

  • The basic concepts of Javascript
  • How to work with data structures like arrays and javascript objects
  • Event listening; detect mouse and keyboard input and take necessary action
  • To use canvas element to draw objects on the webpage
  • To animate objects/ sprites on the canvas
  • How to detect collision between objects

Day 1

Session -1

Agenda

  • Introduction to the workshop
  • Tour of learning portal
  • Using slack for communication
  • Introduction to web based applications – HTML, JS.
  • Introduction to p5 js editor
  • Introduction to js 
  • Draw a circle
  • Change the size and position of the circle
  • Draw a flower
  • Write a function for drawing a flower
  • Draw flowers at random locations 

Learning goals:

Understand the following concepts using javascript.

  • Variables
  • Functions
  • Random numbers
  • Using canvas to paint on a web page

Session 2: Pong game

Agenda:

  • Draw a ball
  • Animate the ball
  • Bounce the ball at the edges
  • Draw paddle
  • Detect collision of ball with paddle

Learning goals:

The learner should be able to 

  • Create an object and animate it on the screen
  • Move an object along with the mouse point
  • Detect collision of two objects

Day 2 –  Letter Rain game

Session 1

Agenda:

  • Display a letter on the screen
  • Animate a letter
  • Display a random letter
  • Handle user input
  • Match a letter and update scores

Learning goals:

The learner should be able to 

  • Draw a text on the canvas
  • Create an array, get a random value from an array
  • Event listening – get the keyboard input and take action

Session 2

Agenda:

  • Make a rain with letters
  • Update score for every correct letter the user keys in
  • Increase the speed of the game as user gets higher score
  • Insert a button in canvas to pause/play the game
  • Use restart button to restart the game after game over

Learning goals:

The learner should be able to

  • Create and work with javascript objects.
  • Use an array of objects. Performing array operations – push, splice
  • Add a button element in the DOM

Day 3  – Space shooter

Session 1
Agenda:

  • Introduction to P5 play library
  • Create a player 
  • Create a shooter(bullet)
  • Shoot bullet on mouse click
  • Create enemies 
  • Animate enemies
  • Detect collision of bullet with enemies

Learning goals:

The learner should be able to

  • Use the p5 js play library to build games
  • Create Sprites and add image to the sprite
  • Detect mouse clicks and take action (Event listening)
  • Animate a sprite
  • Detect collision among sprites

Session 2:
Agenda:

  • Detect collision of enemy with player
  • Tilt the player and shoot
  • Move the player using arrow keys 
  • Add sound effect during collision
  • Include scores

Learning goals:

The learner should be able to

  • Add sound component to the game
  • Detection collision between sprites
  • Use keyboard input (arrow keys) to animate the sprite

Day 4 – Build2Learn

Agenda:

  • Introduction to Build2Learn
  • Pick a problem to work on 
  • Interactive sessions (through slack)
  • Demo your game

Game suggestions for build2learn

  • Word Rain
  • Flappy bird 
  • Snake game
  • Tic Tac Toe game
  • Word search

References:

https://p5js.org/reference/ 

https://molleindustria.github.io/p5.play/docs/classes/Sprite.html  

https://creative-coding.decontextualize.com/making-games-with-p5-play/