Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Build Minesweeper with JavaScript

Traversy Media via YouTube

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Learn to create the classic Minesweeper game using vanilla JavaScript in this 48-minute tutorial. Explore recursion concepts and implement game functionality step-by-step. Begin with HTML setup and CSS grid styling, then dive into JavaScript DOM manipulation. Master techniques like creating the game board, adding numbers, checking square contents, implementing recursive neighbor checks, and handling user interactions. Develop skills in using methods such as createElement(), appendChild(), getAttribute(), and setTimeout(). By the end, gain the ability to build a fully functional Minesweeper game, complete with flag placement and win condition checks.

Syllabus

- Brad's Intro.
- Ania's Intro.
- Recursion explainer.
- Setting up our HTML.
- Styling our Grid in CSS.
- Setting up our JavaScript usng the DOM EventListener.
- Creating our Board using .createElement() and .appendChild().
- Adding numbers to the board using Modulus and .contains().
- Checking what is under a Square usng .getAttribute() .innerHTML and .add().
- Checking neighbouring squares using recursion and setTimeout.
- Adding flags to squares with a left click.
- Checking for wins.

Taught by

Traversy Media

Reviews

Start your review of Build Minesweeper with JavaScript

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.