<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>number_shift_game</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="/favicon.ico" />
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<div id="success-message"></div>
<div class="well">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Select Game Type</label>
<div class="col-sm-3">
<select id="game-type" class="form-control">
<option>Select</option>
<option value="3">3 X 3 Grid</option>
<option value="4">4 X 4 Grid</option>
<option value="5">5 X 5 Grid</option>
<option value="6">6 X 6 Grid</option>
<option value="7">7 X 7 Grid</option>
<option value="8">8 X 8 Grid</option>
</select>
</div>
<label for="inputEmail3" class="col-sm-2 control-label">Total Moves</label>
<div class="col-sm-5">
<p class="form-control-static" id="moves-counter">0</p>
</div>
</div>
</form>
</div>
<div class="well">
<details>
<summary>Rules.</summary>
<div>
<ol>
<li>The objective of the game is to arrange all the number in ascending order. Starting from top left to bottom right corner</li>
<li>The movement of cells is possible only though moving of the blank space.</li>
<li>You can switch the blank space with TOP RIGHT BOTTOM or LEFT element of the blank space, by clicking on them</li>
</ol>
</div>
</details>
</div>
<div id="game_container" class="well well-lg game-container"></div>
</div>
<script src="config.js"></script>
<script src="main.js"></script>
<script>
main.bootstrap();
</script>
</body>
</html>
// Code goes here
var config = {
cell_html : function(index, value){
return '<div class="col-sm-1 game-cell" data-value="'+index+'">'+value+'</div>';
},
success_html: function(moves){
return '<div class="alert alert-success alert-dismissable"><strong>Congrats!</strong> You have won the game in '+moves+' moves</div>';
},
game_container_id : "game_container",
game_cell_class:"game-cell",
game_type_control_id:"game-type",
moves_counter_id:"moves-counter",
success_message_id:"success-message"
};
/* Styles go here */
.game-cell{
border: 1px solid black;
padding: 12px;
}
.game-container{
text-align: center;
font-size: 27px;
color: black;
}
var Student = (function(){
var name,age;
var getName = function(){
return name;
}
var setName = function(newname){
name = newname;
}
return {
getName : getName,
setName : setName
};
})()
var main = (function(){
var game_array;
var valid_move_array = new Array();
var matrix_grid_size;
var moves_counter = 0;
var blank_space_pointer;
var getGameArray = function(){
return game_array;
}
var getMatrixGridSize = function(){
return matrix_grid_size;
}
var setMatrixGridSize = function(new_matrix_grid_size){
matrix_grid_size = new_matrix_grid_size;
}
var getMovesCounter = function(){
return moves_counter;
}
var getBlankSpacePointer = function(){
return blank_space_pointer;
}
var createGameArray = function(){
game_array = new Array();
var game_array_size = matrix_grid_size*matrix_grid_size;
for(i=0; i < (game_array_size-1); i++){
game_array.push(i+1);
}
game_array.push(' ');
blank_space_pointer = game_array.length-1;
setValidMovesArray();
}
var randomizeGameArray = function(){
for(var i=0; i <1000; i++){
var randomKey = Math.floor(Math.random() * valid_move_array.length);
if(shiftBlankSpace(valid_move_array[randomKey])){
setValidMovesArray();
}
}
}
var updateMoves = function(){
document.getElementById(config.moves_counter_id).innerHTML = moves_counter;
document.getElementById(config.success_message_id).innerHTML = '';
}
var setValidMovesArray = function(){
blank_space_pointer *= 1;
matrix_grid_size *= 1;
valid_move_array = new Array();
var left = blank_space_pointer - 1;
var right = blank_space_pointer + 1;
var top = blank_space_pointer - matrix_grid_size;
var bottom = blank_space_pointer + matrix_grid_size;
if((((left+1)%matrix_grid_size) != 0) && (left >= 0)){
valid_move_array.push(left);
}
if((((right)%matrix_grid_size) != 0) && (right <= (game_array.length-1))){
valid_move_array.push(right);
}
if(top >= 0){
valid_move_array.push(top);
}
if(bottom <= (game_array.length-1)){
valid_move_array.push(bottom);
}
}
var getGameArray = function(){
return game_array;
}
var isMoveAllowed = function(move_position){
if(valid_move_array.indexOf(move_position*1) > -1){
return true;
} else {
false;
}
}
var shiftBlankSpace = function(move_position){
if(isMoveAllowed(move_position)){
var temp = game_array[blank_space_pointer];
game_array[blank_space_pointer] = game_array[move_position];
game_array[move_position] = temp;
blank_space_pointer = move_position;
return true;
}
return false;
}
var isGameWon = function(){
for(var i = 0; i < ((game_array.length)-1); i++ ){
if(game_array[i] != (i+1)){
return false;
}
}
return true
};
var createGameHTML = function(){
var game_html= '';
for(var i in game_array){
if(i == 0){
var game_html = '<div class="row">';
} else if(i == (game_array.length)){
game_html += '</div>';
break;
} else if(((i*1+1)%matrix_grid_size)==1){
game_html += '</div><div class="row">';
}
game_html += config.cell_html(i, game_array[i]);
}
document.getElementById(config.game_container_id).innerHTML = game_html;
}
var refreshGameHTML = function(){
var game_cells_array = document.getElementsByClassName(config.game_cell_class);
for(var i=0; i<game_cells_array.length; i++){
game_cells_array[i].innerHTML = game_array[i];
}
}
var bindGameCellsToEvents = function(){
var game_cells_array = document.getElementsByClassName(config.game_cell_class);
for(var i=0; i<game_cells_array.length; i++){
game_cells_array[i].addEventListener('click',function(e){
if(shiftBlankSpace(this.getAttribute('data-value'))){
setValidMovesArray();
moves_counter++;
updateMoves();
refreshGameHTML();
if(isGameWon()){
document.getElementById('success-message').innerHTML = config.success_html(moves_counter);
}
}
});
}
}
var prepareGame = function(matrix_size){
setMatrixGridSize(matrix_size);
createGameArray();
randomizeGameArray();
createGameHTML();
setValidMovesArray();
bindGameCellsToEvents();
moves_counter = 0;
updateMoves();
}
var bootstrap = function(){
document.getElementById(config.game_type_control_id).addEventListener('change',function(){
if(this.options[this.selectedIndex].value!='Select'){
prepareGame(this.options[this.selectedIndex].value);
}
});
}
return {
bootstrap:bootstrap,
prepareGame:prepareGame
}
})();