Bootstrap Snippet Play cross match game with codeuix using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <span class="image-position"><a href="https://www.facebook.com/meuix/?ref=settings" target="_blank">
        <img src="https://lh4.googleusercontent.com/fLEIj3iQb7O1FhjOpLFbJtHmsMlLGmLynSWUvAP70qF0HLEBty-FANvwweg7Sv2XqSpzOKNI=w1366-h638"></a>
    </span>
    <div id="picbox">
      <span id="boxbuttons">
        <span class="button">
          <span id="counter">0</span>
        </span>
        <span class="button">
          <a onclick="ResetGame();">Reset</a>
        </span> 
      </span>
      <div id="boxcard">
      </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
    margin: 0;
    padding: 0;
}
body {
    font: 18px Verdana;
    color: #FFF;
  background: -webkit-gradient(linear, center top, center bottom, color-stop(0%,#1D3749), color-stop(60%,#1D3749), color-stop(100%,#559BB5));
}
.image-position{
    position: absolute;
    left: 3%;
}
.image-position img{
    width: 70%;
}
a {
    color: #E91E63;
    text-decoration: none;
}
#picbox {
    margin: 0px auto;
    width: 436px;
}
#boxcard {
    z-index: 1;
    margin: 10px 0 0;
}
#boxcard div{
    float: left;
    width: 100px;
    height: 100px;
    margin: 0px;
     /*padding: 5px; */
    /*border: 2px solid #1d3749;*/
    cursor: pointer;
    border-radius: 0px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var BoxOpened = "";
                var ImgOpened = "";
                var ImgFound = 0;
                var Source = "#boxcard";
                var score = 0;
                var ImgSource = [
                  "#fff",
                  "#000",
                  "red",
                  "blue",
                  "orange",
                  "pink",
                  "yellow",
                  "green"
                ];
                function RandomFunction(MaxValue, MinValue) {
                        return Math.round(Math.random() * (MaxValue - MinValue) + MinValue);
                    }
                    
                function ShuffleImages() {
                    var ImgAll = $(Source).children();//all divs
                    console.log(ImgAll);
                    var ImgThis = $(Source + " div:first-child");//first div
                    console.log(ImgThis);
                    var ImgArr = new Array();
                    for (var i = 0; i < ImgAll.length; i++) {
                        ImgArr[i] = $("#" + $(ImgThis).attr("id") + ' div').css("background-color");
                        ImgThis = $(ImgThis).next();
                    }
                    
                        ImgThis = $(Source + " div:first-child");
                    
                    for (var z = 0; z < ImgAll.length; z++) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Play cross match game with codeuix"
Bootstrap 3.3.0 Snippet by rajesh123456

Related: See More

Questions / Comments:

"Play cross match game with codeuix" Bootstrap 3.3.0 Snippet by rajesh123456

Related: See More

Questions / Comments:

"Play cross match game with codeuix"
Bootstrap 3.3.0 Snippet by rajesh123456