by Aarthi Elumalai | Released March 2019 | ISBN: 9781838826697

Build a Randomized Memory Game with Timer - 2D Game Development - HTML5 & CSS3 Transformation (Transitions) – JavaScriptAbout This VideoLearn 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 DetailIn 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 learnHow to build a completely randomized, intelligent 2D memory game with stellar design with JavaScript, HTML5, and CSS3How to design game logic for games and implement it as codeHow to make the game intelligent and interesting by introducing a randomization element into it and making it unpredictable even for the programmerHow to set up the skeleton of a web app or web game using HTML5How to design a sophisticated 2D game using advanced CSS and CSS3 conceptsHow to make a 2D game playable using JavaScript conceptsHow to build a fully featured timer for your gameHow to make CSS3 card flipping work using CSS3 transitions and CSS3 transformations.Logical problem solvingHow 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 developmentBy 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-GameDownloading 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. Show and hide more

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