From 9be73c2d0f21a539bc46974139e8c36c12845ca0 Mon Sep 17 00:00:00 2001 From: Fbenas Date: Sun, 20 Sep 2020 22:08:03 +0100 Subject: Initial commit --- public/.htaccess | 21 ++++++ public/css/app.css | 10 +++ public/favicon.ico | 0 public/index.php | 55 ++++++++++++++ public/js/app.js | 186 +++++++++++++++++++++++++++++++++++++++++++++++ public/mix-manifest.json | 4 + public/robots.txt | 2 + public/web.config | 28 +++++++ 8 files changed, 306 insertions(+) create mode 100644 public/.htaccess create mode 100644 public/css/app.css create mode 100644 public/favicon.ico create mode 100644 public/index.php create mode 100644 public/js/app.js create mode 100644 public/mix-manifest.json create mode 100644 public/robots.txt create mode 100644 public/web.config (limited to 'public') diff --git a/public/.htaccess b/public/.htaccess new file mode 100644 index 0000000..3aec5e2 --- /dev/null +++ b/public/.htaccess @@ -0,0 +1,21 @@ + + + Options -MultiViews -Indexes + + + RewriteEngine On + + # Handle Authorization Header + RewriteCond %{HTTP:Authorization} . + RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] + + # Redirect Trailing Slashes If Not A Folder... + RewriteCond %{REQUEST_FILENAME} !-d + RewriteCond %{REQUEST_URI} (.+)/$ + RewriteRule ^ %1 [L,R=301] + + # Send Requests To Front Controller... + RewriteCond %{REQUEST_FILENAME} !-d + RewriteCond %{REQUEST_FILENAME} !-f + RewriteRule ^ index.php [L] + diff --git a/public/css/app.css b/public/css/app.css new file mode 100644 index 0000000..4c6d674 --- /dev/null +++ b/public/css/app.css @@ -0,0 +1,10 @@ +.container { + display: flex; + justify-content: center; +} + +canvas { + border: 1px solid #d3d3d3; + background-color: #f1f1f1; +} + diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..e69de29 diff --git a/public/index.php b/public/index.php new file mode 100644 index 0000000..a8137b1 --- /dev/null +++ b/public/index.php @@ -0,0 +1,55 @@ +make(Kernel::class); + +$response = tap($kernel->handle( + $request = Request::capture() +))->send(); + +$kernel->terminate($request, $response); diff --git a/public/js/app.js b/public/js/app.js new file mode 100644 index 0000000..b50828e --- /dev/null +++ b/public/js/app.js @@ -0,0 +1,186 @@ +class Component { + + constructor(radius, color, x, y, direction) { + this.perceptionDistance = 20; + this.turnStepAmount = 5; + this.collisionTurnStepAmount = 20; + this.stepAmount = 1; + this.radius = radius; + this.x = x; + this.y = y; + this.direction = direction; + this.color = color; + } + + move(context) { + this.direction += Math.random() * (2 * this.turnStepAmount) - this.turnStepAmount + var localDirection = this.direction; + // first we need to work out if we detect any walls + var perceptionVector = this.detectionPoint(this.x, this.y, this.perceptionDistance, localDirection); + + while (perceptionVector.x < 0 || perceptionVector.y < 0 || perceptionVector.x > context.canvas.width || perceptionVector.y > context.canvas.height) { + localDirection += Math.random() * (2 * this.collisionTurnStepAmount) - this.collisionTurnStepAmount + perceptionVector = this.detectionPoint(this.x, this.y, this.perceptionDistance, localDirection); + } + + // Here we should now have a new vector that's not clipping + this.direction = localDirection; + var vector = this.detectionPoint(this.x, this.y, this.stepAmount, this.direction); + + + this.x = vector.x; + this.y = vector.y; + this.update(context); + } + + update(context) { + context.beginPath(); + context.fillStyle = "blue"; + context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); + context.stroke(); + + context.restore(); + context.beginPath(); + this.lineToAngle(context, this.x, this.y, this.perceptionDistance, this.direction); + context.lineWidth = 1; + // context.stroke(); + + context.restore(); + } + + lineToAngle(context, x1, y1, length, angle) { + + angle *= Math.PI / 180; + + var x2 = x1 + length * Math.cos(angle), + y2 = y1 + length * Math.sin(angle); + + context.moveTo(x1, y1); + context.lineTo(x2, y2); + + return { + x: x2, + y: y2 + }; + } + + detectionPoint(x1, y1, length, angle) { + + angle *= Math.PI / 180; + + var x2 = x1 + length * Math.cos(angle), + y2 = y1 + length * Math.sin(angle); + + return { + x: x2, + y: y2 + }; + } + +} + +class GameArea { + + constructor(canvas_width, canvas_height) { + this.canvas = document.createElement("canvas"); + this.canvas_width = canvas_width; + this.canvas_height = canvas_height; + } + + init() { + this.canvas.width = this.canvas_width; + this.canvas.height = this.canvas_height; + this.context = this.canvas.getContext("2d"); + document.getElementById('container').appendChild(this.canvas); + } + + clear() { + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + } + +} + +class Scene { + + constructor(component_size, no_of_components) { + this.component_size = component_size; + this.no_of_components = no_of_components; + this.components = new Array; + this.gameArea = {}; + this.initGameArea(); + this.initComponents(); + this.started = false; + } + + initComponents() { + for (let i = 0; i < this.no_of_components; i++) { + let new_component = new Component( + this.component_size, + "black", + Math.random() * this.gameArea.canvas.width, + Math.random() * this.gameArea.canvas.height, + Math.random() * 360 + ); + this.components.push(new_component); + } + } + + initGameArea() { + this.gameArea = new GameArea(600, 600); + this.gameArea.init() + } + + start() { + if (this.started) { + return; + } + + // Kinda annoying, setInterval is a piece of shite and is always run from global scope + // Therefore "this.update" will be undefined unless we bind it + const updateMe = this.update.bind(this); + this.interval = setInterval(updateMe, 5); + this.started = true; + } + + update() { + this.gameArea.clear(); + for (let i = 0; i < this.no_of_components; i++) { + this.components[i].move(this.gameArea.context); + } + } + + stop() { + if (!this.started) { + return; + } + + clearInterval(this.interval); + this.interval = null; + this.started = false; + } + + reset() { + if (this.started) { + this.stop(); + } + this.components = new Array; + this.initComponents(); + this.gameArea.clear(); + this.started = false; + } + +} + +let scene = new Scene(2, 500); + +function stop() { + scene.stop(); +} + +function start() { + scene.start(); +} + +function reset() { + scene.reset(); +} diff --git a/public/mix-manifest.json b/public/mix-manifest.json new file mode 100644 index 0000000..076abf5 --- /dev/null +++ b/public/mix-manifest.json @@ -0,0 +1,4 @@ +{ + "/css/app.css": "/css/app.css", + "/js/app.js": "/js/app.js" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..eb05362 --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: diff --git a/public/web.config b/public/web.config new file mode 100644 index 0000000..d3711d7 --- /dev/null +++ b/public/web.config @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3