From 24f2253429260da86e1734f0c52d95832296006d Mon Sep 17 00:00:00 2001 From: asa Date: Mon, 8 Aug 2022 16:53:13 +0300 Subject: [PATCH 1/5] js core code --- .../asaMitaka/Object oriented JS/app.js | 169 ++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 submissions/asaMitaka/Object oriented JS/app.js diff --git a/submissions/asaMitaka/Object oriented JS/app.js b/submissions/asaMitaka/Object oriented JS/app.js new file mode 100644 index 0000000000..37f119e206 --- /dev/null +++ b/submissions/asaMitaka/Object oriented JS/app.js @@ -0,0 +1,169 @@ +// Enemies our player must avoid +var newP = document.createElement('p'); +newP.textContent = `Your score: 0 `; +document.body.append(newP); + +var enemyStat = { + width: 98, + height: 56, + sprite: "images/enemy-bug.png", +}; + +var field = { + min: -50, + borderX: 400, + borderY: 450, + waterCoord: 50, +} + +var playerStat = { + width: 80, + height: 80, + startPositionX: 200, + startPositionY: 400 +} + +var xColDistance = 80; +var yColDistance = 60; + +var Enemy = function(posX, posY, speed) { + // Variables applied to each of our instances go here, + // we've provided one for you to get started + this.posX = posX; + this.posY = posY; + this.speed = speed; + this.width = enemyStat.width; + this.height = enemyStat.height; + this.sprite = enemyStat.sprite; + // The image/sprite for our enemies, this uses + // a helper we've provided to easily load images +}; + +// Update the enemy's position, required method for game +// Parameter: dt, a time delta between ticks +Enemy.prototype.update = function(dt) { + this.posX += this.speed * dt; + if (this.posX > ctx.canvas.width) { + this.posX = -enemyStat.width; + } + // You should multiply any movement by the dt parameter + // which will ensure the game runs at the same speed for + // all computers. + this.collision(); +}; + +Enemy.prototype.collision = function() { + if (player.posX < this.posX + xColDistance && player.posX + xColDistance > this.posX && player.posY < this.posY + yColDistance && yColDistance + player.posY > this.posY) { + player.goToStartPosition(); + } +} + +// Draw the enemy on the screen, required method for game +Enemy.prototype.render = function() { + ctx.drawImage(Resources.get(this.sprite), this.posX, this.posY); +}; + +var allEnemyVal = [ + { + x: -120, + y: 200, + speed: 60 + }, + { + x: -120, + y: 120, + speed: 120 + }, + { + x: -30, + y: 50, + speed: 300 + } +]; + +var allEnemies = allEnemyVal.map( + ({x, y, speed}) => new Enemy(x, y, speed) +) + +// Now write your own player class +// This class requires an update(), render() and +// a handleInput() method. + +var Player = function(posX, posY) { + this.posX = posX; + this.posY = posY; + this.stat = 0; + this.step = 75; + + this.width = playerStat.width; + this.height = playerStat.height; + + this.sprite = 'images/char-boy.png'; +} + + +Player.prototype.update = function() { + this.win(); +} + +Player.prototype.win = function() { + if (field.min >= this.posY) { + console.log(field.min, this.posY); + this.stat += 1; + newP.textContent = `Your score: ${this.stat}`; + this.goToStartPosition(); + } +} + +Player.prototype.goToStartPosition = function() { + this.posX = playerStat.startPositionX; + this.posY = playerStat.startPositionY; +} + +Player.prototype.render = function() { + ctx.drawImage(Resources.get(this.sprite), this.posX, this.posY); +} +// Now instantiate your objects. +// Place all enemy objects in an array called allEnemies +// Place the player object in a variable called player + +Player.prototype.handleInput = function(key) { + switch(key) { + case 'up': + this.posY -= this.step; + break; + case 'down': + this.posY += this.step; + if (this.posY > field.borderY) { + this.posY = field.borderY; + } + break; + case 'left': + this.posX -= this.step; + if (this.posX < this.step) { + this.posX = this.step; + } + break; + case 'right': + this.posX += this.step; + if (this.posX > field.borderX) { + this.posX = field.borderX; + } + break; + } +} + +var player = new Player(playerStat.startPositionX, playerStat.startPositionY); + +// This listens for key presses and sends the keys to your +// Player.handleInput() method. You don't need to modify this. +document.addEventListener('keyup', function(e) { + var allowedKeys = { + 37: 'left', + 38: 'up', + 39: 'right', + 40: 'down' + }; + + player.handleInput(allowedKeys[e.keyCode]); +}); From 5cbaacf18a4d1925e06e4874057ea7cd44c68ac4 Mon Sep 17 00:00:00 2001 From: asa Date: Mon, 8 Aug 2022 17:04:22 +0300 Subject: [PATCH 2/5] added memoryPairGame --- .../asaMitaka/Memory pair game/index.html | 18 +++ .../asaMitaka/Memory pair game/script.js | 106 ++++++++++++++++++ .../asaMitaka/Memory pair game/style.css | 74 ++++++++++++ 3 files changed, 198 insertions(+) create mode 100644 submissions/asaMitaka/Memory pair game/index.html create mode 100644 submissions/asaMitaka/Memory pair game/script.js create mode 100644 submissions/asaMitaka/Memory pair game/style.css diff --git a/submissions/asaMitaka/Memory pair game/index.html b/submissions/asaMitaka/Memory pair game/index.html new file mode 100644 index 0000000000..0c0566fe70 --- /dev/null +++ b/submissions/asaMitaka/Memory pair game/index.html @@ -0,0 +1,18 @@ + + + + + + + Document + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/submissions/asaMitaka/Memory pair game/script.js b/submissions/asaMitaka/Memory pair game/script.js new file mode 100644 index 0000000000..798ab5f15c --- /dev/null +++ b/submissions/asaMitaka/Memory pair game/script.js @@ -0,0 +1,106 @@ +let content = document.querySelector('.content'); +const backImg = 'https://i.pinimg.com/originals/13/25/05/132505ba3238e79c00034c905b2ca045.jpg'; + +// creating obj/ class +class Card { + constructor(img, name, id, style) { + this.img = img; + this.name = name; + this.id = id; + this.backgroundImg = backImg; + this.style = style; + } +} + +let card1 = new Card('https://static3.depositphotos.com/1005348/211/i/450/depositphotos_2114992-stock-photo-aqua-digit-1.jpg', 'one', 1, 'cardItem'); +let card2 = new Card('https://a4files.ru/content/uploads/2017/07/cifra-2.jpg', 'two', 2, 'cardItem'); +let card3 = new Card('https://img.freepik.com/premium-vector/the-number-3-the-numbers-are-rosy-in-the-form-of-a-popular-childrens-game-pop-it-bright-letters-on-a-white-background-bright-numbers-on-a-white-background_422344-743.jpg', 'three', 3, 'cardItem'); +let card4 = new Card('https://i.pinimg.com/originals/0d/e3/c3/0de3c3c562fdcf1d86c4dbd2beb647ff.jpg', 'four', 4, 'cardItem'); +let card5 = new Card('https://klike.net/uploads/posts/2020-06/1593148473_1.jpg', 'five', 5, 'cardItem'); +let card6 = new Card('https://klike.net/uploads/posts/2020-06/1593149252_3.jpg', 'six', 6, 'cardItem'); +let card7 = new Card('https://klike.net/uploads/posts/2020-06/1593149764_2.jpg', 'seven', 7, 'cardItem'); +let card8 = new Card('https://static3.depositphotos.com/1000695/119/i/450/depositphotos_1190337-stock-photo-figure-eight.jpg', 'eight', 8, 'cardItem'); + +//arr of obj/ classes +let arrOfCards = [card1, card2, card3, card4, card5, card6, card7, card8]; +let shuffledArr = shuffleArr([...arrOfCards, ...arrOfCards]); + +// shuffled array add, all elements from arr rendered and added to page +shuffledArr.forEach((el) => { + content.innerHTML += renderItem(el); +}); + +// get all cardItems from page and give them addEventListeners; +let cardItems = document.querySelectorAll('.cardItem'); +cardItems.forEach(el => el.addEventListener('click', clickedItem)); + +// shuffling array; +function shuffleArr(array) { + for (let i = array.length - 1; i > 0; i--) { + let j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + + return array; +} + +// rendering one item +function renderItem(item) { + return ` +
+ + +
+ `; +} + +let previousClicked = undefined; +let currentClicked = undefined; +let flipped = 0; +let lockBoard = false; + +// Clicked item change img +function clickedItem(event) { + if (this === previousClicked) return; + if (lockBoard) return; + if (!event.target.classList.contains('cardItem__front')) return; + + event.target.parentElement.classList.add('flip'); + + if (previousClicked === undefined) { + previousClicked = event.target.parentElement; + } else { + currentClicked = event.target.parentElement; + sameEvents(previousClicked, currentClicked); + previousClicked = undefined; + } +} + +// checking if that items same, if same hiding, else removing flip class +function sameEvents(previosEvent, currentEvent) { + lockBoard = true; + if (previosEvent.dataset.attribute === currentEvent.dataset.attribute) { + previosEvent.classList.add('hide'); + currentEvent.classList.add('hide'); + resetBoardItem(); + flipped += 2; + + if (flipped === shuffledArr.length) { + alert('YOU WIN!'); + window.location.reload(); + } + } else { + setTimeout(() => { + previosEvent.classList.remove('flip'); + currentEvent.classList.remove('flip'); + resetBoardItem(); + }, 1000); + } +} + +// Reseting items +function resetBoardItem() { + previousClicked = undefined; + currentClicked = undefined; + lockBoard = false; +} diff --git a/submissions/asaMitaka/Memory pair game/style.css b/submissions/asaMitaka/Memory pair game/style.css new file mode 100644 index 0000000000..19fa6c07eb --- /dev/null +++ b/submissions/asaMitaka/Memory pair game/style.css @@ -0,0 +1,74 @@ +*{ + margin: 0; + padding: 0; +} + +main { + display: flex; + justify-content: center; + height: 100vh; +} + +.content { + display: flex; + justify-content: center; + width: 800px; + background-color: beige; + flex-direction: row; + flex-wrap: wrap; +} + +.content>* { + align-self: center; + flex: 0 0 150px; +} + +.cardItem { + width: 100px; + height: 175px; + border: 1px solid black; + background-color: aquamarine; + margin: 20px; + position: relative; + perspective: 1000px; +} + +.cardItem img { + width: 100%; + height: 100%; +} + + + +.hide { + opacity: 0; +} + + + +.cardItem__back, .cardItem__front { + backface-visibility: hidden; + + position: absolute; + top: 0; + left: 0; +} + +.cardItem__front { + z-index: 2; + /* for firefox 31 */ + transform: rotateY(0deg); +} + +/* back, initially hidden pane */ +.cardItem__back { + transform: rotateY(180deg); +} + +.flip { + transition: 0.6s; + transform-style: preserve-3d; + transform: rotateY(180deg); + + position: relative; +} \ No newline at end of file From 361dec2a3237b474ffed70fee4cbd38ad991a26f Mon Sep 17 00:00:00 2001 From: AsaMitaka Date: Sat, 13 Aug 2022 14:51:25 +0300 Subject: [PATCH 3/5] deleted Class, deleted parentElement search, add event.target.closest(), deleted this, deleted all comments in code, renamed function sameEvents to sameItems, add new line at the end of html file --- .../asaMitaka/Memory pair game/index.html | 2 +- .../asaMitaka/Memory pair game/script.js | 81 +++++---- .../asaMitaka/Memory pair game/style.css | 10 +- .../asaMitaka/Object oriented JS/app.js | 169 ------------------ 4 files changed, 46 insertions(+), 216 deletions(-) delete mode 100644 submissions/asaMitaka/Object oriented JS/app.js diff --git a/submissions/asaMitaka/Memory pair game/index.html b/submissions/asaMitaka/Memory pair game/index.html index 0c0566fe70..2f5ed614e3 100644 --- a/submissions/asaMitaka/Memory pair game/index.html +++ b/submissions/asaMitaka/Memory pair game/index.html @@ -15,4 +15,4 @@ - \ No newline at end of file + diff --git a/submissions/asaMitaka/Memory pair game/script.js b/submissions/asaMitaka/Memory pair game/script.js index 798ab5f15c..ba0a69288f 100644 --- a/submissions/asaMitaka/Memory pair game/script.js +++ b/submissions/asaMitaka/Memory pair game/script.js @@ -1,40 +1,50 @@ let content = document.querySelector('.content'); const backImg = 'https://i.pinimg.com/originals/13/25/05/132505ba3238e79c00034c905b2ca045.jpg'; -// creating obj/ class -class Card { - constructor(img, name, id, style) { - this.img = img; - this.name = name; - this.id = id; - this.backgroundImg = backImg; - this.style = style; - } -} - -let card1 = new Card('https://static3.depositphotos.com/1005348/211/i/450/depositphotos_2114992-stock-photo-aqua-digit-1.jpg', 'one', 1, 'cardItem'); -let card2 = new Card('https://a4files.ru/content/uploads/2017/07/cifra-2.jpg', 'two', 2, 'cardItem'); -let card3 = new Card('https://img.freepik.com/premium-vector/the-number-3-the-numbers-are-rosy-in-the-form-of-a-popular-childrens-game-pop-it-bright-letters-on-a-white-background-bright-numbers-on-a-white-background_422344-743.jpg', 'three', 3, 'cardItem'); -let card4 = new Card('https://i.pinimg.com/originals/0d/e3/c3/0de3c3c562fdcf1d86c4dbd2beb647ff.jpg', 'four', 4, 'cardItem'); -let card5 = new Card('https://klike.net/uploads/posts/2020-06/1593148473_1.jpg', 'five', 5, 'cardItem'); -let card6 = new Card('https://klike.net/uploads/posts/2020-06/1593149252_3.jpg', 'six', 6, 'cardItem'); -let card7 = new Card('https://klike.net/uploads/posts/2020-06/1593149764_2.jpg', 'seven', 7, 'cardItem'); -let card8 = new Card('https://static3.depositphotos.com/1000695/119/i/450/depositphotos_1190337-stock-photo-figure-eight.jpg', 'eight', 8, 'cardItem'); +let arrOfCards = [ + { + img: 'https://static3.depositphotos.com/1005348/211/i/450/depositphotos_2114992-stock-photo-aqua-digit-1.jpg', + id: 1 + }, + { + img: 'https://a4files.ru/content/uploads/2017/07/cifra-2.jpg', + id: 2 + }, + { + img: 'https://img.freepik.com/premium-vector/the-number-3-the-numbers-are-rosy-in-the-form-of-a-popular-childrens-game-pop-it-bright-letters-on-a-white-background-bright-numbers-on-a-white-background_422344-743.jpg', + id: 3 + }, + { + img: 'https://i.pinimg.com/originals/0d/e3/c3/0de3c3c562fdcf1d86c4dbd2beb647ff.jpg', + id: 4, + }, + { + img: 'https://klike.net/uploads/posts/2020-06/1593148473_1.jpg', + id: 5, + }, + { + img: 'https://klike.net/uploads/posts/2020-06/1593149252_3.jpg', + id: 6, + }, + { + img: 'https://klike.net/uploads/posts/2020-06/1593149764_2.jpg', + id: 7, + }, + { + img: 'https://static3.depositphotos.com/1000695/119/i/450/depositphotos_1190337-stock-photo-figure-eight.jpg', + id: 8, + }, +]; -//arr of obj/ classes -let arrOfCards = [card1, card2, card3, card4, card5, card6, card7, card8]; let shuffledArr = shuffleArr([...arrOfCards, ...arrOfCards]); -// shuffled array add, all elements from arr rendered and added to page shuffledArr.forEach((el) => { content.innerHTML += renderItem(el); }); -// get all cardItems from page and give them addEventListeners; let cardItems = document.querySelectorAll('.cardItem'); cardItems.forEach(el => el.addEventListener('click', clickedItem)); -// shuffling array; function shuffleArr(array) { for (let i = array.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); @@ -44,12 +54,11 @@ function shuffleArr(array) { return array; } -// rendering one item function renderItem(item) { return ` -
- - +
+ +
`; } @@ -59,25 +68,24 @@ let currentClicked = undefined; let flipped = 0; let lockBoard = false; -// Clicked item change img function clickedItem(event) { - if (this === previousClicked) return; + if (event.target === previousClicked) return; if (lockBoard) return; if (!event.target.classList.contains('cardItem__front')) return; - event.target.parentElement.classList.add('flip'); + let parentElement = event.target.closest('.cardItem'); + parentElement.classList.add('flip'); if (previousClicked === undefined) { - previousClicked = event.target.parentElement; + previousClicked = parentElement; } else { - currentClicked = event.target.parentElement; - sameEvents(previousClicked, currentClicked); + currentClicked = parentElement; + sameItems(previousClicked, currentClicked); previousClicked = undefined; } } -// checking if that items same, if same hiding, else removing flip class -function sameEvents(previosEvent, currentEvent) { +function sameItems(previosEvent, currentEvent) { lockBoard = true; if (previosEvent.dataset.attribute === currentEvent.dataset.attribute) { previosEvent.classList.add('hide'); @@ -98,7 +106,6 @@ function sameEvents(previosEvent, currentEvent) { } } -// Reseting items function resetBoardItem() { previousClicked = undefined; currentClicked = undefined; diff --git a/submissions/asaMitaka/Memory pair game/style.css b/submissions/asaMitaka/Memory pair game/style.css index 19fa6c07eb..a14eac8932 100644 --- a/submissions/asaMitaka/Memory pair game/style.css +++ b/submissions/asaMitaka/Memory pair game/style.css @@ -38,17 +38,12 @@ main { height: 100%; } - - .hide { opacity: 0; } - - .cardItem__back, .cardItem__front { backface-visibility: hidden; - position: absolute; top: 0; left: 0; @@ -56,11 +51,9 @@ main { .cardItem__front { z-index: 2; - /* for firefox 31 */ transform: rotateY(0deg); } -/* back, initially hidden pane */ .cardItem__back { transform: rotateY(180deg); } @@ -69,6 +62,5 @@ main { transition: 0.6s; transform-style: preserve-3d; transform: rotateY(180deg); - position: relative; -} \ No newline at end of file +} diff --git a/submissions/asaMitaka/Object oriented JS/app.js b/submissions/asaMitaka/Object oriented JS/app.js deleted file mode 100644 index 37f119e206..0000000000 --- a/submissions/asaMitaka/Object oriented JS/app.js +++ /dev/null @@ -1,169 +0,0 @@ -// Enemies our player must avoid -var newP = document.createElement('p'); -newP.textContent = `Your score: 0 `; -document.body.append(newP); - -var enemyStat = { - width: 98, - height: 56, - sprite: "images/enemy-bug.png", -}; - -var field = { - min: -50, - borderX: 400, - borderY: 450, - waterCoord: 50, -} - -var playerStat = { - width: 80, - height: 80, - startPositionX: 200, - startPositionY: 400 -} - -var xColDistance = 80; -var yColDistance = 60; - -var Enemy = function(posX, posY, speed) { - // Variables applied to each of our instances go here, - // we've provided one for you to get started - this.posX = posX; - this.posY = posY; - this.speed = speed; - this.width = enemyStat.width; - this.height = enemyStat.height; - this.sprite = enemyStat.sprite; - // The image/sprite for our enemies, this uses - // a helper we've provided to easily load images -}; - -// Update the enemy's position, required method for game -// Parameter: dt, a time delta between ticks -Enemy.prototype.update = function(dt) { - this.posX += this.speed * dt; - if (this.posX > ctx.canvas.width) { - this.posX = -enemyStat.width; - } - // You should multiply any movement by the dt parameter - // which will ensure the game runs at the same speed for - // all computers. - this.collision(); -}; - -Enemy.prototype.collision = function() { - if (player.posX < this.posX + xColDistance && player.posX + xColDistance > this.posX && player.posY < this.posY + yColDistance && yColDistance + player.posY > this.posY) { - player.goToStartPosition(); - } -} - -// Draw the enemy on the screen, required method for game -Enemy.prototype.render = function() { - ctx.drawImage(Resources.get(this.sprite), this.posX, this.posY); -}; - -var allEnemyVal = [ - { - x: -120, - y: 200, - speed: 60 - }, - { - x: -120, - y: 120, - speed: 120 - }, - { - x: -30, - y: 50, - speed: 300 - } -]; - -var allEnemies = allEnemyVal.map( - ({x, y, speed}) => new Enemy(x, y, speed) -) - -// Now write your own player class -// This class requires an update(), render() and -// a handleInput() method. - -var Player = function(posX, posY) { - this.posX = posX; - this.posY = posY; - this.stat = 0; - this.step = 75; - - this.width = playerStat.width; - this.height = playerStat.height; - - this.sprite = 'images/char-boy.png'; -} - - -Player.prototype.update = function() { - this.win(); -} - -Player.prototype.win = function() { - if (field.min >= this.posY) { - console.log(field.min, this.posY); - this.stat += 1; - newP.textContent = `Your score: ${this.stat}`; - this.goToStartPosition(); - } -} - -Player.prototype.goToStartPosition = function() { - this.posX = playerStat.startPositionX; - this.posY = playerStat.startPositionY; -} - -Player.prototype.render = function() { - ctx.drawImage(Resources.get(this.sprite), this.posX, this.posY); -} -// Now instantiate your objects. -// Place all enemy objects in an array called allEnemies -// Place the player object in a variable called player - -Player.prototype.handleInput = function(key) { - switch(key) { - case 'up': - this.posY -= this.step; - break; - case 'down': - this.posY += this.step; - if (this.posY > field.borderY) { - this.posY = field.borderY; - } - break; - case 'left': - this.posX -= this.step; - if (this.posX < this.step) { - this.posX = this.step; - } - break; - case 'right': - this.posX += this.step; - if (this.posX > field.borderX) { - this.posX = field.borderX; - } - break; - } -} - -var player = new Player(playerStat.startPositionX, playerStat.startPositionY); - -// This listens for key presses and sends the keys to your -// Player.handleInput() method. You don't need to modify this. -document.addEventListener('keyup', function(e) { - var allowedKeys = { - 37: 'left', - 38: 'up', - 39: 'right', - 40: 'down' - }; - - player.handleInput(allowedKeys[e.keyCode]); -}); From eb2a0f6811084fa9473821dccd5dba5c2670d3dd Mon Sep 17 00:00:00 2001 From: AsaMitaka Date: Mon, 15 Aug 2022 15:15:36 +0300 Subject: [PATCH 4/5] fixed data-attr name, fixed variable names, remove forEach to map --- .../asaMitaka/Memory pair game/script.js | 37 ++++++++----------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/submissions/asaMitaka/Memory pair game/script.js b/submissions/asaMitaka/Memory pair game/script.js index ba0a69288f..a4a4d760fe 100644 --- a/submissions/asaMitaka/Memory pair game/script.js +++ b/submissions/asaMitaka/Memory pair game/script.js @@ -1,7 +1,11 @@ let content = document.querySelector('.content'); const backImg = 'https://i.pinimg.com/originals/13/25/05/132505ba3238e79c00034c905b2ca045.jpg'; +let previousClicked = undefined; +let currentClicked = undefined; +let flipped = 0; +let isBoardLocked = false; -let arrOfCards = [ +let cardsList = [ { img: 'https://static3.depositphotos.com/1005348/211/i/450/depositphotos_2114992-stock-photo-aqua-digit-1.jpg', id: 1 @@ -36,14 +40,10 @@ let arrOfCards = [ }, ]; -let shuffledArr = shuffleArr([...arrOfCards, ...arrOfCards]); - -shuffledArr.forEach((el) => { - content.innerHTML += renderItem(el); -}); +let shuffledCardList = shuffleArr([...cardsList, ...cardsList]).map((el) => content.innerHTML += renderItem(el)); let cardItems = document.querySelectorAll('.cardItem'); -cardItems.forEach(el => el.addEventListener('click', clickedItem)); +cardItems.forEach(el => el.addEventListener('click', clickItem)); function shuffleArr(array) { for (let i = array.length - 1; i > 0; i--) { @@ -56,27 +56,20 @@ function shuffleArr(array) { function renderItem(item) { return ` -
+
`; } -let previousClicked = undefined; -let currentClicked = undefined; -let flipped = 0; -let lockBoard = false; - -function clickedItem(event) { - if (event.target === previousClicked) return; - if (lockBoard) return; - if (!event.target.classList.contains('cardItem__front')) return; +function clickItem(event) { + if (isBoardLocked || event.target === previousClicked || !event.target.classList.contains('cardItem__front')) return; let parentElement = event.target.closest('.cardItem'); parentElement.classList.add('flip'); - if (previousClicked === undefined) { + if (!previousClicked) { previousClicked = parentElement; } else { currentClicked = parentElement; @@ -86,14 +79,14 @@ function clickedItem(event) { } function sameItems(previosEvent, currentEvent) { - lockBoard = true; - if (previosEvent.dataset.attribute === currentEvent.dataset.attribute) { + isBoardLocked = true; + if (previosEvent.dataset.card_id === currentEvent.dataset.card_id) { previosEvent.classList.add('hide'); currentEvent.classList.add('hide'); resetBoardItem(); flipped += 2; - if (flipped === shuffledArr.length) { + if (flipped === shuffledCardList.length) { alert('YOU WIN!'); window.location.reload(); } @@ -109,5 +102,5 @@ function sameItems(previosEvent, currentEvent) { function resetBoardItem() { previousClicked = undefined; currentClicked = undefined; - lockBoard = false; + isBoardLocked = false; } From bb1a4b3ca85831cbc65f0c066c368dac105e2e57 Mon Sep 17 00:00:00 2001 From: AsaMitaka Date: Tue, 16 Aug 2022 16:56:15 +0300 Subject: [PATCH 5/5] add function renderAllItem --- submissions/asaMitaka/Memory pair game/script.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/submissions/asaMitaka/Memory pair game/script.js b/submissions/asaMitaka/Memory pair game/script.js index a4a4d760fe..82d8900877 100644 --- a/submissions/asaMitaka/Memory pair game/script.js +++ b/submissions/asaMitaka/Memory pair game/script.js @@ -40,7 +40,15 @@ let cardsList = [ }, ]; -let shuffledCardList = shuffleArr([...cardsList, ...cardsList]).map((el) => content.innerHTML += renderItem(el)); +let shuffledCardList = shuffleArr([...cardsList, ...cardsList]); +function renderAllItem() { + let accumulator = ''; + shuffledCardList.forEach(el => accumulator += renderItem(el)); + + content.innerHTML = accumulator; +} +renderAllItem(); + let cardItems = document.querySelectorAll('.cardItem'); cardItems.forEach(el => el.addEventListener('click', clickItem));