kottans · zonzujiro · Aug 17, 2022 · Aug 8, 2022 · Aug 8, 2022 · Aug 13, 2022
diff --git a/submissions/asaMitaka/Memory pair game/index.html b/submissions/asaMitaka/Memory pair game/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <main>
+        <div class="content"></div>
+    </main>
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/submissions/asaMitaka/Memory pair game/script.js 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 `
+        <div class='${item.style}' data-attribute='${item.id}'>
+            <img class='${item.style}__front' src='${item.backgroundImg}'/>
+            <img class='${item.style}__back' src='${item.img}'/>
+        </div>
+    `;
+}
+
+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
@@ -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;
+}
diff --git a/submissions/asaMitaka/Object oriented JS/app.js 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]);
+});