Embedded Files
Suggested topics
Suggested topics
Did you already know about event handling in JavaScript or was this new to you?
How can we more efficiently handle multiple key presses together with mouse button clicks, mouse moves, etc? The course gives all the basics but there may be other more elegant ways.
Did you know about Gamepad API? Read this if you want to try it.
How do we make a responsive game that works in a canvas?
Optional projects
Optional projects
Here are a few project ideas. Your classmates and the team who prepared the course will be glad to try them and offer feedback. Please post URLs in this discussion forum. These projects are optional, meaning that they won't be graded. However, it is important to complete them to ensure good understanding of the material.
Project 1 (easy): Make one of your drawings move in all directions (left, right up, down, then diagonals) using the arrow keys.
Project 2 (a bit harder): Make an animated chart. When the page is loaded, the chart "grows" until the chart bars reach their "normal" value. Another variant is to use animated colors or shadows in your chart.
Find below an animated bar graph (very simple JS code) by Grant Winney, a student from a previous run of this course:
Project 3 (a bit harder): Make your monster follow the mouse + open its mouth and change color when we click on a mouse button. If you manage to make it scream, it's even better (use a hidden audio element and call play(). Advanced users may want to take a look at the howler.js JavaScript library that loads sound samples in memory and plays them on demand).
Project 4 (advanced): On the Web, look for JavaScript functions for detecting collisions (circle/circle or rectangle/rectangle), and try to make a small game in which your monster must "eat" some balls that bounce on the screen. Every 5s new balls appear on the canvas. Make your monster go towards the mouse pointer. You can use var angle = Math.atan2(dy, dx); in order to compute the monster angle, dx and dy = difference between the monster and mouse positions.
Project 5 (easy to intermediate): Put into practice what you've learned about the responsive canvas and develop an example of your own. The difficulty may vary depending on the things that are drawn or animated.
We have a "Snake" challenge for you, see next page!
Page updated
Google Sites
Report abuse