Skip to content

Instantly share code, notes, and snippets.

@beautifulcode

beautifulcode/simon-says

Last active August 29, 2015 13:56
Download ZIP

Revisions

  1. beautifulcode revised this gist Feb 14, 2014. 1 changed file with 18 additions and 24 deletions.
    42 changes: 18 additions & 24 deletions simon-says
    View file
    Original file line number Diff line number Diff line change
    @@ -25,36 +25,33 @@
    <script>
    $(document).ready(function(){

    function setMain(color){
    console.log(color);
    $('#main').css({backgroundColor: color});
    }
    var main = $('#main');
    var quads = $('.quad');

    $('.quad').click(function(e){

    var quad = $(e.currentTarget)[0];
    var classes = quad.className.split(' ');
    var colour = classes[classes.length-1];
    setMain(colour);

    var color = findColor(quad);
    setColor(main, color);
    });

    var colorOrder = [];
    var setColor = function(el, color){
    el.css({backgroundColor: color});
    }

    var quads = $('.quad');
    quads.each(function(i, el){
    colorOrder[i] = Math.random(quads.length-1);
    });
    var findColor = function(el){
    var classes = el.className.split(' ');
    var color = classes[classes.length-1];
    return color;
    }

    var findColor = function(){
    var rand_quad = Math.floor(Math.random() * (quads.length - 1 + 1) + 1);
    var pos = Math.floor(rand_quad);
    var classes = quads[pos].className.split(' ');
    var colour = classes[classes.length-1];
    setMain(colour)
    var randomizeColor = function(){
    var pos = Math.floor(Math.random() * quads.length);
    var quad = quads[pos];
    var color = findColor(quad);
    setColor(main, color);
    }

    var timer = window.setInterval(findColor, 500);
    var timer = window.setInterval(randomizeColor, 500);

    });

    @@ -90,9 +87,6 @@
    </div>
    </div>




    </div>

    </body>
  2. beautifulcode created this gist Feb 13, 2014.
    100 changes: 100 additions & 0 deletions simon-says
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,100 @@
    <html>

    <head>

    <style>

    #wrapper{}
    .box{float: left; border: 1px solid black;}
    #main{width: 500px; height: 500px;}

    .quad-holder{float: left; width: 450px; }
    .quad{width: 100px; height: 100px; display: block; margin: 20px;}

    .red{background: red;}
    .green{background: green; }
    .blue{background: blue;}
    .yellow{background: yellow;}

    .clear{display: block; clear: both;}

    </style>

    <script src="http://code.jquery.com/jquery-2.1.0.js"></script>

    <script>
    $(document).ready(function(){

    function setMain(color){
    console.log(color);
    $('#main').css({backgroundColor: color});
    }

    $('.quad').click(function(e){

    var quad = $(e.currentTarget)[0];
    var classes = quad.className.split(' ');
    var colour = classes[classes.length-1];
    setMain(colour);

    });

    var colorOrder = [];

    var quads = $('.quad');
    quads.each(function(i, el){
    colorOrder[i] = Math.random(quads.length-1);
    });

    var findColor = function(){
    var rand_quad = Math.floor(Math.random() * (quads.length - 1 + 1) + 1);
    var pos = Math.floor(rand_quad);
    var classes = quads[pos].className.split(' ');
    var colour = classes[classes.length-1];
    setMain(colour)
    }

    var timer = window.setInterval(findColor, 500);

    });

    </script>

    </head>

    <body>

    <div id="wrapper">

    <div id="main" class="box">

    </div>

    <div class="quad-holder">
    <div id="box-1" class="box quad red">

    </div>

    <div id="box-2" class="box quad green">

    </div>

    <div class="clear"></div>

    <div id="box-3" class="box quad blue">

    </div>

    <div id="box-4" class="box quad yellow">

    </div>
    </div>




    </div>

    </body>

    </html>