1. To trial the platform and take tests, please take a few seconds to SIGN UP
and SET UP FREE.
2. Searching for something specific? See our text overview of all tests. Scroll right for levels, and lists.
Join 36000+ teachers and students using TTIO.
In this teaching video series you will be introduced to Game Design and Creation in HTML, CSS and JavaScript. By lesson 2 you will have a complete mini game! In Lesson 4, you re-create the famous flappy birds game. Play it here. For every lesson, we have also included a github repository link which includes the full code for the lesson. We recommend that you type it out line by line for yourself with the video tutorial, but the code is there if you need it. Don't forget to do the associated lesson test when you're ready!
Essential: You should really have some basic knowledge of what a webpage is and how HTML and CSS interact. Watch this quick four minute video to help with that.
In lesson 1 you create your game's stage, generate the blocks for the character and enemy using CSS and start to understand some foundational principles of game design including exploring the computer coordinate system.
To download the code for this lesson, click on the link below, maximise the page. Search for "Code" and select "download zip". Once you extract the zip file, you'll see all the relevant html, css and JavaScript files for this lesson.
https://github.com/gamedesigntestandtrack/battle1.git
Suggested but not essential: (do this first)
Web design series and JavaScript Basics.
If you want to go further and consolidate some of the concepts covered in this video lesson, the below provides a fabulous foundation. It is suggested that students try to adapt what was created in the lesson and use these resources to create additonal/adapted elements.
1. Basic HTML page and basics W3schools reference and tutorial.
2. CSS reference and tutorial.
3. Linking (external CSS style sheets and JavaScript external script)
4. CSS classes and defining elements (CSS reference)
6. CSS positioning of elements https://developer.mozilla.org/en-US/docs/Web/CSS/position
7. Absolute/Relative https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ and https://www.digitalocean.com/community/tutorials/css-practical-guide-position-relative-absolute
8. What is an IDE - Suggested IDE: Download Brackets
9. Keyframes animation (CSS) https://www.w3schools.com/css/css3_animations.asp
www.teachyourselfpython.com