Simon Game

#100DaysOfCode

CodePen

    <div class="control-wrapper">
        <button type="button" class="btn btn-primary" onClick="changeRegjme('Normal')">Normal regjme</button>
        <button type="button" class="btn btn-danger" onClick="changeRegjme('Hard')">Hard Regjme</button>
        <button type="button" class="btn btn-success" onClick="init()">Start New Game</button>
    </div>

    <div class="simon-wrapper">
        <div class="simon-info">
            <h2>Simon</h2>
            <span class="info">Count: </span><span id="count">0</span>
            <span class="info">Regjme: </span><span id="regjme">Normal</span>
            <span class="info" id="note">Click to play!</span>
        </div>
        <div id="btn0" class="btn-game top left green" onClick="clickBtn(0)"></div>
        <div id="btn1" class="btn-game top right red" onClick="clickBtn(1)"></div>
        <div id="btn2" class="btn-game bottom left yellow" onClick="clickBtn(2)"></div>
        <div id="btn3" class="btn-game bottom right blue" onClick="clickBtn(3)"></div>
    </div>

body {
    background-color: #EBEBEB;
}

.control-wrapper {
    margin: 0 auto;
    justify-content: center;
    text-align: center;
}

.simon-wrapper {
    background-color: #D6D6D6;
    border: 5px solid black;
    border-radius: 50%;
    height: 300px;
    margin: 0 auto;
    margin-top: 10%;
    overflow: hidden;
    position: relative;
    width: 300px;
}

.simon-info {
    background-color: #222;
    border-radius: 50%;
    color: white;
    height: 180px;
    margin-top: 53px;
    margin-left: 57px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 180px;
}
.simon-info h2 {
    font-size: 28px;
    font-weight: bold;
    margin-top: 20%;
    text-align: center;
    
}
.simon-info span {
    display: inline-block;
    font-weight: bold;
    text-align: center;
}
.simon-info span.info {
    margin-left: 30%;
}

.btn-game {
    float: left;
    height: 50%;
    overflow: hidden;
    width: 50%;
}
.btn-game.top {
    border-bottom: 3px solid black;
}
.btn-game.bottom {
    border-top: 3px solid black;
}

.btn-game.right {
    border-left: 3px solid black;
}

.btn-game.left {
    border-right: 3px solid black;
}

.btn-game.green {
    background-color: rgba(0, 213,29, 0.9);
}

.btn-game.red {
    background-color: rgba(213, 40, 17, 0.9);
}

.btn-game.yellow {
    background-color: rgba(255, 255, 0, 0.9);
}
.btn-game.blue {
    background-color: rgba(9, 74, 143, 0.9);
}

.btn-press {
    background-color: rgba(255,255,255,1) !important;
}

var playControl = {
    count: 0,
    regjme: "Normal",
    speed: 1200,
    wait: false

};

var model = [],
    currModel = [],
    userModel = [];

function init() {
    playControl.wait = false;
    model = [];
    userModel = [];
    playControl.count = 0;
    $('#count').text('0');
    $('#note').text("New game!");
    $('#regjme').text(playControl.regjme);

    createModel();
    showModel();
}


function color() {
    return Math.floor(Math.random() * (3 - 0 + 1) + 0);
}


function createModel() {
    model = [];
    for (var i = 20; i > 0; i--) {
        model.push(color());
    }
    return model;
}


function showModel() {
    var i = 0;
    playControl.wait = false;
    var modelLoop = setInterval(function () {
        fireBtn(model[i]);
        i++;
        if (i >= playControl.count + 1) {
            clearInterval(modelLoop);
            currModel = model.slice(0, playControl.count + 1);
            userModel = [];
            playControl.wait = true;
        }
    }, playControl.speed - playControl.count * 15);
}


function fireBtn(bNum) {
    var sound = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound' + (bNum + 1) + '.mp3');
    $('#btn' + bNum).addClass('btn-press');

    setTimeout(function () {
        $('#btn' + bNum).removeClass('btn-press');
    }, 300);


    sound.play();
}


function changeRegjme(regjme) {
    playControl.regjme = regjme;
    $('#regjme').text(playControl.regjme);
}


function testModel() {
    for (var i = 0; i < userModel.length; i++) {
 
        if (userModel[i] != currModel[i]) {
            $('#note').text("Wrong!!");
            playControl.wait = false;
            if (playControl.regjme == "Normal") {
                return showModel();
            } else {
                init();
            }
        }
    }

    if (userModel.length === currModel.length) {
        $('#note').text("Correct!!");
        playControl.wait = false;
        userModel = [];
        playControl.count++;
        updateCount();
        return showModel();
    }
}


function updateCount() {
    $('#count').text(playControl.count);
}

function checkWin() {
    if (playControl.count >= 21) {
        $('#note').text("You won!! Prepare for the next round!");
        setInterval(function () {
            playControl.speed = 1000;
            init();
        }, 5000)
    }
}


function clickBtn(bNum) {
    if (playControl.wait === true) {
        fireBtn(bNum);
        userModel.push(bNum);
        testModel();
    }
}

See the Pen Simon Game by YaroslavW (@YaroslavW) on CodePen.