Merge https://github.com/DrDr3ck/DrDr3ck.github.io

MatchingCard/sketch.js

@@ -0,0 +1,174 @@
+class AudioController {
+    constructor() {
+        this.bgMusic = new Audio('Assets/Audio/creepy.mp3');
+        this.flipSound = new Audio('Assets/Audio/flip.wav');
+        this.matchSound = new Audio('Assets/Audio/match.wav');
+        this.victorySound = new Audio('Assets/Audio/victory.wav');
+        this.gameOverSound = new Audio('Assets/Audio/gameover.wav');
+        this.bgMusic.volume = 0.3;
+        this.bgMusic.loop = true;
+    }
+
+    startMusic() {
+        this.bgMusic.play();
+    }
+    stopMusic() {
+        this.bgMusic.pause();
+        this.bgMusic.currentTime = 0;
+    }
+    flip() {
+        this.flipSound.play();
+    }
+    match() {
+        this.matchSound.play();
+    }
+    victory() {
+        this.stopMusic();
+        this.victorySound.play();
+    }
+    gameOver() {
+        this.stopMusic();
+        this.gameOverSound.play();
+    }
+}
+
+class MixOrMatch {
+    constructor(totalTime, cards) {
+        this.cards = cards;
+        this.totalTime = totalTime;
+
+        this.timer = document.getElementById("time-remaining");
+        this.flips = document.getElementById("flips");
+
+        this.audio = new AudioController();
+    }
+
+    startGame() {
+        this.cardToCheck = null;
+        this.totalFlips = 0;
+        this.timeRemaining = this.totalTime;
+        this.matchedCards = [];
+        this.busy = true;
+
+        setTimeout(()=>{
+            this.audio.startMusic();
+            this.shuffleCards();
+            this.countDown = this.startCountDown();
+            this.busy = false;
+        }, 500);
+        this.hideCards();
+        this.timer.innerText = this.timeRemaining;
+        this.flips.innerText = this.totalFlips;
+    }
+
+    hideCards() {
+        this.cards.forEach(card=>{
+            card.classList.remove('visible');
+            card.classList.remove('matched');
+        });
+    }
+
+    startCountDown() {
+        return setInterval(()=>{
+            console.log("startCountDown: "+this.timeRemaining);
+            this.timeRemaining--;
+            this.timer.innerText = this.timeRemaining;
+            if( this.timeRemaining === 0 ) {
+                this.gameOver();
+            }
+        }, 1000);
+    }
+
+    canFlipCard(card) {
+        return !this.busy && !this.matchedCards.includes(card) && card !== this.cardToCheck;
+    }
+
+    flipCard(card) {
+        if( !this.canFlipCard(card) ) {
+            return;
+        }
+        this.audio.flip();
+        this.totalFlips++;
+        this.flips.innerText = this.totalFlips;
+        card.classList.add('visible');
+
+        if( this.cardToCheck ) { // not null
+            this.checkForCardMatch(card);
+        } else {
+            this.cardToCheck = card;
+        }
+    }
+
+    checkForCardMatch(card) {
+        const card2 = this.cardToCheck;
+        if( this.getCardValue(card2) === this.getCardValue(card) ) {
+            this.matchedCards.push(card);
+            this.matchedCards.push(card2);
+            card.classList.add('matched');
+            card2.classList.add('matched');
+            this.audio.match();
+            if( this.matchedCards.length == this.cards.length ) {
+                this.victory();
+            }
+        } else {
+            this.busy = true;
+            setTimeout(()=>{
+                card.classList.remove('visible');
+                card2.classList.remove('visible');
+                this.busy = false;
+            },1000);
+        }
+        this.cardToCheck = null;
+    }
+
+    getCardValue(card) {
+        return card.getElementsByClassName('card-value')[0].src;
+    }
+
+    gameOver() {
+        clearInterval(this.countDown);
+        this.audio.gameOver();
+        document.getElementById('game-over-text').classList.add('visible');
+        this.totalTime += 10;
+    }
+
+    victory() {
+        clearInterval(this.countDown);
+        this.audio.victory();
+        document.getElementById('victory-text').classList.add('visible');
+        this.totalTime -= 10;
+    }
+
+    shuffleCards() {
+        for( let i = this.cards.length-1; i >= 1; i-- ) {
+            const j = Math.floor(Math.random()*(i+1));
+            this.cards[j].style.order = i;
+            this.cards[i].style.order = j;
+        }
+    }
+}
+
+function ready() {
+    let overlays = Array.from(document.getElementsByClassName('overlay-text'));
+    let cards = Array.from(document.getElementsByClassName('card'));
+    let game = new MixOrMatch(100, cards);
+
+    overlays.forEach(overlay => {
+        overlay.addEventListener('click', () => {
+            overlay.classList.remove('visible');
+            game.startGame();
+        });
+    });
+
+    cards.forEach(card => {
+        card.addEventListener('click', () => {
+            game.flipCard(card);
+        });
+    });
+}
+
+if( document.readyState === 'loading' ) {
+    document.addEventListener('DOMContentLoaded', ready());
+} else {
+    ready();
+}

MatchingCard/style.css

@@ -0,0 +1,210 @@
+@font-face {
+    font-family: "Creepy";
+    src: url("Assets/Fonts/Creepy.woff") format("woff"),
+         url("Assets/Fonts/Creepy.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Lunacy";
+    src: url("Assets/Fonts/Lunacy.woff") format("woff"),
+         url("Assets/Fonts/Lunacy.woff2") format("woff2");
+}
+
+* {
+    box-sizing: boder-box;
+}
+
+html {
+    min-height: 100vh;
+}
+
+body {
+    margin: 0;
+    background: radial-gradient(#9D5900, #3D2200);
+}
+
+.page-title {
+    color: #FF6D00;
+    font-family: Creepy, serif;
+    font-weight: normal;
+    text-align: center;
+    font-size: 6em;
+}
+
+.game-info-container {
+    grid-column: 1 / -1;
+    display: flex;
+    justify-content: space-between;
+}
+
+.game-info {
+    color: #FFBB89;
+    font-family: Lunacy, serif;
+    font-size: 4em;
+}
+
+.game-container {
+    display: grid;
+    grid-template-columns: repeat(4, auto);
+    grid-gap: 10px;
+    margin: 50px;
+    justify-content: center;
+    perspective: 500px;
+}
+
+.overlay-text {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    color: #FF6D00;
+    font-family: Creepy, serif;
+    font-size: 
+}
+
+.overlay-text-small {
+    font-size: .3em;
+}
+
+.overlay-text.visible {
+    display: flex;
+    flex-direction: column;
+    animation: overlay-grow 500ms forwards;
+}
+
+@keyframes overlay-grow {
+    from {
+        background-color: rgba(0,0,0,0);
+        font-size: 0;
+    }
+    to {
+        background-color: rgba(0,0,0,.8);
+        font-size: 10em;
+    }
+}
+
+.card {
+    position: relative;
+    height: 175px;
+    width: 125px;
+}
+
+.card.visible .card-back {
+    transform: rotateY(-180deg);
+}
+
+.card.visible .card-front {
+    transform: rotateY(0deg);
+}
+
+.card-face {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    backface-visibility: hidden;
+    border-radius: 12px;
+    border-width: 1px;
+    border-style: solid;
+    transition: transform 500ms ease-in-out;
+}
+
+.card-back {
+    background-color: black;
+    border-color: #FF6D00;
+}
+
+.card-front {
+    background-color: #FFBB89;
+    border-color: #333333;
+    transform: rotateY(180deg);
+}
+
+.card-value {
+    transition: transform 100ms ease-in-out;
+    transform: scale(0.9);
+}
+
+.card-front:hover .card-value {
+    transform: scale(1);
+}
+
+.cob-web {
+    position: absolute;
+    width: 47px;
+    height: 47px;
+    transition: width 100ms ease-in-out, height 100ms ease-in-out;
+}
+
+.card-face:hover .cob-web {
+    width: 52px;
+    height: 52px;
+}
+
+.card-matched .card-value {
+    animation: dance 1s linear infinite 500ms;
+}
+
+@keyframes dance {
+    0%, 100% {
+        transform: rotate(0);
+    }
+    25% {
+        transform: rotate(-30deg);
+    }
+    75% {
+        transform: rotate(30deg);
+    }
+}
+
+.cob-web-top-left {
+    transform: rotate(270deg);
+    top: 0;
+    left: 0;
+}
+
+.cob-web-top-right {
+    top: 0;
+    right: 0;
+}
+
+.cob-web-bottom-left {
+    transform: rotate(180deg);
+    bottom: 0;
+    left: 0;
+}
+
+.cob-web-bottom-right {
+    transform: rotate(90deg);
+    bottom: 0;
+    right: 0;
+}
+
+.spider {
+    align-self: flex-start;
+    transform: translateY(-10px);
+    transition: transform 100ms ease-in-out;
+}
+
+.card-back:hover .spider {
+    transform: translateY(0);
+}
+
+@media (max-width: 600px) {
+    .game-container {
+        grid-template-columns: repeat(2, auto);
+    }
+
+    .game-info-container {
+        flex-direction: column;
+        align-items: center;
+    }
+}

index.md

@@ -15,6 +15,8 @@
     <a href="./Pluie/">Pluie</a>
     <br>
     <a href="./Serpent/">Serpent</a> -->
+    <a href="./MatchingCard">Matching Cards</a>
+    <br>
     <a href="./MineSweeper">Mine sweeper</a>
     <br>
     <a href="./Tetris">Tetris</a>