Tutorialspoint

Mid-Year Savings Flat 10% OFF, Use Code: MID10

2D Game Development Course with Javascript & CSS3

person icon DigiFisk (Programming Is Fun)

4.4

2D Game Development Course with Javascript & CSS3

Build a Randomized Memory Game with Timer - 2D Game Development - HTML5 & 2D CSS Animation (Transitions) - Javascript

updated on icon Updated on Jul, 2024

language icon Language - English

person icon DigiFisk (Programming Is Fun)

English [CC]

category icon Development,Game Development,2D Game Development

Lectures -52

Resources -4

Duration -7.5 hours

4.4

price-loader

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.

Course Description

Practice makes perfect. 

Start your journey into becoming a professional 2D Game Developer for the Web and a front end web developer here! 

Learn how to create a real world Dynamic, intelligent Memory Game with Timer & Score cards with Web 2D Game development concepts!

At DigiFisk, we like making learning fun. Our courses are interactive and fun with a ton of practical elements to it. We've decided to take it a step further with our Front end Web app development practice series. 

Once you learn the syntax of a programming language, the next logical step is to start creating software and apps. But that's where most students get stuck. Problem solving isn't as easy as learning a bunch of syntaxes. 

But we aim to make it easy for you. We also aim to teach you intermediate programming topics like object oriented programming while at it. 

What will you learn in this course?

In this course, you'll learn how to build your Randomized Dynamic 2D Memory Game with Timer, Score card & Customized result display from the ground up with just HTML5, Javascript and CSSS and 2D Game Development concepts  in just a couple of hours

You'll learn:

1. How to build a completely randomized, intelligent 2D memory game with stellar design with Javascript, HTML5 & CSS3

2. How to design the game logic for the game and implement it as code

3. How to make the game intelligent and interesting by introducing a randomization element into it. Make it unpredictable for even the programmer of the game.

4. How to set up the skeleton of a web app or web game using HTML5

5. How to design a sophisticated 2D game using advanced CSS and CSS3 concepts

6. How to make a 2D game playable using Javascript concepts

7. How to build a fully featured timer for your game

8. How to make CSS3 card flipping work using CSS3 transitions and css3 transformations.

9. Logical problem solving 

10. How to create completely customized popup boxes - you can use this knowledge in a number of other projects as well

11. How to build a score display for your game that dynamically updates itself. 

12. How 2D game development works in the web (with Javascript and HTML5)

13. The basics of HTML5 & CSS3 (I'll explain the concepts as we code the project)

14. The basics of Javascript (we have separate modules for this topics)

15. Front end design and development

By the end of the course, you'll be one step closer to creating web based 2D games and front end web apps like a pro. You could even try creating other web apps and games from the concepts you learn in this course. 

How is this course designed?

I've made this course as easy to understand as possible. I've structured it in such a way that each section will handle one of the 3 languages covered here. 

Introduction: This is where I'll explain how the game works, it's various features and what we'll be using to achieve the same results. 

Module 1: We'll be teaching you how to create the bare bones of the game with HTML5. The result will be a page with all the elements we need in our game, devoid any colors or design elements. 

Module 2: Here, we'll "beautify" our game. We'll be using both basic and Advanced CSS & CSS3 elements, including CSS3 Transformation & CSS3 Transitions, to give our app colors and styles (including 3D styles), and make the card flip happen. At the end of this module, we'll have a Memory game that'll look like the final result, albeit one that is not playable yet yet. We'll cover that in the Javascript module.  

Module 3: We'll be covering some basic concepts of Javascript in this module. We'll only cover concepts that we'll need for our app's Javascript code though. If you already know the basics, you can skip this module.  

Module 4: This would be the meat of the course. We'll be delving into Javascript & Web 2D Game development of our game in this module, and We'll teach you how to make the game playable (make the card flip, the timer, the randomized card load feature and the customized result display work) in here. 

Final section: Finally, We'll give you some ideas on how to improve/enhance the app further and make it your own in terms of design and functionalities. 

This course is for you if:

1. If you're completely new to web 2D game development & Web development and you want to learn by creating a real world 2D game.

2. If you're a complete newbie to the world of web development or 2D game development, or just programming in general, and would like to start creating games and web apps with the help of a beginner-friendly course. You'll learn the basics of everything used in this project (HTM5, CSS3, Javascript, CSS transitions & transformations). I'll be explaining every single line of code I'll be using in this course, so you won't feel lost.

3. If you have the passion for programming, and if you know the basics of HTML5 and CSS3, but you're stuck on the practical aspects of it. Turn your theoretical knowledge into practical knowledge with our course. 

4. If you want to learn web game development the fun way - by doing, rather than just listening and taking notes.

5. If you want to delve into the exciting world of 2D game development for the web, this course will take you a couple steps further in the right direction.

6. If you're a Javascript web developer who just wants to try out a new project. Our course welcomes coders of every level, from absolute beginners, to pros.

7. If you know the theoretical concepts of Javascript but would like to learn how to apply your knowledge in the real world.

8. If you want to add a real-world project/game to your resume - to get a promotion or find a new job.

9. If you want to pad your portfolio with a cool project to bag more freelance web development and 2D game development projects.

10. If you'd like to go from a complete beginner to an intermediate web programmer and 2D web game developer.

11. If you'd like to learn something that can be used in your university coursework (project).

So, what are you waiting for? Get this course today, and begin your journey into the wonderful world where 2D game development meets front end web development with the help of CSS3 transitions & transformations!

Goals

  • Build a completely randomized, intelligent 2D memory game with stellar design with Javascript, HTML5 & CSS3
  • Learn how to design the game logic for the game and implement it as code
  • Learn how to make the game intelligent and interesting by introducing a randomization element into it. Make it unpredictable for even the programmer of the game.
  • Learn how to set up the skeleton of a web app or web game using HTML5
  • Learn how to design a sophisticated 2D game using advanced CSS and CSS3 concepts
  • Learn how to make a 2D game playable using Javascript concepts
  • Build a fully featured timer for your game
  • Learn how to make CSS3 card flipping work
  • Learn how to create completely customized popup boxes - you can use this knowledge in a number of other projects as well
  • Build a score display for your game
  • Learn how to make completely customized alert boxes (or popup boxes) - the game's final display
  • Understand how 2D game development works in the web (with Javascript and HTML5)
  • Understand the basics of HTML5 & CSS3 (I'll explain the concepts as we code the project)
  • Understand the basics of Javascript (we have separate modules for this topics)
  • Improve your web app development, 2D game development & javascript skills
  • Improve your logical problem solving skills
  • Improve your front end design and development skills

Prerequisites

  • You can come to this course with absolutely no coding knowledge. I explain everything you need to create your very first 2D web game.
  • A PC or laptop to practice what I teach
2D Game Development Course with Javascript & CSS3

Curriculum

Check out the detailed breakdown of what’s inside the course

Introduction
1 Lectures
  • play icon Introduction 03:54 03:54
HTML5 Building Blocks of the Game
5 Lectures
Tutorialspoint
Styling the Quiz app - CSS & CSS3 transformations & Transitions - Final look
14 Lectures
Tutorialspoint
Javascript Basic Concepts (related to this project)
13 Lectures
Tutorialspoint
Javascript code for the game - Making the game playable
18 Lectures
Tutorialspoint

Instructor Details

DigiFisk (Programming is fun)

DigiFisk (Programming is fun)


Course Certificate

Use your certificate to make a career change or to advance in your current career.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
Annual Membership

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
Online Certifications

Talk to us

1800-202-0515