kunjgit · kunjgit · Jun 20, 2024 · Jun 16, 2024
diff --git a/Games/Cross_The_River_Game/README.md b/Games/Cross_The_River_Game/README.md
@@ -0,0 +1,17 @@
+<h1 align="center"> Cross_the_river_game</h1>
+
+## **Description 📃*
+<p>The farmer is the only one who can pilot the boat. The boat only carries two at a time. The goat can never be left alone with the cabbage, or it will devour it. The wolf also cannot be left alone with the goat, or it will eat it too. Can you cross them all?</p>
+
+## **How to play? 🕹️**
+<p>Click on the farmer, wolf, goat or cabbage to enter or leave the boat. Click the boat to cross the river - it'll only do it if the farmer is inside.
+<li>The boat can only carry the farmer and one other item at a time.</li>
+<li>The farmer cannot leave the wolf alone with the goat.</li>
+<li>The farmer cannot leave the goat alone with the cabbage.</li></p>
+
+
+# Screenshots -
+ <h3>Beginning of the Game</h3><br>
+ <img width="527" alt="Screenshot 2024-06-16 at 11 52 36 AM" src="https://github.com/kunjgit/GameZone/assets/142529986/ca4d758d-c8b8-4e00-845b-c1c7f3a048ec">
+ <img width="1438" alt="Screenshot 2024-06-16 at 11 52 45 AM" src="https://github.com/kunjgit/GameZone/assets/142529986/ab2773ef-12b4-4e1d-bf0b-d1eb9a600de4">
+ <img width="1440" alt="Screenshot 2024-06-16 at 11 53 16 AM" src="https://github.com/kunjgit/GameZone/assets/142529986/862e99e8-bdbe-4adf-92e2-a1b1188ff493">
diff --git a/Games/Cross_The_River_Game/css/main.css b/Games/Cross_The_River_Game/css/main.css
@@ -0,0 +1,8 @@
+html, body{
+    margin: 0;
+    padding: 0;
+  }
+  canvas{
+    display: block;
+    image-rendering: auto;
+  }
diff --git a/Games/Cross_The_River_Game/favicon.png b/Games/Cross_The_River_Game/favicon.png
diff --git a/Games/Cross_The_River_Game/img/boat.png b/Games/Cross_The_River_Game/img/boat.png
diff --git a/Games/Cross_The_River_Game/img/cabbage.png b/Games/Cross_The_River_Game/img/cabbage.png
diff --git a/Games/Cross_The_River_Game/img/farmer.png b/Games/Cross_The_River_Game/img/farmer.png
diff --git a/Games/Cross_The_River_Game/img/goat.png b/Games/Cross_The_River_Game/img/goat.png
diff --git a/Games/Cross_The_River_Game/img/wolf.png b/Games/Cross_The_River_Game/img/wolf.png
diff --git a/Games/Cross_The_River_Game/index.html b/Games/Cross_The_River_Game/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="theme-color" content="#FFF"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
+	<meta name="mobile-web-app-capable" content="yes">
+	<meta property="og:url" content="https://victorribeiro.com/bridge" />
+	<meta property="og:type" content="article" />
+	<meta property="og:title" content="Farmer, wolf, goat, cabbage problem." />
+	<meta property="og:author" content="Victor Ribeiro" />
+	<meta property="og:description" content="A JavaScript implementation of the bridge game." />
+	<meta property="og:image" content="https://victorribeiro.com/bridge/img/farmer.png" />
+	<meta property="og:image:width" content="512" />
+	<meta property="og:image:height" content="512" />
+	<title> Cross the River</title>
+	<link rel="manifest" href="manifest.json" />
+	<link rel="stylesheet" href="css/main.css" />
+	<link rel="icon" href="img/farmer.png" sizes="256x256"/>
+	<link rel="apple-touch-icon" href="img/farmer.png" />
+</head>
+<body>
+
+	<script src="js/aux.js"></script>
+	<script src="js/Passenger.js"></script>
+	<script src="js/Boat.js"></script>
+	<script src="js/main.js"></script>
+</body>
+</html>
diff --git a/Games/Cross_The_River_Game/js/Boat.js b/Games/Cross_The_River_Game/js/Boat.js
@@ -0,0 +1,59 @@
+class Boat {
+	constructor(img){
+		this.pos = {
+			x: ((w4+w4/2) + this.side * w4) - 20,
+			y: h4-20,
+		}
+		this.passengers = [];
+		this.w = Math.max(w,h) * 0.2;
+		this.h = this.w<<1;
+		this.side = 0;
+		this.img = img;
+	}
+
+	show(){
+		this.pos.x = ((this.side+1) * w4) + (w4/4) - (this.w/4);
+		this.pos.y = (h - this.h)/2 + (this.h * 0.1);
+		/*
+		c.fillStyle = 'red';
+		c.fillRect(this.pos.x, this.pos.y, this.w, this.h);
+		*/
+		c.drawImage(this.img,this.pos.x,this.pos.y,this.w,this.h);
+	}
+
+	addPassenger(p){
+		if( this.passengers.length < 2 && this.passengers.indexOf(p) == -1){
+			p.side += this.side == 0 ? 1 : -1 ;
+			this.passengers.push( p );
+			return true;
+		}
+		return false;
+	}
+
+	removePassanger(p){
+		let index = this.passengers.indexOf(p);
+		if(index >= 0){
+			p.side += this.side == 0 ? -1 : 1;
+			this.passengers.splice(index, 1);
+		}
+	}
+
+	action(){
+		if( this.passengers.length > 0 ){
+			let p = false;
+			for(let i = 0; i < this.passengers.length; i++){
+				if( this.passengers[i].pilot ){
+					p = true;
+					break;
+				}
+			}
+			if(p){
+				this.side = ( this.side + 1 ) % 2;
+				for(let i = 0; i < this.passengers.length; i++){
+					this.passengers[i].side = this.side+1;
+				}
+			}
+		}
+	}
+
+}
diff --git a/Games/Cross_The_River_Game/js/Passenger.js b/Games/Cross_The_River_Game/js/Passenger.js
@@ -0,0 +1,42 @@
+class Passenger {
+	constructor(img, x, y, name, index = 0, pilot = false){
+		this.pos = {
+			x: x,
+			y: y
+		};
+		this.index = index;
+		let s = Math.max(w,h) * 0.1;
+		this.w = s;
+		this.h = s;
+		this.side = 0;
+		this.pilot = pilot;
+		this.name = name;
+		this.img = img;
+	}
+
+	show(){
+		this.pos.x = this.side * w4 + w4/4;
+		this.pos.y = this.index * this.h + (h-this.w*4)/2;
+		/*
+		c.fillStyle = 'black';
+		c.fillRect(this.pos.x,this.pos.y,this.w,this.h);
+		*/
+		c.drawImage(this.img,this.pos.x,this.pos.y,this.w,this.h);
+	}
+
+	action(){
+		if( boat.side == 0 ){
+			if( this.side == 0 ){
+				boat.addPassenger(this);
+			}else{
+				boat.removePassanger( this );
+			}
+		}else{
+			if( this.side == 2){
+				boat.removePassanger( this );
+			}else if( this.side == 3 ){
+				boat.addPassenger( this );
+			}
+		}	
+	}
+}
diff --git a/Games/Cross_The_River_Game/js/aux.js b/Games/Cross_The_River_Game/js/aux.js
@@ -0,0 +1,22 @@
+if('serviceWorker' in navigator) {
+    navigator.serviceWorker
+             .register('/bridge/sw.js', {scope: './'})
+             .then(response => response)
+             .catch(reason => reason);
+  }
+
+  let deferredPrompt;
+  const addBtn = document.createElement('button');
+
+  window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    deferredPrompt = e;
+    addBtn.style.display = 'block';
+    addBtn.addEventListener('click', (e) => {
+      addBtn.style.display = 'none';
+      deferredPrompt.prompt();
+      deferredPrompt.userChoice.then((choiceResult) => {
+          deferredPrompt = null;
+        });
+    });
+  });
diff --git a/Games/Cross_The_River_Game/js/main.js b/Games/Cross_The_River_Game/js/main.js
@@ -0,0 +1,165 @@
+alert("Select the objects in boat with farmer and press the boat to cross the game");
+let background, canvas, c, w, h, w2, h2, elements, boat, farmer, wolf, goat, cabbage, moves, textures, solution;
+
+function init(){
+	let old = document.querySelector('canvas');
+	if(old)
+		old.remove();
+
+	moves = 0;
+	solution = [1,3,0,3,0,4,0,4,3,0,3,2,0,2,0,3,0,3,1];
+
+	canvas = document.createElement('canvas');
+	canvas.width = w = innerWidth;
+	canvas.height = h = innerHeight;
+	w4 = w/4;
+	h4 = h/4;
+	canvas.addEventListener('click', getElement );
+
+	c = canvas.getContext('2d');
+
+	document.body.appendChild(canvas);
+
+	c.shadowColor = 'rgba(0,0,0,0.5)';
+	c.shadowBlur = 50;
+
+	background = c.createLinearGradient(0,0,w,0);
+	background.addColorStop(0,'green');
+	background.addColorStop(0.2,'green');
+	background.addColorStop(0.27,'#654321');
+	background.addColorStop(0.3,'blue');
+	background.addColorStop(0.5,'#00BFFF');
+	background.addColorStop(0.7,'blue');
+	background.addColorStop(0.73,'#654321');
+	background.addColorStop(0.8,'green');
+	background.addColorStop(1,'green');
+	c.fillStyle = background;
+
+	elements = [];
+
+	farmer = new Passenger(textures['img/farmer.png'],w2,h2,'farmer',0,true);
+
+	wolf = new Passenger(textures['img/wolf.png'],w2,h2,'wolf',1);
+
+	goat = new Passenger(textures['img/goat.png'],w2,h2,'goat',2);
+
+	cabbage = new Passenger(textures['img/cabbage.png'],w2,h2,'cabbage',3);
+
+	boat = new Boat(textures['img/boat.png']); 
+
+	elements.push( boat );
+	elements.push( farmer );
+	elements.push( wolf );
+	elements.push( goat );
+	elements.push( cabbage );
+
+	/* hack to quick implement a solution's button */
+	let solve = {
+		pos: {
+			x: w-150,
+			y: h-50
+		},
+		h: 30,
+		w: 130,
+
+		show: function(){
+			c.fillStyle = 'gray';
+			c.fillRect(this.pos.x, this.pos.y, this.w, this.h);
+			c.fillStyle = 'black';
+			c.font = '1.2rem Arial';
+			let text = 'Solution';
+			let m = c.measureText(text);
+			c.fillText(text, this.pos.x+m.width/2, this.pos.y+20);
+		},
+
+		action: function(){
+			init();
+			canvas.removeEventListener('click', getElement);
+			solveMe();
+		}
+	};
+
+	elements.push( solve );
+
+	draw();
+}
+
+function solveMe(){
+	if( solution.length > 0 ){
+		elements[ solution.shift() ].action();
+		draw();
+		setTimeout( solveMe, 1000 );
+	}
+}
+
+function draw(){
+	c.fillStyle = background;
+	c.fillRect(0,0,w,h);
+	for(let i = 0; i < elements.length; i++){
+		elements[i].show();
+	}
+	check();
+}
+
+function check(){
+	if( farmer.side == 2 && (wolf.side == 0 && goat.side == 0) ||
+			farmer.side == 1 && (wolf.side == 3 && goat.side == 3) ||
+			farmer.side == 2 && (goat.side == 0 && cabbage.side == 0) ||
+			farmer.side == 1 && (goat.side == 3 && cabbage.side == 3 )
+	){
+		gameOver('You Lose');
+	}
+	if( farmer.side == 3 && wolf.side == 3 && goat.side == 3 && cabbage.side == 3){
+		gameOver('You Win');
+	}
+}
+
+let getElement = function(e){
+	let x = e.offsetX, y = e.offsetY;
+	let found = null;
+	for(let i = 0; i < elements.length; i++){
+		let e = elements[i];
+		if( x > e.pos.x && x < e.pos.x + e.w &&
+				y > e.pos.y && y < e.pos.y + e.h ){
+			found = e;
+		}
+	}
+	if(found){
+		found.action();
+	}
+	draw();
+	moves+=1;
+}
+
+function gameOver(result){
+	canvas.removeEventListener('click', getElement);
+	setTimeout( function(){
+		canvas.addEventListener('click', function(){
+			init();
+		});
+	}, 1500);
+	c.fillStyle = "black";
+	c.font = "3rem Arial";
+	c.fillText(result, (w-c.measureText(result).width)/2, 100);
+}
+
+function loadImages(){
+	let total = 0;
+	imgSrc = ['img/farmer.png','img/wolf.png','img/goat.png','img/cabbage.png','img/boat.png'];
+	textures = {};
+	for(name of imgSrc){
+		textures[name] = new Image();
+		textures[name].src = name;
+		textures[name].onload = function(){
+			total++;
+			if( total == imgSrc.length )
+				init();
+		}
+	}
+}
+
+loadImages();
+
+window.onresize = function(){
+	init();
+};
diff --git a/Games/Cross_The_River_Game/screenshot.png b/Games/Cross_The_River_Game/screenshot.png