Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
JavaScript project Learn to create a memory Game and more
Rating: 4.0 out of 5(36 ratings)
6,438 students

JavaScript project Learn to create a memory Game and more

Step by Step how to create your own game using JavaScript. See how JavaScript works application building project.
Created byLaurence Svekis
Last updated 11/2024
English
English

What you'll learn

  • Learn the advantages of using JavaScript
  • Create your own JavaScript code
  • See the functionality of JavaScript

Course content

2 sections27 lectures1h 26m total length
  • JavaScript Game Course Introduction2:27

    Build a JavaScript memory game from a blank page, implementing core functions, a timer, restart, and user messaging, with reusable components and included source files.

  • JavaScript Setup Array2:55

    Develop a JavaScript memory game by setting up Bootstrap on a blank page, creating a tile images array, and using console logs to track image names and interactivity.

  • JavaScript Game Functions4:12

    Learn to dynamically load game tiles on board, initialize the game with a start function, loop the array, and display each image twice to form memory game pairs in JavaScript.

  • Array Shuffle random Function1:00
  • JavaScript Game innerHTML4:56

    Clear the game board with getElementById and innerHTML, then store the element for easy reuse. Build a bootstrap-based tile grid with styled divs and a 400px height.

  • JavaScript Game Concatenate arrays5:47

    Create a memory game array by concatenating the tile images to form duplicates, then use a custom shuffle function to randomize tile order and render flipping cards to test matches.

  • JavaScript Game onclick3:50

    Make memory game images clickable by wiring an on click handler that calls pickCard and returns false; implement takeHeart to console log the selection and pass values with backslashes.

  • JavaScript Game Image switch pass this3:52

    Pass tile indices and element data to the pick-card handler, building a memory game. Limit two flips at a time, compare tiles, and flip back if not matched.

  • Setup Variables and Start Game Function1:00
  • JavaScript Game Flip limits4:00

    Learn to implement a memory game mechanic in JavaScript by limiting flips to two cards, storing flipped values in an array, and comparing them for a match.

  • Pick a Card SourceCode1:00
  • JavaScript Game Tile Comparison Check4:03

    Learn to implement card matching logic in a memory game by comparing flipped cards, using strict vs loose equality, handling same and different results, and adding a flip-back timer.

  • JavaScript Game Set id flip back5:34

    Build a memory game by managing a dynamic cards array and tile ids, flipping and resetting cards with JavaScript, checking pairs, and adding a delay to reveal results.

  • JavaScript Game remove double click6:02

    Implement a memory game flow using setInterval to briefly reveal cards, then reset counters and enable a pick-again routine. Prevent double clicks and ensure each pick uses a different card.

  • Hide Card Source1:00
  • JavaScript Game setting clearing intervals2:28

    Fixes interval lag in a memory game by introducing a timer variable, using setInterval and clearInterval to reliably clear intervals after rapid clicks, with Bootstrap responsiveness for mobile.

  • Card Picked Function1:00
  • JavaScript Game score end game3:40

    Initialize the score to zero at game start and on restart, then check the array length to determine when all items are solved and trigger the end game.

  • JavaScript Game addEventListener restart5:58

    Add a hidden restart button with bootstrap styling, reveal it after game ends, and use a click event listener to reset the game, shuffle the array, and reset score.

  • JavaScript Memory Game Source Code3:00
  • JavaScript Game Message User10:17

    Enhance a memory game by adding a game done handler, a message overlay, and dynamic text updates to the play/restart button and user prompts.

  • JavaScript Game Adding a Timer and Score12:05

    Implement a timer for a JavaScript game with setTimeout, counting seconds, minutes, and hours, and display time in spans. Build a countdown-style score tied to time, with reset rules.

  • Game Final Source Code4:00

Requirements

  • Basics of JavaScript
  • Understand basic coding principles
  • Desire to learn about JavaScript
  • HTML and CSS basics

Description

One of the best ways to learn is to work on a project. We start with a blank page and build the application step by step. All of the source files are included.

Do you want to learn JavaScript working on a real project?

We show you how to use JavaScript to create an interactive game, everything from creating the game board to messaging, text, timers, and game setup.

We build this game in bootstrap, show you the HTML CSS and JavaScript.

Learn to Create your own JavaScript GAME!!!

Within this course we show you how to add JavaScript functionality when building out projects and use JavaScript to achieve your goals.

We have designed this course to optimize practicing JavaScript coding.

  • CODE SAMPLES INCLUDED!!
  • PRACTICE EXERCISES
  • CODE EXPLANATIONS
  • CODE IMPLEMENTATIONS

Try the code after each video lesson. PDF copy and paste code that we use within the course and TRY FOR YOURSELF.

Everything you need to learn about JavaScript is provided within this course.

  • quick lessons get right to the point
  • source files downloadable to work along
  • challenges and lessons
  • 30 day money back guarantee
  • new course material added regularly
  • trusted name in education since 2002
  • full HD easy to read source coding

Learn how Javascript works and it's fundamental concepts when it comes to creating games and interactive projects. Learn to build your own Javascript code to make your own JavaSCript memory game



Who this course is for:

  • Web Developers
  • Web coders
  • web content managers
  • JavaScript developers
  • Learn the advantages of using JavaScript
  • Anyone with a desire to learn
  • desire to understand more about how JavaScript works