"pluzz game "
Bootstrap 4.1.1 Snippet by shehzadali110

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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="container">
<div class="row">
<div class="col-md-12">
<div class="wrapper">
<h2>Puzzle Game</h2>
<div id="board">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</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
#game_object {
background-color: #ffffff;
height: 80px;
position: relative;
width: 80px;
}
#board div {
background: url("https://i.imgur.com/c2TuMGu.jpeg") no-repeat scroll 0 0 #ffffff;
cursor: pointer;
height: 80px;
line-height: 80px;
position: absolute;
text-align: center;
width: 80px;
/* css3 shadow */
-moz-box-shadow: inset 0 0 20px #555555;
-webkit-box-shadow: inset 0 0 20px #555555;
-ms-box-shadow: inset 0 0 20px #555555;
-o-box-shadow: inset 0 0 20px #555555;
box-shadow: inset 0 0 20px #555555;
}
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
// This is where we initialize the game
$(document).ready(function() {
// Initialize the game and create the plugin
// When the squares swap places, the moving square must always appear on top
var zi = 1; // We increment z-index each time a square is shifted
// The index of the empty square by default, the 16th square
var EmptySquare = 9;
// Now, this is where we create the plugin and call it fifteen.
$.fn.extend({ fifteen:
function(square_size) {
// Grab the id of the HTML element into which we are placing the game,
// it is the selector - "#game_object" from $("#game_object").fifteen(175);
var gameObjectElement = '#' + $(this).attr('id');
var sqSize = square_size + 'px';
var boardSize = (square_size * 1) + 'px';
// Inject DIV into game_object, this is our game board
$(gameObjectElement).html('<div id="board"></div>');
$('#board').css({ position:'absolute', width: boardSize, height: boardSize, border: '1px solid gray' });
// Populate the game board's HTML container with 15 squares
for (var i = 0; i < 12; i++) {
// A dirty way to create an arbitrary DIV and append it into HTML dynamically
// Notice each square uses the same image. It just uses a different x/y offset for each square
$('#board').append("<div style='left: " + ((i % 3) * square_size) + "px; top: " + Math.floor(i / 4) * square_size + "px; width: " + square_size + "px; height: " + square_size + "px; background-position: " + (-(i % 4) * square_size) + "px " + -Math.floor(i / 4) * square_size + "px '></div>");
}
// Empty up the 16th square, as the starting point
// EmptySquare = 16
$('#board').children("div:nth-child(" + EmptySquare + ")").css({backgroundImage: "", background: "#ffffff"});
// Attach click event to each square
$('#board').children('div').click(function() {
Move(this, square_size);
});
}
});
// Move() is the function that is called when a square is clicked
// Note that it is independent of the plugin itself which is described above
// It takes two parameters,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Fresh Bootstrap Table

Questions / Comments: