Merge pull request ReciHub#359 from pipitorminator/FloodIt

created FloodIt minigame
Vishwas-verma · Oct 17, 2019 · 389043d · 389043d
2 parents 08dcf5b + 9cef4b2
commit 389043d
Show file tree

Hide file tree

Showing 4 changed files with 316 additions and 0 deletions.
diff --git a/FloodIt/css/style.css 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;	
+}
diff --git a/FloodIt/index.html b/FloodIt/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html lang="pt-br">
+<head>
+	<meta charset="UTF-8">
+	<title>Flood It!</title>
+	<link rel="stylesheet" type="text/css" href="css/style.css">
+</head>
+<body>
+	<div id="container">
+		<div id="menu">
+			<p>Jogadas :
+			 <span id="moves"> 0 </span> / 25
+			 <span>&nbsp &nbsp &nbsp</span>
+			 Status :
+			  <span id="status"></span>
+			</p>	
+			<HR>
+				<ul style="padding-inline-start: 0px;">
+					<li class="btn" id="gray" value="1"></li>
+					<li class="btn" id="yellow" value="2"></li>
+					<li class="btn" id="red" value="3"></li>
+					<li class="btn" id="blue" value="4"></li>
+					<li class="btn" id="green" value="5"></li>
+					<li class="btn" id="purple" value="6"></li>
+				</ul>
+			<HR>
+
+			<canvas id="puzzle" class="puzzle" width="420" height="420"></canvas>
+
+			<p id="restart"> Reiniciar </p>
+		</div>
+	</div>
+</body>
+	<script type="text/javascript" src="js/square.js"></script>
+	<script type="text/javascript" src="js/script.js"></script>
+</html>
diff --git a/FloodIt/js/script.js 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();
+})();
diff --git a/FloodIt/js/square.js 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;
+    }
+}