Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
</body>
</html>
 
​
class Game {
​
    constructor(name) {
​
        this.name = name;
        this.arr = [];
        this.det = 0;
        this.GameOverCount = 0;
        this.skirtCount = 1;
        this.difficultCount = 3;
        this.cardcount = 15;
​
    }
​
    init() {
​
        this.initTopField();
​
        this.initField();
​
    }
​
    initTopField(){
        this.TopField = document.createElement('header');
        document.body.appendChild(this.TopField);
​
        this.CardsShirt = document.createElement('button');
        this.CardsShirt.innerHTML = 'Skirt Card';
        this.CardsShirt.style.cssText = "background-color: #2aae63;\
                                         border-radius: 5px;\
                                         padding: 5px;\
                                         margin: 10px;";
        this.TopField.appendChild(this.CardsShirt);
        this.CardsShirt.addEventListener('click', () => {
            this.AsideCardSkirt.style.visibility = 'visible';
        });
​
        this.Difficulty = document.createElement('button');
        this.Difficulty.innerHTML = 'Difficulty';
        this.Difficulty.style.cssText = "background-color: #2aae63;\
                                         border-radius: 5px;\
                                         padding: 5px;\
                                         margin: 10px;";
        this.TopField.appendChild(this.Difficulty);
        this.Difficulty.addEventListener('click', () => {
            this.AsideDifficult.style.visibility = 'visible';
​
        });
​
        this.NewGame = document.createElement('button');
        this.NewGame.innerHTML = 'New Game';
        this.NewGame.style.cssText = "position: relative;\
                                      left: 70%;\
                                      background-color: #2aae63;\
                                      border-radius: 5px;\
                                      padding: 5px;\
                                      margin: 10px;";
        this.NewGame.addEventListener('click', function () {
            document.body.lastElementChild.remove();
        });
        this.NewGame.addEventListener('click', this.initField);
        this.TopField.appendChild(this.NewGame);
​
​
    }
​
    initField(){
​
        this.Field = document.createElement('section');
        this.Field.style.cssText = "height: 500px;\
                                    font-size: 20px;\
                                    text-align: center;\
                                    background-image: url(Img/123.jpg);";
        document.body.appendChild(this.Field);
​
        document.body.style.cssText = "background-color: orange;";
​
        this.RuleField = document.createElement('div');
​
        let firstelem = document.createElement('span');
        firstelem.innerHTML = 'Rule of the Game';
        firstelem.style.cssText = "color: blue;\
                                   font-size: 40px;";
        this.RuleField.appendChild(firstelem);
​
        let secelem = document.createElement('p');
        secelem.innerHTML = 'Push on the cards, remember them and find pair of pictures.<br>' +
            'And don\'t forget choose card shirt and dificulty.<br>' +
            'Good luck.<br>';
        secelem.style.fontSize = '17px';
        this.RuleField.appendChild(secelem);
​
        let thirdelem = document.createElement('button');
        thirdelem.innerHTML = 'Start Game';
        thirdelem.style.cssText = "margin-top: 15px;\
                                   border-radius: 5px;\
                                   padding: 5px;\
                                   background-color: #2aae63;";
        this.RuleField.appendChild(thirdelem);
        thirdelem.addEventListener('click', () => this.CardLogi());
        
        this.RuleField.style.cssText = "position: relative;\
                                        top: 100px;\
                                        font-size: 17px;\
                                        border-radius: 15px;\
                                        background-color: red;\
                                        display: inline-block;\
                                        padding: 30px;\
                                        background-image: url(Img/123.jpg);";
        this.Field.appendChild(this.RuleField);
​
        this.AsideDifficult = document.createElement('aside');
        this.AsideDifficult.innerHTML = 'Choose difficulty <br>';
        this.AsideDifficult.style.cssText = "width: 200px;\
                                        font-size: 20px;\
                                        border-radius: 15px;\
                                        margin: 5px;\
                                        position: relative;\
                                        bottom: 250px;\
                                        background-color: #2aae63;\
                                        color: black;\
                                        visibility: hidden;";
        this.Field.appendChild(this.AsideDifficult);
​
        let buttomDifficultyOne = document.createElement('button');
        buttomDifficultyOne.innerHTML = 'Easy';
        buttomDifficultyOne.style.cssText = "font-size: 20px;\
                                             margin: 2px 20%;\
                                             background-color: red;";
        this.AsideDifficult.appendChild(buttomDifficultyOne);
        buttomDifficultyOne.addEventListener('click',  () => {
            this.difficultCount = 1;
        });
​
        let buttomDifficultyTwo = document.createElement('button');
        buttomDifficultyTwo.innerHTML = 'Medium';
        buttomDifficultyTwo.style.cssText = "font-size: 20px;\
                                             margin: 2px 20%;\
                                             background-color: red;";
        this.AsideDifficult.appendChild(buttomDifficultyTwo);
        buttomDifficultyTwo.addEventListener('click', () => {
            this.difficultCount = 2;
        });
​
        let buttomDifficultyThree = document.createElement('button');
        buttomDifficultyThree.innerHTML = 'Difficult';
        buttomDifficultyThree.style.cssText = "font-size: 20px;\
                                               margin: 2px 20%;\
                                               background-color: red;";
        this.AsideDifficult.appendChild(buttomDifficultyThree);
        buttomDifficultyThree.addEventListener('click', () => {
            this.difficultCount = 3;
        });
​
        this.AsideCardSkirt = document.createElement('aside');
        this.AsideCardSkirt.innerHTML = 'Choose card skirt <br>';
        this.AsideCardSkirt.style.cssText = "width: 200px;\
                                        font-size: 20px;\
                                        border-radius: 15px;\
                                        margin: 5px;\
                                        position: relative;\
                                        bottom: 250px;\
                                        color: black;\
                                        background-color: #2aae63;\
                                        visibility: hidden;";
        this.Field.appendChild(this.AsideCardSkirt);
​
        let buttomCardSkirtOne = document.createElement('button');
        buttomCardSkirtOne.innerHTML = '<img style="width: 100px; height: 100px" src="http://oboi.cc/400-400-100-uploads/new/big/oboik.ru_9704.jpg">';
        buttomCardSkirtOne.style.cssText = "padding: 0px;\
                                            margin: 2px 20%;";
        this.AsideCardSkirt.appendChild(buttomCardSkirtOne);
        buttomCardSkirtOne.addEventListener('click', () => {
            this.skirtCount = 1;
        });
​
        let buttomCardSkirtTwo = document.createElement('button');
        buttomCardSkirtTwo.innerHTML = '<img style="width: 100px; height: 100px" src="Img/Shrek/ShrekSkirt.jpg">';
        buttomCardSkirtTwo.style.cssText = "padding: 0px;\
                                            margin: 2px 20%;";
        this.AsideCardSkirt.appendChild(buttomCardSkirtTwo);
        buttomCardSkirtTwo.addEventListener('click', () => {
            this.skirtCount = 2;
        });
​
        let buttomCardSkirtThree = document.createElement('button');
        buttomCardSkirtThree.innerHTML = '<img style="width: 100px; height: 100px" src="Img/KungFuPanda/PandaSkirt.jpg">';
        buttomCardSkirtThree.style.cssText = "padding: 0px;\
                                              margin: 2px 20%;";
        this.AsideCardSkirt.appendChild(buttomCardSkirtThree);
        buttomCardSkirtThree.addEventListener('click', () => {
            this.skirtCount = 3;
        });
    }
​
    Compare(x, y) {
​
        for (let i = 0; i < this.cardcount + 1; i += 1) {
            if (y[i][2] == true) {
                this.arr.push(i);
                this.det += 1;
            }
        }
​
        if (this.det >= 2) {
​
            if (x[this.arr[1]].innerHTML != x[this.arr[2]].innerHTML) {
                x[this.arr[1]].firstElementChild.setAttribute('src', this.Skirt[this.arr[1]]);
                x[this.arr[2]].firstElementChild.setAttribute('src', this.Skirt[this.arr[2]]);
                y[this.arr[1]][2] = false;
                y[this.arr[2]][2] = false;
                this.det = 0;
                this.arr = [];
            }
        }
​
        if (this.det >= 2) {
​
            if (x[this.arr[1]].innerHTML == x[this.arr[2]].innerHTML) {
               this.DeleteCards(x, y)
            }
        }
    }
​
    DrawCard(){
​
        let x = arguments[0];
        if(this.difficultCount === 1) this.cardcount = 7;
        if(this.difficultCount === 2) this.cardcount = 11;
        if(this.difficultCount === 3) this.cardcount = 15;
​
        this.Field.innerHTML = null;
​
        if(this.cardcount == 7){
            this.Field.style.cssText = "height: 250px;\
                                        padding: 125px 0;\
                                        width: 500px;\
                                        position: relative;\
                                        left: 400px;\
                                        font-size: 20px;\
                                        text-align: center;\
                                        background-image: url(Img/123.jpg);";
        }
        if(this.cardcount == 11){
            this.Field.style.cssText = "height: 375px;\
                                        padding: 62.5px 0;\
                                        width: 500px;\
                                        position: relative;\
                                        left: 400px;\
                                        font-size: 20px;\
                                        text-align: center;\
                                        background-image: url(Img/123.jpg);";
​
        }
        if(this.cardcount == 15){
            this.Field.style.cssText = "height: 500px;\
                                        width: 500px;\
                                        position: relative;\
                                        left: 400px;\
                                        font-size: 20px;\
                                        text-align: center;\
                                        background-image: url(Img/123.jpg);";
        }
​
        let CardArray = [];
        for(let i = 0; i <= this.cardcount; i += 1){
            CardArray[i] = x[i][0];
​
            CardArray[i].addEventListener('click', (function (index) {
                return function() {
                CardArray[index].firstElementChild.style.width = '20px';
​
                CardArray[index].innerHTML = null;
                CardArray[index].innerHTML = x[index][1].innerHTML;
​
                CardArray[index].firstElementChild.style.width = '100px';
​
                x[index][2] = true;
                };
            })(i));
          
            CardArray[i].addEventListener('click', () => this.Compare(CardArray, x));
​
            CardArray[i].style.cssText = "width: 20%; \
                                          height: 20%; \
                                          display: inline-block;\
                                          margin: 2.5%;";
            this.Field.appendChild(CardArray[i]);
        }
    }
​
    ToMix(x){
​
        let input = arguments[0];
​
        for (let i = input.length-1; i >=0; i--) {
​
            let randomIndex = Math.floor(Math.random()*(i+1));
            let itemAtIndex = input[randomIndex];
​
            input[randomIndex] = input[i];
            input[i] = itemAtIndex;
​
        }
        return input;
​
    }
​
    CardLogi(){
​
        let PushCounter = false;
​
        const simpsons = [
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg',
            'https://i.ytimg.com/vi/7ZZcsGF1UgM/hqdefault.jpg'
        ];
        const simpsonsSkirt = 'http://oboi.cc/400-400-100-uploads/new/big/oboik.ru_9704.jpg';
        const simplosnSkirtLog = [];
        for(let i = 0; i <= this.cardcount; i += 1){
            simplosnSkirtLog.push(simpsonsSkirt);
        }
​
        const shrek = [
            'Img/Shrek/Cat.jpg',
            'Img/Shrek/Cat.jpg',
            'Img/Shrek/Donkey.jpg',
            'Img/Shrek/Donkey.jpg',
            'Img/Shrek/Dragon.jpg',
            'Img/Shrek/Dragon.jpg',
            'Img/Shrek/Fairy.jpg',
            'Img/Shrek/Fairy.jpg',
            'Img/Shrek/Phiona.jpg',
            'Img/Shrek/Phiona.jpg',
            'Img/Shrek/PhionaWomen.jpg',
            'Img/Shrek/PhionaWomen.jpg',
            'Img/Shrek/Prince.jpg',
            'Img/Shrek/Prince.jpg',
            'Img/Shrek/Shrek.jpg',
            'Img/Shrek/Shrek.jpg'
        ];
        const shrekSkirt = 'Img/Shrek/ShrekSkirt.jpg';
        const shrekSkirtLog = [];
        for(let i = 0; i <= this.cardcount; i += 1){
            shrekSkirtLog.push(shrekSkirt);
        }
​
        const KungFuPanda = [
            'Img/KungFuPanda/Crane.jpg',
            'Img/KungFuPanda/Crane.jpg',
            'Img/KungFuPanda/EvilTiger.jpg',
            'Img/KungFuPanda/EvilTiger.jpg',
            'Img/KungFuPanda/Father.jpg',
            'Img/KungFuPanda/Father.jpg',
            'Img/KungFuPanda/Monkey.jpg',
            'Img/KungFuPanda/Monkey.jpg',
            'Img/KungFuPanda/Panda.jpg',
            'Img/KungFuPanda/Panda.jpg',
            'Img/KungFuPanda/Snake.jpg',
            'Img/KungFuPanda/Snake.jpg',
            'Img/KungFuPanda/Team.jpg',
            'Img/KungFuPanda/Team.jpg',
            'Img/KungFuPanda/Tiger.jpg',
            'Img/KungFuPanda/Tiger.jpg'
        ];
        const KungFuPandaSkirt = 'Img/KungFuPanda/PandaSkirt.jpg';
        const KungFuPandaSkirtLog = [];
        for(let i = 0; i <= this.cardcount; i += 1){
            KungFuPandaSkirtLog.push(KungFuPandaSkirt);
        }
​
        this.Log;
        this.Skirt;
​
        if(this.skirtCount === 1){
            this.Log = simpsons;
            this.Skirt = simplosnSkirtLog;
        }
        if(this.skirtCount === 2){
            this.Log = shrek;
            this.Skirt = shrekSkirtLog;
        }
        if(this.skirtCount === 3){
            this.Log = KungFuPanda;
            this.Skirt = KungFuPandaSkirtLog;
        }
​
        if(this.difficultCount == 1) this.Log.length = 8;
        if(this.difficultCount == 2) this.Log.length = 12;
​
        this.ToMix(this.Log);
​
        this.RealLog = [];
​
        for(let i = 0; i <= this.cardcount; i += 1){
            this.RealLog.push([]);
        }
​
        for(let i = 0; i <= this.cardcount; i +=1){
            this.RealLog[i][0] = document.createElement('article');
            this.RealLog[i][0].innerHTML ='<img style="width: 100px; height: 100px">';
            this.RealLog[i][0].firstElementChild.setAttribute('src', this.Skirt[i]);
        }
​
        for(let i = 0; i <= this.cardcount; i += 1){
            this.RealLog[i][1] = document.createElement('article');
            this.RealLog[i][1].innerHTML = '<img style="width: 20px; height: 100px; transition: width 2s">';
            this.RealLog[i][1].firstElementChild.setAttribute('src', this.Log[i]);
        }
​
        for(let i = 0; i <= this.cardcount; i +=1){
            this.RealLog[i][2] = PushCounter;
        }
​
        this.DrawCard(this.RealLog);
​
    }
​
    DeleteCards(x, y){
​
        x[this.arr[1]].style.visibility = 'hidden';
        x[this.arr[2]].style.visibility = 'hidden';
        y[this.arr[1]][2] = false;
        y[this.arr[2]][2] = false;
        this.GameOverCount += 2;
        this.det = 0;
        this.arr = [];
​
    }
}
​
let MatchGame = new Game('Match-Match Game');
MatchGame.init();
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
tibmtpro
0viewers