Kornil/JQuery Grid Game.markdown

## index.html
<body>
  <div class="buttons">
    <button class="btn btn-primary Grid">Choose Grid</button><br>
    <button class="btn btn-default Clear">Clear</button><br>
    <button class="btn btn-success Default">Default</button><br>
    <button class="btn btn-danger Rainbow">Rainbow!</button><br>
    <button class="btn btn-warning Fade">Fade</button>
  </div>
  <div class="wrap">
  </div>
</body>

## JQuery Grid Game.markdown

      
    Raw
  

              JQuery Grid Game.markdown
            
          
    JQuery Grid Game

Simple JQuery sketchpad, you can choose the grid max rows and cols, 3 main game-styles and a clear button to start again.
A Pen by Francesco Agnoletto on CodePen.
License.


## script.js
$(document).ready(function() {
  function newGrid(n) {
    $(".square").remove();
    var size = 560;
    var square = size / n;
    for (var k = 0; k < n; k++) {
      for (var i = 0; i < n; i++) {
        $(".wrap").append($("<div></div>").addClass("square").height(square).width(square));
      }
      $(".wrap").append($("<div></div>").css("clear", "both"));
    }
  };

  function Default() {
    $(".square").hover(function() {
      $(this).css("background", "white");
    });
  };

  function clear() {
    $(".square").css("background", "#99ccff");
    $(".square").css("opacity", "1");
  };

  function Fade(sq){
    var op = sq.css('opacity');
    var newOp = op -0.1;
    if(newOp > 0){
      $(sq).css("opacity", newOp);
    }else{
      $(sq).css("opacity", "0");
    }
  };

  function randCol(){
    var R = Math.floor(Math.random()*256)
    var G = Math.floor(Math.random()*256)
    var B = Math.floor(Math.random()*256)
    return "rgb(" + R + "," + G + "," + B + ")";
  };

  // start game
  newGrid(16);
  Default();
  $(".Clear").click(clear);
  // play fade mod
  $(".Fade").click(function(){
    clear();
    $(".square").unbind();
    $(".square").hover(function(){
      Fade($(this));
    });
  });
  // play standard mode
  $(".Default").click(function(){
    clear();
    $(".square").unbind();
    Default();
  });
  // play rainbow mode
  $(".Rainbow").click(function(){
    clear();
    $(".square").unbind();
    $(".square").hover(function() {
      $(this).css("background", randCol);
    });
  });
  // choose grid dim
  $(".Grid").click(function(){
    var num = parseInt(window.prompt("Change number of Rows&Col(1-32): "),10);
    if(isNaN(num) || num > 32 || num < 1){
      newGrid(16);
    }else{
      newGrid(num);
    }
    clear();
    Default();
  });
});

## scripts
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.css
body{
  max-height:100vh;
}
.wrap{
  margin:0 auto;
  margin-top:20px;
  width:560px;
}
.square{
  border: 1px solid white;
  float:left;
  background: #99ccff;
}
.buttons{
  position:absolute;
  right:50px;
}
button{
  margin:10px;
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<body>
	<div class="buttons">
	<button class="btn btn-primary Grid">Choose Grid</button><br>
	<button class="btn btn-default Clear">Clear</button><br>
	<button class="btn btn-success Default">Default</button><br>
	<button class="btn btn-danger Rainbow">Rainbow!</button><br>
	<button class="btn btn-warning Fade">Fade</button>
	</div>
	<div class="wrap">
	</div>
	</body>
	$(document).ready(function() {
	function newGrid(n) {
	$(".square").remove();
	var size = 560;
	var square = size / n;
	for (var k = 0; k < n; k++) {
	for (var i = 0; i < n; i++) {
	$(".wrap").append($("<div></div>").addClass("square").height(square).width(square));
	}
	$(".wrap").append($("<div></div>").css("clear", "both"));
	}
	};

	function Default() {
	$(".square").hover(function() {
	$(this).css("background", "white");
	});
	};

	function clear() {
	$(".square").css("background", "#99ccff");
	$(".square").css("opacity", "1");
	};

	function Fade(sq){
	var op = sq.css('opacity');
	var newOp = op -0.1;
	if(newOp > 0){
	$(sq).css("opacity", newOp);
	}else{
	$(sq).css("opacity", "0");
	}
	};

	function randCol(){
	var R = Math.floor(Math.random()*256)
	var G = Math.floor(Math.random()*256)
	var B = Math.floor(Math.random()*256)
	return "rgb(" + R + "," + G + "," + B + ")";
	};

	// start game
	newGrid(16);
	Default();
	$(".Clear").click(clear);
	// play fade mod
	$(".Fade").click(function(){
	clear();
	$(".square").unbind();
	$(".square").hover(function(){
	Fade($(this));
	});
	});
	// play standard mode
	$(".Default").click(function(){
	clear();
	$(".square").unbind();
	Default();
	});
	// play rainbow mode
	$(".Rainbow").click(function(){
	clear();
	$(".square").unbind();
	$(".square").hover(function() {
	$(this).css("background", randCol);
	});
	});
	// choose grid dim
	$(".Grid").click(function(){
	var num = parseInt(window.prompt("Change number of Rows&Col(1-32): "),10);
	if(isNaN(num) \|\| num > 32 \|\| num < 1){
	newGrid(16);
	}else{
	newGrid(num);
	}
	clear();
	Default();
	});
	});
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	body{
	max-height:100vh;
	}
	.wrap{
	margin:0 auto;
	margin-top:20px;
	width:560px;
	}
	.square{
	border: 1px solid white;
	float:left;
	background: #99ccff;
	}
	.buttons{
	position:absolute;
	right:50px;
	}
	button{
	margin:10px;
	}