diff --git a/FloodIt/css/style.css b/FloodIt/css/style.css
new file mode 100644
index 00000000..e548b354
--- /dev/null
+++ b/FloodIt/css/style.css
@@ -0,0 +1,81 @@
+#container{
+ width: 420px;
+ height: 610px;
+ margin:0 auto;
+ padding: 10px;
+ text-align:left;
+ box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
+}
+
+li {
+ display: inline-block;
+ width:30px;
+ height:30px;
+ line-height:30px;
+ vertical-align:middle;
+ list-style:none;
+ border: 1px solid black;
+ margin:0 auto;
+}
+
+li.btn{
+ cursor: pointer;
+}
+
+li:hover{
+ border-radius:20%;
+ border: 1px solid black;
+}
+
+li#gray{
+ margin: 5px;
+ background: #808080;
+}
+li#yellow{
+ margin: 5px;
+ background: #FFFF00;
+}
+li#red{
+ margin: 5px;
+ background: #FF0000;
+}
+li#blue{
+ margin: 5px;
+ background: #0080FF;
+}
+li#green{
+ margin: 5px;
+ background: #00FF00;
+}
+li#purple{
+ margin: 5px;
+ background: #8000FF;
+}
+
+#divCanvas, #menu{
+ float: left;
+ text-align: center;
+}
+
+#divCanvas{
+ border: 2px solid;
+ box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
+}
+
+p#restart{
+ margin-top: 20px;
+ cursor: pointer;
+ text-align: center;
+ border: 1px solid;
+ box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
+}
+
+p#restart:hover{
+ border: 1px solid rgb(200,0,0);
+ box-shadow: 0px 0px 10px rgba(100,0,0,0.5);
+ color: rgb(200,0,0);
+}
+
+.puzzle {
+ border: 1px solid black;
+}
\ No newline at end of file
diff --git a/FloodIt/index.html b/FloodIt/index.html
new file mode 100644
index 00000000..c7f0438d
--- /dev/null
+++ b/FloodIt/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+ Flood It!
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/FloodIt/js/script.js b/FloodIt/js/script.js
new file mode 100644
index 00000000..dcf9a912
--- /dev/null
+++ b/FloodIt/js/script.js
@@ -0,0 +1,178 @@
+(function () {
+ var canvas, ctx, color, btn, movesMade, quad, status, moves, restart, victory;
+
+ //Arrays
+ var arr = new Array();
+ var arrStatus = ["Iniciar","Jogando","Ganhou","Perdeu"];
+ var arrColor = ["#808080","#FFFF00","#FF0000","#0080FF","#00FF00","#8000FF"];
+ //Constantes
+ var MAXMOVES = 25;
+ var SIZE = 30;
+ var ARRAYLENGHT = 14
+
+ function main () {
+ canvas = document.getElementById("puzzle");
+ ctx = canvas.getContext("2d");
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ moves = document.getElementById('moves');
+ status = document.getElementById('status');
+ restart = document.getElementById('restart');
+ intConfig();
+ };
+
+ function intConfig ( ) {
+ victory = false;
+ movesMade = 0;
+ arr = [];
+ moves.innerHTML = movesMade;
+ status.innerHTML = arrStatus[0];
+ configureBtn();
+ draw();
+ arr[0][0].setChange( true );
+ changeStatus();
+ };
+
+ function configureBtn () {
+ btn = document.getElementsByClassName("btn");
+ for (var i = 0; i < btn.length; i++ ) {
+ btn[i].onclick = function () {
+ if (arr[0][0].color != arrColor[ this.value - 1 ]) {
+ if (movesMade < MAXMOVES) {
+ if (victory == false) {
+ movesMade++;
+ changeColor(this.value);
+ };
+ };
+ };
+ };
+ };
+ restart.onclick = function () {
+ intConfig();
+ };
+ };
+
+ function changeStatus () {
+
+ for ( var i = 0; i < 3 ; i++ ) {
+
+ //Mudar a cor do quadrado
+ for ( var j = 0 ; j < arr.length ; j++ ) {
+ for (var k = 0; k < arr[j].length; k++) {
+ if ( arr[j][k].getChange() == true ) {
+ //Direita
+ if ( arr[ j ][ k ] != arr[j][ARRAYLENGHT - 1] ) {
+ if ( arr[j][ k + 1 ].color == arr[ j ][ k ].color ) {
+ arr[j][ k + 1 ].setChange(true);
+ }
+ };
+ //Esquerda
+ if ( arr[ j ][ k ] != arr[j][0] ) {
+ if ( arr[j][ k - 1 ].color == arr[ j ][ k ].color ) {
+ arr[j][ k - 1 ].setChange(true);
+ }
+ };
+ //Para Baixo
+ if ( arr[ j ][ k ] != arr[ARRAYLENGHT - 1][k] ) {
+ if ( arr[ j + 1 ][ k ].color == arr[ j ][ k ].color ) {
+ arr[ j + 1 ][ k ].setChange(true);
+ }
+ };
+ //Para cima
+ if ( arr[ j ][ k ] != arr[0][k] ) {
+ if ( arr[ j - 1][ k ].color == arr[ j ][ k ].color ) {
+ arr[ j - 1][ k ].setChange(true);
+ }
+ };
+ };
+ };
+
+ }
+ }
+ }
+
+ function changeColor (color) {
+ for (var i = 0; i < arr.length; i++) {
+ for (var j = 0; j < arr[i].length; j++) {
+ if( arr[i][j].getChange() == true){
+ arr[i][j].color = arrColor[ color - 1 ]
+ };
+ };
+ };
+ reDraw();
+ };
+
+ function reDraw ( ) {
+ var flood;
+ var auxArr = arr;
+ arr = [];
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ for (var i = 0; i < auxArr.length; i++) {
+ var row = new Array();
+ for (var j = 0; j < auxArr[i].length; j++) {
+ quad = new square( auxArr[i][j].x, auxArr[i][j].y, auxArr[i][j].width, auxArr[i][j].height, auxArr[i][j].color, ctx);
+ quad.draw();
+ row.push(quad);
+ row[j].setChange(auxArr[i][j].getChange());
+ };
+ arr[i] = row;
+ };
+
+ flood = arr.every(function(elemento){
+ return elemento.every(function(obj){
+ console.log(obj.color)
+ return obj.color === arr[0][0].color
+ })
+ });
+
+ moves.innerHTML = movesMade;
+ if (flood) {
+ victory = true;
+ status.innerHTML = arrStatus[2];
+ } else {
+ if (movesMade == MAXMOVES) {
+ status.innerHTML = arrStatus[3];
+ }else {
+ status.innerHTML = arrStatus[1];
+ };
+ };
+
+ changeStatus();
+ }
+
+ function draw () {
+ for (var i = 0; i < ARRAYLENGHT; i++) {
+ var row = new Array();
+ for (var j = 0; j < ARRAYLENGHT; j++) {
+ quad = new square( i*SIZE, j*SIZE, SIZE, SIZE, randColor(), ctx);
+ quad.draw();
+ row.push(quad);
+ };
+ arr[i] = row;
+ };
+ }
+ function randColor () {
+ color = Math.floor((Math.random()*6)+1);
+ switch(color){
+ case 1:
+ return '#808080';
+ break;
+ case 2:
+ return '#FFFF00';
+ break;
+ case 3:
+ return '#FF0000';
+ break;
+ case 4:
+ return '#0080FF';
+ break;
+ case 5:
+ return '#00FF00';
+ break;
+ case 6:
+ return '#8000FF';
+ break;
+ }
+ }
+ //incia o main
+ main();
+})();
\ No newline at end of file
diff --git a/FloodIt/js/square.js b/FloodIt/js/square.js
new file mode 100644
index 00000000..36ea432f
--- /dev/null
+++ b/FloodIt/js/square.js
@@ -0,0 +1,21 @@
+function square(x, y , w, h, color, ctx){
+ this.x = x;
+ this.y = y;
+ this.width = w;
+ this.height = h;
+ this.color = color;
+ var changeColor = false;
+
+ this.draw = function( ) {
+ ctx.fillStyle = color
+ ctx.fillRect( this.x, this.y, this.width, this.height );
+ }
+
+ this.setChange = function (set) {
+ changeColor = set;
+ }
+
+ this.getChange = function ( ) {
+ return changeColor;
+ }
+}
\ No newline at end of file