Preview lessons, content and tests

Computer Science & Programming solved. All in one platform.

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.

Game Design and Creation

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.

Video Lesson 1

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.

GitHub Repository

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.

Key concepts covered

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)

5. Computer Coordinate System

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