Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
JavaScript Memory Game coding project
Rating: 4.0 out of 5(70 ratings)
7,485 students

JavaScript Memory Game coding project

Explore how you can build a custom JavaScript Memory game from Scratch learn JavaScript by working on this project
Created byLaurence Svekis
Last updated 11/2024
English
English [Auto],

What you'll learn

  • How to use JavaScript
  • How to build web applications
  • How to apply JavaScript
  • Create web applications

Course content

2 sections • 24 lectures • 2h 7m total length

  • Introduction to building JavaScript Memory Game4:11

    Learn to build a JavaScript memory game from scratch by dynamically generating the board, shuffling image cards, handling click events, and implementing match logic and timing.

  • Resource Setup3:09

    Choose a code editor, such as Adam, and install Chrome to access strong developer tools. Open the browser console to explore JavaScript and front-end debugging as you prepare to code.

  • Setup HTML Template4:23

    Create HTML template for the memory game by opening a blank file, adding the doctype, html, head, and a memory title, then prepare a wrapper with score, message, and gameboard.

  • Source Code HTML0:04
  • Loop declare image array6:25

    Load six tile images into a dynamic array for a memory game using a for loop and push, then prepare a 3x4 (or 4x3) game board with matching pairs.

  • Add Click Event to start Game5:37

    Attach a click event to the start button, grab the start element by id, and start the game by hiding the button and logging started.

  • Source Code0:10
  • Array Randomizer explained14:33

    Learn to shuffle arrays in JavaScript using a shuffle function, explore Math.random, Math.floor, and Math.ceil, and practice swapping elements to create randomized game data.

  • Source Code0:28
  • Build Game Board Dynamically11:02

    Builds the game board dynamically by looping through the tile array, creating tiles with images, and wiring a pick-card function to flip and compare cards.

  • Make Game interactive flip tiles10:38

    Implement the pick card function to flip tiles, track tile indices, prevent double clicks, and verify matches by updating card sources and managing flipped state in a memory game.

  • Source Code0:50
  • Check if item is in array10:30

    Learn how to track flipped tiles with a tile flipped over array, using push and indexOf to check inclusion, prevent re-clicks, and drive the card flip logic.

  • Setup Intervals flip cards back8:47

    Implement a JavaScript memory game mechanic that flips two cards, checks for a match, and uses setInterval to flip back unmatched cards, locking the board during the interval.

  • Gameplay setup match detection8:48

    Lock out play after two cards, reset the flipped card, and compare matches by source to finish the game when the array length exceeds 12 and offer a restart.

  • Source Code1:04
  • Game Tweaks and updates10:19

    Enhance the memory game by implementing a dynamic message system, managing tile arrays, and a robust restart that rebuilds the board and updates matches.

  • Course Conclusion13:41

    Review the memory game source code, focusing on javascript and css styling, start button behavior, and how tiles are built on the board, shuffled, and flipped.

  • Source Code1:13
  • Create css and js files2:37

    Move css to an external style.css and javascript to script.js, then link them in html for a flexible, reusable memory game project.

Requirements

  • Basic HTML and CSS
  • Understanding of JavaScript code principles
  • computer access
  • editor and browser access

Description

Learn how to apply JavaScript to build your own version of this Memory game from scratch.  One of the best ways to learn JavaScript is to practice and try the code yourself.  This course has the perfect beginners project to see how to apply JavaScript to make a dynamic and interactive game from scratch.

Source Code is included with step by step guide on how to create your own game using JavaScript.  See how JavaScript works create an application from scratch.

Basic understanding of JavaScript is a prerequisite for this course, the focus of the course is learning how to use JavaScript in a real world project.  See how it all fits together...

Learn about how to use variables, functions, loops, intervals, objects and more.  See how to make your HTML elements interactive set up event listeners and update elements using JavaScript.  By the end of the course you will have the skills to build you own mini projects using JavaScript from scratch.

See how JavaScript works ...

  • Top resources and how to setup your work environment

  • create an html template to start any project

  • Learn why loops can save time in development

  • Explore how click events can be setup and make your content interactive

  • Learn how to build a randomizer in JavaScript

  • Output dynamically generated HTML content

  • Update DOM elements

  • Use arrays to store data

  • Learn how to shuffle arrays

  • Apply logic to test if players selections are a win

  • Debug and tweak applications

  • all this an more

Source Code is included

Learn to Create your own JavaScript GAME!!!


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.

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.

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

Taught by an instructor with over 18 years of web development experience ready to answer any questions you may have. Daily Q&A responses to help you learn.  What are you waiting for join now and learn JavaScript project development today


Who this course is for:

  • Anyone learning JavaScript
  • Web developers
  • JavaScript beginners

Report abuse