memory-game #681
memory-game #681
Conversation
|
Please, review. |
|
Сhecked my work but could not find anything that could be corrected |
| const mainField = document.querySelector('.main'); | ||
| const doubleNumbers = [...arrayNumbers, ...arrayNumbers]; | ||
|
|
||
| const createCard = (arr) => { |
|
|
||
| const createCard = (arr) => { | ||
| const {value, id} = arr; | ||
| const cards = document.createElement('div'); |
| }; | ||
|
|
||
| const shuffleCards = (arr) => { | ||
| const card = arr.sort(() => 0.5 - Math.random()).map(createCard); |
|
|
||
| shuffleCards(doubleNumbers); | ||
|
|
||
| const toggleCards = document.querySelectorAll('.flipper'); |
There was a problem hiding this comment.
What should be here? toggle is a verb - "to toggle". Variable should be a noun, verbs are for functions.
| let countFlipCards = 0; | ||
| let openedCardId = 0; | ||
| let awaitFlips = 0; | ||
| let oneCard; |
There was a problem hiding this comment.
Define default values for variables. If nothing should be here yet - then it's null.
|
|
||
| const toggleCards = document.querySelectorAll('.flipper'); | ||
| let countFlipCards = 0; | ||
| let openedCardId = 0; |
There was a problem hiding this comment.
Look, you have openedCardId that stores an ID of an opened card and then you have oneCard and twoCard variables that store cards themselves. There are 3 variables and it could be changed to 1 variable.
Let's see what functionality you suppose them to have:
- They should indicate if there is a card open right now or not.
- They should store what Id exactly an opened card has.
- If the user opens a second card they should give you an option to compare IDs of an opened card and the newly clicked one.
Now, onto making it more clear.
We have 2 options:
First, we can get rid of the openedCardId variable, since from what I see in your code, it can only store a real ID when oneCard is not empty. But the problem is, oneCard stores the whole card. With ID inside it. So you're just doubling data, no need for that.
Second (and I think this one is better), we can get rid of openedCardId and twoCard completely. The twoCard variable in global scope doesn't make any sence, it is only used inside the flipCard function. Which means you can only store information about a single opened card in the global scope. And the opened card ID is stored in the oneCard anyway.
So you can just leave a single variable - openedCard and make it null by default.
When user clicks a card you do if (openedCard)..., and if it's empty, open the card and store it in this variable.
When user clicks another card, you just operate with a second card in bounds of the flipCard function, no need to store it somewhere. Check if the card is the same one and do nothing it that's the case. If not, check if they're equal. If they are - make them dissapear and place null to openedCard once again.
| awaitFlips = 0; | ||
| }, 800); | ||
| countFlipCards += 2; | ||
| } else{ |
| if (countFlipCards === 12) { | ||
| setTimeout(() => { | ||
| alert('YOU WIN!'); | ||
| document.location.reload(); |
There was a problem hiding this comment.
It's not realy good to reload the whole page to reset the game. It's a cheap and fast code-wise way, yeah, but imagine your game was far more complicated with heavy scripts and textures, user would need to reload this whole thing every time. Or maybe user has internet connection problems and cannot download the game a second time, it should not disrupt user's experience.
| setTimeout(() => { | ||
| alert('YOU WIN!'); | ||
| document.location.reload(); | ||
| countFlipCards = 0 |
There was a problem hiding this comment.
Are you sure this line even works, since you reload the page right before it?
| } | ||
| }; | ||
|
|
||
| toggleCards.forEach(card => card.addEventListener('click', flipCard)); |
There was a problem hiding this comment.
You should not create an event listener for every card separetely. They do the same thing, use event delegation to only use 1 event listener for the whole board.
|
This issue has been automatically marked as stale because there were no activity during last 14 days. It will be closed in 7 days if no further activity occurs. Thank you for your contributions. А. Чому так? Б. Що робити, якщо в піарі нема оновлень, оскільки не зрозуміло, що треба зробити? В. А якщо я все зробив(ла) і це ментор не рев'юває мої зміни?
Г. Хіба недостатньо того, що я додав(ла) коміт із змінами? Традиційна пропозиція: задай питання по вищенаписаному в студентському чаті. |
memory-game
Demo |
Code base
The code is submitted in a dedicated feature branch.
Only code files are submitted.
Please, review.