MemoryGame

Date : 1/18/2024

Made By: Fatima Fouad

---

Description

Memory Game is a game where you will have 4x4 table that has icons and the you have to remember the icons and match them in a specific time frame, there would be 3 main levels of diffculty where each level has a different timer, including an 'impossible level' , timers options :

• Easy: 60S
• Mid: 40S
• Hard: 20S

---

Game Link:

Live Link: MemoryGame

Faster Live Link: MemoryGame

Youtube Video for the game: MemoryGame

Extra Levels Updates

• 6x6 Matching
• 8x8 Matching

---

My Screenshots:

Memory Game Map:

Home Page:

Rules Page:

Level One 4x4 Page:

Level Two 6x6 Page:

Level Three 8x8 Page:

Impossible level 8x8 Page:

Technologies used

• VSCode (Editor for Writing the Code)
• HTML (Structure of the pages)
• CSS (Style of the pages)
• JavaScript (Functionality for the pages)
• WireFrame (Early map desgin of the game)
• Google Fonts (Fonts for the page)
• Trelllo (Managment for the work)
• Surge (Deployment of the game)

---

What I have learned:

• Manage my work on trello.
• hwo to write code more efficiently.
• Deployment on Surge.
• writing the logic of fliping more than one card and havnig them stay if they match and disappear if they don't.

---

What I am most proud of is the logic behind the card flipping and the event listeners for each icon:

  icon1IMG.innerHTML = '<img src="../Icons/icon1.png">'
  let icon1Interval = 0
  icon1Interval = setInterval(() => {
    if (icon1MatchIMG.innerHTML == '<img src="../Icons/icon1.png">') {
      icon1IMG.innerHTML = '<img src="../Icons/icon1.png">'
      clearInterval(icon1Interval)
      Win--
      CheckWin()
    } else {
      icon1IMG.innerHTML = ''
      clearInterval(icon1Interval)
    }
  }, 2000)

setTimeout(function ShowHints() {
    if (icon1IMG.innerHTML === '') {
      icon1IMG.innerHTML = '<img src="../Icons/icon1.png">'
      icon1Exist = false
    }
....
  }, 100)

 setTimeout(function deleteHints() {
    if (!icon1Exist) {
      icon1IMG.innerHTML = ''
    }
   .....

  }, 500)

---

Future plans:

• Have more levels 10x10 and 12x12.
• Have more categories for each level.
• Have more pictures that are random and not fixed.

---

Credits

WireFrame: MGMap

Icons: Icons

Programming Icons: PIcons

Buttons and style: buttons

Google fonts: fonts