JSFiddle - React, Tailwind, and code Playground

by Audrey Klammer

HTML

<script src="https://unsplash.it/700/700/?random"></script>
<body>
		<header></header>
			<div id="game_object">
		</div>
		<button>Randomize</button>
</body>

CSS

#game_object {
	background-color: #ffffff;
	height: 705px;
	width: 705px;
	margin: 20px auto;
	position: relative;
}

#board div {
	background: url("https://unsplash.it/700/700/?random") no-repeat scroll 0 0 #ffffff;
	cursor: pointer; 
	height: 175px;
	width: 175px;
	background-size: 700px 700px;
	line-height: 175px;
	position: absolute;
	text-align: center;

	/* 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;
}
*/

JavaScript

$(document).ready(function() {
var zi = 1;
var EmptySquare = 16;

$.fn.extend({ fifteen:

    function(square_size) {
        var gameObjectElement = '#' + $(this).attr('id');

        var sqSize = square_size + 'px';
        var boardSize = (square_size * 4) + 'px';

        $(gameObjectElement).html('<div id="board"></div>');

        $('#board').css({ position: 'absolute', width: boardSize, height: boardSize, border: '1px solid gray'});

        for(var i = 0; i < 16; i++) {
            $('#board').append("<div class='" + i + "' style='left:" + ((i % 4) * 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>");

            // Select the children of #board ID that are divs, and the 16th one, then make backgroundImage nothing, and background color of white. 
            // This emptys the 16th square.
            $('#board').children("div:nth-child(" + EmptySquare + ")").css({backgroundImage: "", background: "#ffffff"}); 

            // Attach a click event to each of the squares, or divs.
            $('#board').children('div').click(function() {
                Move(this, square_size);
            });

            $('button').click(function() {
                for (var i = 5; i < 15; i++) {
                    var randomN = Math.floor(Math.random()*15) + 1;
                    console.log(randomN);
                    var imageBox = $('#board').children("div:nth-child(" + randomN + ")");
                    console.log(imageBox);
                    Move(imageBox, 175);
                     

                }

            });
        }
    }
});

function Move(clicked_square, square_size) {
    var movable = false;

    // oldx is really just empty square x and empty square y
    // swap the old with the new, just make it so new has x and y for top...