7 Downloads
164 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>simon game</title>
  <link href="https://fonts.googleapis.com/css?family=Lato|Permanent+Marker|Kavivanar" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<body>
    <H1></H1>
    
    <div class="maincircle shadowbox">


        <a id="btn1" class="btn1 btn btnsize"> </a>
        <a id="btn2" class="btn2 btn btnsize"> </a>
        <a id="btn3" class="btn3 btn btnsize"> </a>
        <a id="btn4" class="btn4 btn btnsize"> </a>
        <div class="innercircle  ">

                        <div style="top: 5%; left: 12%;position: 
                        absolute; font-size: 32pt; font-weight: bolder" class="marcfont">SIMON</div>
            <div style="top: 38%; left: 5%;position: absolute;" >
    
                <div id ="disp" class="disp ">-88-</div>
                <div class="font">Count</div>
            </div>

            <div class="btnstart " style="top: 40%; left: 42%;">
                <a id="start" class="btn"></a>
                <div>Start</div>
            </div> 

            <div id="btnstrictcontrol"  class="btnstrictcontrol" style="top: 32%; right: 12%;"></div>
            <div class="btnstrict" style="top: 40%; right: 8%;">
               
              
                    <btn id="strict" class="btn"></btn>
                    <div>Strict</div>
                </div>
                <div style="bottom: 12%; left: 35%;position: absolute;">
<input id ="onoff" unchecked data-toggle="toggle" type="checkbox">
                </div> 
               
        </div>
    </div>



    <span class=" Monsieur_La_Doulaisefont" style="margin-left: 45%; font-size:35pt "> Simon game</span>




</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.4/bluebird.min.js'></script>
<script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/vanderdrilu/simon-game-vjMdMw */
.maincircle {
  width: 500px;
  height: 500px;
  border: 2px solid #212121;
  margin: 10% 20%;
  border-radius: 300px 300px 300px 300px;
  position: relative;
}

.innercircle {
  width: 50%;
  height: 50%;
  background-color: lavender;
  border: 15px solid #212121;
  border-radius: 200% 200% 200% 200%;
  position: absolute;
  left: 25%;
  top: 25%;
}

.pismo {
  color: ghostwhite;
  text-align: right;
  font-family: "Trebuchet MS", "Lucida Sans Unicode";
}

.btnred {
  background-color: brown;
}

body {
  background-image: url(http://4.bp.blogspot.com/_4MehpqzcQVE/TNN-7f_sTEI/AAAAAAAAAg4/PyreN9jFrdo/s1600/pipe+shelves8.jpg);
  background-repeat: no-repeat;
  background-position: 0px 0%;
}

.btn:focus,
.btn:hover,
.btn:visited {
  color: ghostwhite;
  text-decoration: none !important;
  /* outline: none !important;*/
}

.btnsize {
  width: 50.1%;
  height: 50.1%;
  border-radius: 100% 0 0 0;
  position: absolute;
  border: 20px solid;
  display: block;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes blick1 {
  50% {
    color: transparent;
  }
}
@keyframes blick1 {
  50% {
    color: transparent;
  }
}
.btn1 {
  background-color: #2f7421;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  left: 0%;
  top: 0%;
}

.btn2 {
  background-color: darkgoldenrod;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  left: 0%;
  bottom: 0%;
}

.btn3 {
  background-color: #0f0fd6;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  right: 0%;
  bottom: 0%;
}

.btn4 {
  background-color: red;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  top: 0%;
  right: 0%;
}

.btnstart {
  width: 30px;
  height: 30px;
  background-color: red;
  border: 4px solid;
  border-radius: 200px 200px 200px 200px;
  position: absolute;
  color: black;
  font-size: 12pt;
}

.btnstrict {
  width: 30px;
  height: 30px;
  background-color: yellow;
  border: 4px solid;
  border-radius: 200px 200px 200px 200px;
  position: absolute;
  color: black;
  font-size: 12pt;
}

.btnstrictcontrol {
  width: 10px;
  height: 10px;
  background-color: beige;
  border: 1px solid;
  border-radius: 10px 10px 10px 10px;
  position: absolute;
}

.disp {
  width: 50px;
  height: 35px;
  background-color: #800000;
  border: 3px double black;
  box-shadow: -2px 2px 8px red;
  overflow: hidden;
  box-shadow: inset -2px 1px 5px 0px rgba(242, 233, 233, 0.75);
  font-size: 18px;
  font-weight: bold;
  color: rgba(31, 0, 0, 0.26);
  border-radius: 12px 12px 12px 12px;
  text-align: center;
}

.font {
  text-align: center;
  font-size: 12pt;
}

.shadowbox {
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.6), -3px 4px 12px rgba(0, 0, 0, 0.5), -4px 6px 15px rgba(0, 0, 0, 0.4), -5px 8px 18px rgba(0, 0, 0, 0.3);
}

.latofont {
  font-family: 'Lato', sans-serif;
}

.fixfont {
  font-family: 'Permanent Marker', cursive;
}

.Kavi {
  font-family: 'Kavivanar', cursive;
}

.marcfont {
  font-family: 'Marck Script', cursive;
}

H1 {
  margin: -5% 27%;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 800%;
  color: #800000;
  position: fixed;
}


/*Downloaded from https://www.codeseek.co/vanderdrilu/simon-game-vjMdMw */
$(document).ready(function () {
    var zvuk = {
        1: "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3",
        2: "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3",
        3: "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3",
        4: "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3",
        5: "http://soundbible.com/grab.php?id=172&type=mp3",
        6: "http://soundbible.com/grab.php?id=1003&type=mp3",
        7: "https://www.soundjay.com/misc/fail-trombone-02.mp3"
    };
    var farba = {
        1: 'rgba(47, 116, 33, 1)',
        2: 'darkgoldenrod',
        3: 'rgb(15, 15, 214',
        4: 'red'
    };
    var isplayBoo = false;
    var onoff = false;
    var strictEnabled = false;
    var a = {
        1: new Audio(zvuk["1"]),
        2: new Audio(zvuk["2"]),
        3: new Audio(zvuk["3"]),
        4: new Audio(zvuk["4"]),
        5: new Audio(zvuk["5"]),
        6: new Audio(zvuk["6"]),
        7: new Audio(zvuk["7"])
    };
    a.defaultplaybackRate = 1.0;
    var timefactor = 1;
    var history = [];
    var counter = 0;
    var ID = {
        random: 0,
        n: 0
    };
    var timeoutkey;
    $('a').click(function () {
        if (onoff === true && isplayBoo == false) {
            var select = $(this);
            id = select.attr('id');
            ID.n = id[3];
            if (id == 'start') {
                rigthtimestop();
                timeoutkey = setTimeout(function () {
                    rigthtime();
                }, 10000);
                gameset();
                fromrecord(0);
            }
            else {
                a[ID.n].play();
                /*    $('#btn' + nId).css('animation', 'blick1 0.5s');*/
                $('#btn' + ID.n).css('background-color', 'whitesmoke');
                navratoriginalnejfarby(ID.n);
                /* $('#btn' + nId).css('background-color', farba[nId]);*/
                if (history[counter] == ID.n) {
                    /*good*/
                    if (counter == history.length - 1) {
                        /*ak je to posledný pridaj ďalší ťah */
                        if (history.length == 12) {
                            win(0, 4, 0.1);
                            a['6'].play();
                            reset();
                        }
                        else {
                            gameset();
                            isplayBoo = true;
                            counter = 0;
                            setTimeout(function () {
                                fromrecord(0);
                            }, 1200);
                        }
                        /*plus jedna sekunda a spustí záznam*/
                    }
                    else {
                        counter++;
                    }
                    číslovač();
                }
                else {
                    /*wrong*/
                    a['5'].play();
                    Wrong();
                }
            }
        }
    });
    function rigthtime() {
        a['7'].play();
        $('#disp').text("! !");
        $('#disp').css('animation', 'blick1 0.5s');
        setTimeout(function () { Wrong(); }, 3000);
    }
    function rigthtimestop() {
        clearTimeout(timeoutkey);
    }
    function číslovač() {
        $('#disp').text(history.length);
    }
    function win(y, x, t) {
        timefactor = t;
        isplayBoo = true;
        if (x == 0)
            x = 4;
        if (y < 100) {
            $('#btn' + x).css('background-color', 'whitesmoke');
            navratoriginalnejfarby(x);
            y += 1;
            t += 0.01;
            x -= 1;
            {
            }
            $('H1').text('You win');
        }
        else {
            isplayBoo = false;
            $('H1').empty();
        }
        setTimeout(function () { win(y, x, t); }, 400 * timefactor);
    }
    function gameset() {
        ID.random = random_button();
        history.push(ID.random);
    }
    function random_button() {
        return Math.floor(Math.random() * 4 + 1);
    }
    function reset() {
        $('H1').empty();
        counter = 0;
        history = [];
    }
    function fromrecord(x) {
        rigthtimestop();
        isplayBoo = true;
        timefactor = 1 / (1.8 * history.length / ((x + 1) / 0.4));
        return Promise.delay(800 * timefactor)
            .then(function () {
            if (x < history.length) {
                a[history[x]].play();
                $('#btn' + history[x]).css('background-color', 'whitesmoke');
                navratoriginalnejfarby(history[x]);
                return fromrecord(x += 1);
            }
            else {
                isplayBoo = false;
                timeoutkey = setTimeout(function () {
                    rigthtime();
                }, 6000);
            }
        });
    }
    function navratoriginalnejfarby(twoID) {
        setTimeout(function () {
            $('#btn' + twoID).css('background-color', farba[twoID]);
        }, 300 * timefactor);
    }
    /*zvyšné tlačítka switch a strict*/
    $('#strict').click(function () {
        if (strictEnabled === true) {
            strictEnabled = false;
            $('#btnstrictcontrol').css('background-color', 'beige');
        }
        else {
            $('#btnstrictcontrol').css('background-color', 'orange');
            strictEnabled = true;
        }
    });
    $('#onoff').change(function () {
        if ($('#onoff').prop('checked')) {
            onoff = true;
            $('#disp').css('color', '#FF0000');
            $('#disp').text('--');
            $('#disp').css('animation', 'blick1 1s');
        }
        else {
            onoff = false;
            $('#disp').css('color', '#990000');
            $('#disp').text('-88-');
            $('#disp').css('animation', 'blick1 1s');
            reset();
        }
    });
    function Wrong() {
        if (strictEnabled === true) {
            reset();
        }
        else {
            counter = 0;
            číslovač();
            /*plus jedna sekunda a spustí záznam*/
            setTimeout(function () {
                fromrecord(0);
            }, 1500);
        }
    }
});