Welcome to the Gamedev Canvas Content Kit, also known as Web Games Starter Kit or HTML5 Game Development for Beginners. This Content Kit contains resources on how to start building games in pure JavaScript and render them on Canvas, it is prepared especially for beginners. You can use it to learn it yourself or teach others either by giving a conference talk or during the hands-on workshop.
This Content Kit can be used as a base for the conference talk material, workshop, online training or whatever else comes to your mind. You can use the slides containing the commented, explained snippets of code to present the topic to the audience, or you can run a live-coding session showing people how to build the final version of the game from scratch. You can also add your own content or trim the existing one if you have limited time for the talk.
This Content Kit was last updated on May 11th 2015. It is published under the Mozilla Public License, version 2.0.
Here's what the audience will be able to do or get from your talk/workshop:
There are two sets of slides that can be used independently, or together one after another if you have enough time. The first, optional "theory" slide deck walks you through the HTML5 game development in general, its tools and resources. The second, main "talk" slide deck is using the Breakout HTML5 game as an example and explains the key elements needed to have such game implemented.
Presenting about HTML5 game development is fairly simple — you just need the slides and demo materials, downloaded locally if possible so network connectivity is not a problem. Just running the "theory" presentation without a code walkthrough or workshop should take 30 minutes, and the "talk" presentation should also take about 30 minutes. You can present those two in this particular order if you have an hour for your talk. If your time is limited to a half an hour, you can go with the main slide deck only.
You can visit the slides subpage where all the decks are available - those two for the presentation, a short live-coding instructions, and the workshop transcript.
In its simplest form, the demos can be run simply by double clicking the html files in the demos directory (from lesson01.html to lesson10.html), or navigating to the live demos directly.
You can find the full list of demos and their short description on the demos subpage. You can launch the last, final demo (lesson10.html) during the talk if you want to show the actual gameplay and show the full source code.
Follow these external resources to learn more about HTML5 game development.
Remember that the audience may have some questions about the topic. Be sure to feel comfortable with what you're presenting. Don't worry if you don't know the answer to a question - you can always tell them you'll check it and answer later, or you can point them to any of the external resources so they can check it themselves.
Send pull requests if you find anything that should be fixed or updated.
The English version is the only one available right now, but the Polish version is being worked on and should be available in the near future. Feel free to translate the resources to your native language and send the pull request, so other developers can benefit from that.
This Content Kit was created by Andrzej Mazur - you can ping him on Twitter @end3r or send him an email. Feel free to ask questions, request training on using the Content Kit or preparing for the talk. Send feedback if you have any.
If you're interested in Content Kits you can find the full list on the MDN page. If you want to create one yourself there's Mozilla Wiki for that with all the details you need. The Content Kits project started as the collaboration between the Mozilla MDN Technical Writers and Technical Evangelism teams. They are here to help you, so don't hesitate if you need anything or have any questions: ask them directly via the #mdn IRC channel or the dev-mdc mailing list.