The Fly

Developer
Gianluca Guarini
Size
3,405 Kb
Views
16,192
  1. The Fly Previews
  2. The Fly HTML Codes
  3. The Fly CSS Codes
  4. The Fly JS Codes

How do I make an the fly?

An HTML5 mini game supersmall I made for fun. What is a the fly? How do you make a the fly? This script and codes were developed by Gianluca Guarini on 04 November 2022, Friday.

The Fly Previews
IQ Test

The Fly - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Fly</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<link href='https://fonts.googleapis.com/css?family=Hanalei+Fill' rel='stylesheet' type='text/css'>
<canvas width="666" height="333"></canvas> <script src="js/index.js"></script>
</body>
</html>

The Fly - Script Codes CSS Codes

body { margin: 0; background: black;
}
canvas { background: white; position: absolute; left: 50%; top: 50%; margin: -166.5px 0 0 -333px; border: 1px solid black;
}

The Fly - Script Codes JS Codes

(function () {	'use strict';	Object.getOwnPropertyNames(window.Math).forEach(function (method) {	window[method] = Math[method];	});	function moveObj(obj) {	obj.x += cos(obj.angle) * obj.speed;	obj.y += sin(obj.angle) * obj.speed;	}	function toRadians(angle) {	return angle * PI / 180;	}	var canvas = document.querySelectorAll('canvas')[0],	ctx = canvas.getContext('2d'),	mouse = {	x: 0,	y: 0,	isDown: false	},	isTouch = "ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch,	count = 0,	ninetyDegrees = toRadians(90),	flies = [];	function Fly() {	this.x = random() * canvas.width * 0.8;	this.y = random() * canvas.height * 0.8;	this.size = 15;	this.speed = random() * 3;	this.angle = toRadians(random() * 360);	this.killed = false;	this.fade = 1;	var blood = [],	lastUpdate = new Date().getTime();	this.draw = function (now) {	this.halfSize = this.size / 2;	if (this.killed) {	if (!blood.length) {	var i = 40;	while (i--) {	blood.push({	x: this.x + this.halfSize,	y: this.y + this.halfSize,	speed: random() * 3,	size: random() * this.halfSize,	angle: toRadians(random() * 360)	})	}	}	var _this = this;	blood.forEach(function (p) {	moveObj(p);	ctx.save();	ctx.translate(p.x + p.size / 2, p.y - p.size / 2);	ctx.rotate(p.angle);	ctx.beginPath();	ctx.fillStyle = 'rgba(255,0,0,' + _this.fade + ')';	ctx.rect(0, 0, p.size, p.size);	ctx.fill();	ctx.closePath();	ctx.restore();	});	this.fade -= 0.05;	} else {	this.delta = lastUpdate - now;	if (this.delta <= 0) {	this.angle += toRadians((random() * 360) - 180);	lastUpdate = now + random() * 500 + 500;	} else if (this.x <= 0 || this.x >= canvas.width || this.y <= 0 || this.y >= canvas.height) {	this.angle -= toRadians(180);	}	ctx.save();	ctx.translate(this.x + this.halfSize, this.y + this.halfSize);	ctx.rotate(this.angle + ninetyDegrees);	ctx.beginPath();	ctx.fillStyle = 'rgba(0,0,0,0.7)';	ctx.rect(-this.halfSize, -this.halfSize, this.size, this.size);	ctx.fill();	ctx.closePath();	var flyFactor = random() * 7;	ctx.beginPath();	ctx.fillStyle = 'rgba(0,0,0,0.2)';	ctx.rect(-10 - this.halfSize, -flyFactor + 7 - this.halfSize, this.size, this.size / 2);	ctx.rect(+10 - this.halfSize, -flyFactor + 7 - this.halfSize, this.size, this.size / 2);	ctx.fill();	ctx.closePath();	ctx.restore();	}	};	}	function render() {	var now = new Date().getTime();	ctx.clearRect(0, 0, canvas.width, canvas.height);	ctx.fillStyle = 'rgb(' + (count * 20 < 255 ? (count * 20) : 255) + ',0,0)';	ctx.fillText('F1ies K!ll3d: ' + count, 66, 33);	flies.forEach(function (fly, i) {	moveObj(fly);	if (	mouse.isDown &&	mouse.x > fly.x &&	mouse.x < fly.x + fly.size &&	mouse.y > fly.y &&	mouse.y < fly.y + fly.size) {	fly.killed = true;	}	fly.draw(now);	if (fly.fade <= 0) {	flies.splice(i, 1);	flies.push(new Fly());	count++;	flies.forEach(function (_fly) {	_fly.speed += count * 0.01;	})	}	});	mouse.isDown = false;	requestAnimationFrame(render);	}	var i = 10;	while (i--) {	flies.push(new Fly());	}	window.addEventListener(isTouch ? 'touchstart' : 'mousedown', function (e) {	e.preventDefault();	var pointer = isTouch ? e.touches[0] : e;	mouse.x = pointer.pageX - (canvas.offsetLeft - canvas.scrollLeft);	mouse.y = pointer.pageY - (canvas.offsetTop - canvas.scrollTop);	mouse.isDown = true;	});	window.addEventListener(isTouch ? 'touchend' : 'mouseup', function () {	mouse.isDown = false;	});	window.onload = function () {	ctx.font = '28px "Hanalei Fill"';	ctx.textAlign = 'center';	ctx.fillStyle = 'rgb(255,0,0)';	ctx.fillText('K!ll th3m 4ll!', 333, 166.5);	ctx.font = '18px "Hanalei Fill"';	setTimeout(render, 3000);	};
}())
The Fly - Script Codes
The Fly - Script Codes
Home Page Home
Developer Gianluca Guarini
Username GianlucaGuarini
Uploaded November 04, 2022
Rating 3.5
Size 3,405 Kb
Views 16,192
Do you need developer help for The Fly?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gianluca Guarini (GianlucaGuarini) Script Codes
Name
Riot simple movies live search
A Pen by Gianluca Guarini
Colored Wall
The 3D Worrying Cubes
Mario Bros
Riot and es6
Full screen menu
The Best Flash Site Ever
Appletv
The Milk Glass
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!