O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

2D Game Development with Javascript and CSS3 - Create a Memory Game

Video Description

Build a Randomized Memory Game with Timer - 2D Game Development - HTML5 & CSS3 Transformation (Transitions) – JavaScript

About This Video

  • Learn and understand the basics of JavaScript.
  • Learn to build a completely randomized, intelligent, 2D memory game with stellar design with JavaScript, HTML5, and CSS3.

In Detail

In this course, you'll learn how to build a randomized, dynamic 2D memory game with a timer, scorecard, and a customized result display from the ground up with just HTML5, JavaScript, and CSSS and using 2D game development concepts—all in just a couple of hours.

In this course you will learn

  • How to build a completely randomized, intelligent 2D memory game with stellar design with JavaScript, HTML5, and CSS3
  • How to design game logic for games and implement it as code
  • How to make the game intelligent and interesting by introducing a randomization element into it and making it unpredictable even for the programmer
  • How to set up the skeleton of a web app or web game using HTML5
  • How to design a sophisticated 2D game using advanced CSS and CSS3 concepts
  • How to make a 2D game playable using JavaScript concepts
  • How to build a fully featured timer for your game
  • How to make CSS3 card flipping work using CSS3 transitions and CSS3 transformations.
  • Logical problem solving
  • How to create completely customized popup boxes (you can use this knowledge in a number of other projects as well)
  • How to build a score display for your game that dynamically updates itself.
  • How 2D game development works on the web (with JavaScript and HTML5)
  • The basics of HTML5 & CSS3 (I'll explain the concepts as we code the project)
  • The basics of JavaScript (we have separate modules for this topic)
  • 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. All the code files and supporting files for this course are available at:https://github.com/PacktPublishing/2D-Game-Development-with-Javascript-and-CSS3---Create-a-Memory-Game

Downloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Chapter 1 : Introduction
    1. Introduction 00:03:54
  2. Chapter 2 : HTML5 Building Blocks of the Game
    1. Setting up the HTML skeleton, title and Meta information 00:10:09
    2. Create the app's header and updates sections 00:06:51
    3. Create the game area with all the cards, both front and back 00:13:43
    4. Create the skeleton of both the opacity screen and result popup 00:09:05
  3. Chapter 3 : Styling the Memory game - CSS & CSS3 transformations & Transitions - Final look
    1. Linking the stylesheet & basics of CSS 00:04:58
    2. Set up the default stylings 00:08:25
    3. Design the header 00:10:06
    4. Design the updates section 00:06:12
    5. Design the timer and scroll areas 00:06:57
    6. Design the new game button 00:10:27
    7. Design the game area 00:09:54
    8. Design the cards 00:09:31
    9. Design the front and back parts of the card 00:11:43
    10. Include CSS3 transformation and transitions in the cards 00:11:34
    11. Design the opacity screen 00:09:45
    12. Design the result popup part 1 00:14:26
    13. Design the result popup part 2 00:12:38
  4. Chapter 4 : [OPTIONAL] JavaScript Basic Concepts (related to this project)
    1. Connecting HTML and script/JS files 00:06:04
    2. An introduction to variables and assigning values 00:09:59
    3. Mathematical operators and alerts 00:09:52
    4. Conditional statements - if else statement 00:06:13
    5. Conditional statements - Switch case 00:07:12
    6. Loops - For loop 00:06:31
    7. Arrays - 1 dimensional arrays 00:06:37
    8. Arrays - 2 dimensional arrays 00:05:08
    9. An introduction to functions (function definition and calls) 00:10:42
    10. Intro to DOM - getElementById and InnerText 00:10:48
    11. Intro to DOM - adding click events to buttons 00:09:06
    12. More Event listeners Part 1 00:08:12
    13. More Event listeners Part 2 00:04:39
  5. Chapter 5 : Javascript code for the game - Making the game playable
    1. Step by step algorithm for the Javascript code of the game 00:08:00
    2. Creating and assigning the global variables required for the code 00:13:09
    3. Retrieving the necessary HTML elements & more global variables 00:08:30
    4. Create the click event listener for the game area, retrieve & send card id 00:14:16
    5. Make the flipping work on card click 00:11:36
    6. Create a basic game with no randomization, timer etc 00:11:02
    7. Create a basic game with no randomization, timer etc. part 2 00:19:44
    8. Create a basic result display 00:03:14
    9. Create function that flips the cards back when they don't match 00:12:38
    10. Make the new game button work 00:05:15
    11. Randomize the cards on loading part 1 00:11:53
    12. Randomize the game boxes on loading part 2 00:16:19
    13. Randomize the game boxes on loading part 3 00:19:33
    14. Make the timer work 00:17:49
    15. Create a customized result display 00:13:47
    16. Create a customized result display part 2 00:05:48