CatFish v6

catfish-v6.markdown

CatFish v6

A Pen by Bzozoo on CodePen.

License.

index.html

<div id="container">
	<div id="waterLayer1">
		
	</div>
	<div id="waterLayer2">
		
	</div>
	<div id="waterLayer3">
		
	</div>
	
</div>

script.js

let directions = [
	"right",
	"left",
	"up",
	"down",
	"downright",
	"downleft",
	"upright",
	"upleft"
];
let fishes = [
	{
		name: "catfish",
		imageURL: "https://i.imgur.com/AwH3QhO.gif",
		defaultOrientation: "right",
		waterLayer: document.querySelector("#waterLayer1"),
		width: 29,
		height: 15,
		top: 60,
		left: 60,
		directionActual: directions[Math.floor(Math.random() * directions.length)],
		speed: 12,
		swimming: true
	},
	{
		name: "JoeY",
		imageURL: "https://i.imgur.com/AwH3QhO.gif",
		defaultOrientation: "right",
		waterLayer: document.querySelector("#waterLayer2"),
		width: 29,
		height: 15,
		top: 90,
		left: 90,
		directionActual: directions[Math.floor(Math.random() * directions.length)],
		speed: 18,
		swimming: true
	},
	{
		name: "JasonX",
		imageURL: "https://i.imgur.com/AwH3QhO.gif",
		defaultOrientation: "right",
		waterLayer: document.querySelector("#waterLayer2"),
		width: 29,
		height: 15,
		top: 90,
		left: 90,
		directionActual: directions[Math.floor(Math.random() * directions.length)],
		speed: 11,
		swimming: true
	},
	{
		name: "Star",
		imageURL: "https://i.gifer.com/ZfUY.gif",
		defaultOrientation: "right",
		waterLayer: document.querySelector("#waterLayer3"),
		width: 29,
		height: 15,
		top: container.offsetHeight - 100,
		left: container.offsetWidth - 100,
		directionActual: directions[Math.floor(Math.random() * directions.length)],
		speed: 20,
		swimming: "never"
	}
];

function createFishes() {
	
	for (let fish of fishes) {
		fish.waterLayer.innerHTML += fishPanel(
			fish.name,
			fish.imageURL,
			fish.width,
			fish.height,
			fish.top,
			fish.left,
			fish.directionActual,
			fish.speed
		);
	}

	for (let fish of fishes) {
		fish.fishDiv = document.querySelector(`#${fish.name}`);
	}
}

function fishPanel(
	name,
	imageURL,
	width,
	height,
	top,
	left,
	directionActual,
	speed
) {
	let fishTemplate = function () {
		return `<div class="fish" id="${this.name}" style="top:${this.top}px;left:${this.left}px; position: absolute; background-image: url('${this.imageURL}'); backgound-color: lightblue; background-size: 100% 100%; width: ${this.width}%; max-width: 400px; height: ${this.height}%"></div>`;
	};

	let fishInstance = fishTemplate.bind({
		name: name,
		imageURL: imageURL,
		width: width,
		height: height,
		top: top,
		left: left
	})();
	return fishInstance;
}

function swimmingFishes() {
	//console.clear();
	let bodyOffsetWidth = document.body.offsetWidth;

	for (let fish of fishes) {
		let collision = collisionDetection(fish);
		collision.collision && newDirection(fish);
		changeFishDirection(fish);

		let directionHorizontal =
			fish.directionActual === "right" ||
			fish.directionActual === "downright" ||
			fish.directionActual === "upright"
				? 1
				: fish.directionActual === "left" ||
				  fish.directionActual === "downleft" ||
				  fish.directionActual === "upleft"
				? -1
				: 0;
		let directionVertical =
			fish.directionActual === "down" ||
			fish.directionActual === "downright" ||
			fish.directionActual === "downleft"
				? 1
				: fish.directionActual === "up" ||
				  fish.directionActual === "upright" ||
				  fish.directionActual === "upleft"
				? -1
				: 0;

		if (!collision.collision && fish.swimming == true) {
			fish.fishDiv.style.left =
				parseInt(fish.fishDiv.style.left) + directionHorizontal * fish.speed + "px";
			fish.fishDiv.style.top =
				parseInt(fish.fishDiv.style.top) + directionVertical * fish.speed + "px";
		}

		console.log({
			"FISH NAME": fish.name,
			"OFFSET LEFT": fish.fishDiv.offsetLeft,
			"STYLE LEFT": fish.fishDiv.style.left,
			"STYLE TOP": fish.fishDiv.style.top,
			"DIRECTION ACTUAL": fish.directionActual,
			SWIMMING: fish.swimming
		});
	}
}

function collisionDetection(fish) {
	let collision = false;
	let collisionType = false;

	if (parseInt(fish.fishDiv.style.top) <= 15) {
		console.log(
			fish.name + "%c Top Border Detected!",
			"font-size: 18px; background: black; color: red"
		);
		fish.fishDiv.style.top = "17px";
		collision = true;
		collisionType = "top";
	}
	if (
		parseInt(fish.fishDiv.style.top) >=
		fish.waterLayer.offsetHeight -
			parseInt(
				window.getComputedStyle(document.querySelector(`#${fish.name}`)).height
			)
	) {
		console.log(
			fish.name + "%c Bottom Border Detected!",
			"font-size: 18px; background: black; color: red"
		);
		fish.fishDiv.style.top =
			fish.waterLayer.offsetHeight -
			parseInt(
				window.getComputedStyle(document.querySelector(`#${fish.name}`)).height
			) -
			10 +
			"px";
		collision = true;
		collisionType = "bottom";
	}
	if (fish.fishDiv.offsetLeft <= 1) {
		console.log(
			fish.name + "%c Left Border Detected!",
			"font-size: 18px; background: black; color: red"
		);
		fish.fishDiv.style.left = "2px";
		collision = true;
		collisionType = "left";
	}
	if (
		fish.fishDiv.offsetLeft >=
		document.body.offsetWidth - fish.fishDiv.offsetWidth
	) {
		console.log(
			fish.name + "%c Right Border Detected!",
			"font-size: 18px; background: black; color: red"
		);
		fish.fishDiv.style.left =
			document.body.offsetWidth - fish.fishDiv.offsetWidth - 5 + "px";
		collision = true;
		collisionType = "right";
	}

	return { collision: collision, collisiontype: collisionType };
}

function newDirection(fish) {
	let oldDirection = fish.directionActual;
	let newestDirection =
		directions[Math.floor(Math.random() * directions.length)];
	let change = oldDirection != newestDirection ? true : false;
	console.log(
		fish.name +
			" OLD DIRECTION ::: " +
			oldDirection +
			" - NEW DIRECTION :::: " +
			newestDirection +
			" CHANGE ? ::: " +
			change
	);
	if (oldDirection != newestDirection) {
		fish.directionActual = newestDirection;
		console.log(
			fish.name + "%c DIRECTION WAS CHANGED : " + fish.directionActual,
			"background: darkgreen;color:white;"
		);
	}
}

function changeFishDirection(fish) {
	if (
		fish.directionActual === "left" ||
		fish.directionActual === "downleft" ||
		fish.directionActual === "upleft"
	) {
		fish.fishDiv.classList.add("horizontalflip");
	} else {
		fish.fishDiv.classList.remove("horizontalflip");
	}
}

function randomFishResting(set = 25) {
	for (let fish of fishes) {

		let randomSTOnumber = Math.floor(Math.random() * 50000);
		
		setTimeout(function () {
			
			if (fish.swimming != "never" && fish.swimming != "always") {
				
				let swimmStop = randomTrueFalse(set);
				swimmStop && console.log(fish.name + "%c SWIMMING STOPPED", "color: red;");
				!swimmStop &&
					console.log(fish.name + "%c SWIMMING RESTARTED", "color: darkgreen;");
				fish.swimming = swimmStop ? false : true;
			}
		
		} , randomSTOnumber);
	}
}

function randomFishDirectionChanging(set = 25) {
	for (let fish of fishes) {
		let directionchanging = randomTrueFalse(set);

		if (directionchanging) {
			console.log(fish.name + "%c RANDOM DIRECTION CHANGING", "color: orange;");
			newDirection(fish);
			changeFishDirection(fish);
		}
	}
}

function randomTrueFalse(percent) {
	return Math.random() < percent / 100;
}

createFishes();
setInterval(swimmingFishes, 250);
setInterval(randomFishResting, 10000);
setInterval(randomFishDirectionChanging, 10000);

style.css

body {
	margin: 0;
}
#container {
	background-image: url("https://i.imgur.com/rebi7Sw.jpg");
	background-color: lightblue;
	background-size: cover;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
}

#waterLayer1 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
}

#waterLayer2 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
}

#waterLayer3 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
}

.fish {
	position: absolute;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.verticalflip {
	-moz-transform: scale(1, -1);
	-webkit-transform: scale(1, -1);
	-o-transform: scale(1, -1);
	-ms-transform: scale(1, -1);
	transform: scale(1, -1);
}

.horizontalflip {
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

.doublehorizontalflip {
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
}