![2D Game Development with Javascript and CSS3 - Create a Memory Game [Video]](https://static.packt-cdn.com/products/9781838826697/cover/smaller)
2D Game Development with Javascript and CSS3 - Create a Memory Game [Video]
Video
Subscription
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
Subscription
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
-
Free ChapterIntroduction
-
HTML5 Building Blocks of the Game
-
Styling the Memory game - CSS & CSS3 transformations & Transitions - Final look
- Linking the stylesheet & basics of CSS
- Set up the default stylings
- Design the header
- Design the updates section
- Design the timer and scroll areas
- Design the new game button
- Design the game area
- Design the cards
- Design the front and back parts of the card
- Include CSS3 transformation and transitions in the cards
- Design the opacity screen
- Design the result popup part 1
- Design the result popup part 2
-
[OPTIONAL] JavaScript Basic Concepts (related to this project)
- Connecting HTML and script/JS files
- An introduction to variables and assigning values
- Mathematical operators and alerts
- Conditional statements - if else statement
- Conditional statements - Switch case
- Loops - For loop
- Arrays - 1 dimensional arrays
- Arrays - 2 dimensional arrays
- An introduction to functions (function definition and calls)
- Intro to DOM - getElementById and InnerText
- Intro to DOM - adding click events to buttons
- More Event listeners Part 1
- More Event listeners Part 2
-
Javascript code for the game - Making the game playable
- Step by step algorithm for the Javascript code of the game
- Creating and assigning the global variables required for the code
- Retrieving the necessary HTML elements & more global variables
- Create the click event listener for the game area, retrieve & send card id
- Make the flipping work on card click
- Create a basic game with no randomization, timer etc
- Create a basic game with no randomization, timer etc. part 2
- Create a basic result display
- Create function that flips the cards back when they don't match
- Make the new game button work
- Randomize the cards on loading part 1
- Randomize the game boxes on loading part 2
- Randomize the game boxes on loading part 3
- Make the timer work
- Create a customized result display
- Create a customized result display part 2
About this
video
- 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
Style and Approach
This course is a seamless blend of text, videos, code examples,that will help you take learn efficiently as you progress through the course.
- Publication date:
- March 2019
- Publisher
- Packt
- Duration
- 7 hours 43 minutes
- ISBN
- 9781838826697
Download code from GitHub