"Puzzle Game"
Bootstrap 4.1.1 Snippet by SOJITRA

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="back">
<div class="block test" id="2048"></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
@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2015 Daniel Eden
*/
.back{
background-size: cover !important;
background-position: center center;
position: relative
}
.back:before{
content: "";
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
height: 100%;
width: 100%;
z-index: 0;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
.animated.hinge {
-webkit-animation-duration: 2s;
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
(function($) {
var mainFunction = function(options) {
var vars = {
imageUrl: "https://images.unsplash.com/photo-1445820133247-bfef6cc162a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=633&q=80",
level: 4, //Grid must be less than 6 and greater than 2
bsPosition: 'random', //Blank Block
maxWidth: '', //Container Size
speed: 2, //Initial Animation Speed, 0 tends to slow
animation: '', //Animation Class
/* bounce | flash | pulse | rubberBand | shake
swing | tada | wobble | jello | bounceIn
bounceInDown | bounceInLeft | bounceInRight
bounceInUp | fadeIn | fadeInDown | fadeInDownBig
fadeInLeft | fadeInLeftBig | fadeInRight
fadeInRightBig | fadeInUp | fadeInUpBig | flip
flipInX | flipInY | lightSpeedIn | rotateIn
rotateInDownLeft | rotateInDownRight
rotateInUpLeft | rotateInUpRight | rollIn
zoomIn | zoomInDown | zoomInLeft | zoomInRight
zoomInUp | slideInDown | slideInLeft
slideInRight | slideInUp*/
gameLevel: 'easy', // Game Lavel 'hard' or 'easy'
animationSet: ["bounce", "flash", "pulse", "rubberBand", "shake", "swing", "tada", "wobble", "jello", "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "flip", "flipInX", "flipInY", "lightSpeedIn", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rollIn", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp", "slideInDown", "slideInLeft", "slideInRight", "slideInUp"]
},
root = this,
boxProperty = {}
const eventList = [];
root.callEventsAfterLoad = function() {
eventList.forEach(function(o) {
if (typeof o.callBack === "function") {
o.callBack.apply(null, o.arguments);
}
})
},
//Construct
construct = function(v, options) {
$.extend(v, options);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Navbar With Icons

Questions / Comments: