The Fly
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 - 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); };
}())
Developer | Gianluca Guarini |
Username | GianlucaGuarini |
Uploaded | November 04, 2022 |
Rating | 3.5 |
Size | 3,405 Kb |
Views | 16,192 |
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!
Name | Size |
The Dark Loop | 4,130 Kb |
Blurred Scrollable Overlay | 3,413 Kb |
Full screen menu | 3,702 Kb |
Drunk on Google Maps | 2,241 Kb |
Mario Bros | 4,332 Kb |
EasyAnimationFrame.js | 2,382 Kb |
The 3D Worrying Cubes | 103,249 Kb |
The Fly | 3,405 Kb |
Css3D Wall | 2,441 Kb |
Riot simple movies live search | 3,501 Kb |
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!
Name | Username | Size |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
After America | Jonathangarner | 2,686 Kb |
Under construction | GhostRider | 1,642 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
ASCII triangle image overlay | Mitchdot | 2,200 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!