3/28/2020, 10:30HEADmaster

8 files changed, 471 insertions, 0 deletions

diff --git a/cars/.htaccess b/cars/.htaccess
new file mode 100644
index 0000000..45552cb
--- /dev/null
+++ b/cars/.htaccess
@@ -0,0 +1 @@
+Options -Indexes
\ No newline at end of file
diff --git a/cars/cars_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js b/cars/cars_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js
new file mode 100644
index 0000000..85fc223
--- /dev/null
+++ b/cars/cars_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js
@@ -0,0 +1 @@
+!function(){function n(){u(),t()}function t(){window.addEventListener?window.addEventListener("message",l,!1):window.attachEvent("onmessage",l)}function e(n){var t;try{t={}.toString.call(n)}catch(e){t="[object Object]"}return t}function r(n){return!!(n&&"object"==typeof n&&"nodeType"in n&&1===n.nodeType&&n.outerHTML)}function o(n,t){return n.toLowerCase()<t.toLowerCase()?-1:1}function c(n){if(null==n)return 1;var t,r=e(n);if("[object Number]"===r||"[object Boolean]"===r||"[object String]"===r)return 1;if("[object Function]"===r||"[object global]"===r)return 2;if("[object Object]"===r){var o=Object.keys(n);for(t=0;t<o.length;t++){var c=n[o[t]];if("[object Function]"===(u={}.toString.call(c))||"[object Object]"===u||"[object Array]"===u)return 2}return 1}if("[object Array]"===r){for(t=0;t<n.length;t++){var i=n[t],u={}.toString.call(i);if("[object Function]"===u||"[object Object]"===u||"[object Array]"===u)return 2}return 1}return 2}function i(n,t,r){var c,u,a="",l=[];if(r=r||"",t=t||[],null===n)return"null";if(void 0===n)return"undefined";if("[object Object]"==(a=e(n))&&(a="Object"),"[object Number]"==a)return""+n;if("[object Boolean]"==a)return n?"true":"false";if("[object Function]"==a)return n.toString().split("\n  ").join("\n"+r);if("[object String]"==a)return'"'+n.replace(/"/g,"'")+'"';for(u=0;u<t.length;u++)if(n===t[u])return"[circular "+a.slice(1)+("outerHTML"in n?" :\n"+n.outerHTML.split("\n").join("\n"+r):"");if(t.push(n),"[object Array]"==a){for(c=0;c<n.length;c++)l.push(i(n[c],t));return"["+l.join(", ")+"]"}if(a.match(/Array/))return a;var f=a+" ",s=r+"  ";if(r.length/2<2){var b=[];try{for(c in n)b.push(c)}catch(j){}for(b.sort(o),c=0;c<b.length;c++)try{l.push(s+b[c]+": "+i(n[b[c]],t,s))}catch(j){}}return l.length?f+"{\n"+l.join(",\n")+"\n"+r+"}":f+"{}"}function u(){if(window.console)for(var n=0;n<f.length;n++)!function(){var t=f[n];window.console[t]&&(window.console[t]=function(){for(var n=[].slice.call(arguments),e=[],o=[],u=0;u<n.length;u++)r(n[u])?(o.push(i(n[u].outerHTML)),e.push(1)):(o.push(i(n[u])),e.push(c(n[u])));s.postMessage(["console",{"function":t,arguments:o,complexity:Math.max.apply(null,e)}],"*"),this.apply(console,n)}.bind(console[t]))}()}function a(n){return!!n.origin.match(/codepen/)&&("object"==typeof n.data&&"command"===n.data.type)}function l(n){if(a(n)){var t=n.data.command;try{var e=window.eval(t)}catch(r){return void console.error(r.message)}console.log(e)}}var f=["log","error","warn","info","debug","table","time","timeEnd","count","clear"],s=window.parent;n()}();
\ No newline at end of file
diff --git a/cars/cars_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js b/cars/cars_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js
new file mode 100644
index 0000000..09e1dff
--- /dev/null
+++ b/cars/cars_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js
@@ -0,0 +1 @@
+!function(){function e(e){t(e),window.PrefixFree&&StyleFix.process()}function t(e){var t=n(),a=document.createElement("style");a.type="text/css",a.className="cp-pen-styles",a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e)),c.appendChild(a),t&&t.parentNode.removeChild(t)}function n(){for(var e=document.getElementsByTagName("style"),t=e.length-1;t>=0;t--)if("cp-pen-styles"===e[t].className)return e[t];return!1}function a(e){window.addEventListener?window.addEventListener("message",e,!1):window.attachEvent("onmessage",e)}function s(e,t){try{if(!/codepen/.test(e.origin))return null;if("object"!=typeof e.data)return null;if(e.data.action===t)return e.data}catch(n){}return null}var c=document.head||document.getElementsByTagName("head")[0],r="ACTION_LIVE_VIEW_RELOAD_CSS";a(function(t){var n=s(t,r);n&&e(n.data.css)})}();
\ No newline at end of file
diff --git a/cars/cars_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js b/cars/cars_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js
new file mode 100644
index 0000000..5193a70
--- /dev/null
+++ b/cars/cars_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js
@@ -0,0 +1 @@
+"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(e){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(o,"*")}else this._throwAnErrorToStopPen()}catch(t){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact [email protected]."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang\S+:(\d+):\d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;if(t-this._loopTimers[o]>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){var t=window.CP.PenTimer.shouldStopLoop(o);return!0===t&&console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"),t},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};
\ No newline at end of file
diff --git a/cars/css/main.css b/cars/css/main.css
new file mode 100644
index 0000000..3fc15da
--- /dev/null
+++ b/cars/css/main.css
@@ -0,0 +1,13 @@
+/* cp-pen-styles */
+html {
+    background: #ccc;
+}
+
+canvas {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
\ No newline at end of file
diff --git a/cars/favicon.png b/cars/favicon.png
new file mode 100644
index 0000000..aa511fc
--- /dev/null
+++ b/cars/favicon.png
diff --git a/cars/index.html b/cars/index.html
new file mode 100644
index 0000000..97f327d
--- /dev/null
+++ b/cars/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en" class="">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <!-- Site metadata -->
+    <meta name="description" content="Cars">
+    <meta property="og:description" content="Cars">
+    <meta property="og:title" content="s1nical - Cars">
+    <meta property="twitter:card" content="summary">
+    <meta property="twitter:site" content="@9inny">
+    <meta property="og:image" content="">
+    <meta property="og:url" content="https://cyne.cf/cars">
+    <link rel="apple-touch-icon" sizes="128x128" href="/favicon.jpg">
+    <link rel="icon" type="image/jpg" href="/favicon.jpg" sizes="128x128">
+    <link rel="canonical" href="https://cyne.cf/cars">
+    <link rel="author" href="humans.txt" />
+    <!-- Schema.org Stuff -->
+    <script type="application/ld+json">
+        {
+        "name": "s1nical",
+        "alternateName": "s1n",
+        "description": "Cars",
+        "headline": "Cars",
+        "url": "https://cyne.cf/cars",
+        "image": "",
+        "sameAs": [
+        "https://twitter.com/9inny",
+        "https://github.com/8cy",
+        "https://www.reddit.com/user/s1nical/"
+        ],
+        "publisher": {
+        "@type": "Organization",
+        "logo": {
+        "@type": "ImageObject",
+        "url": ""
+        }
+        },
+        "@type": "WebSite",
+        "@context": "http://schema.org"
+        }
+    </script>
+    <!-- External Libraries -->
+    <script src="/cars/cars_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js"></script>
+    <script src="/cars/cars_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
+    <meta name="robots" content="noindex">
+    <!-- CSS Links -->
+    <link rel="stylesheet" href="/cars/css/main.css">
+    <title>s1nical - Cars</title>
+    <!-- Visable Scripts -->
+    <script src="/js/redirect-to-mobile.js"></script>
+</head>
+
+  <body>
+    
+    <script src="/cars/cars_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js"></script>
+    <script src="/cars/js/main.js"></script>
+
+    <canvas id="defaultCanvas0" width="1536" height="937" style="width: 1536.68px; height: 937px;"></canvas>
+    
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/cars/js/main.js b/cars/js/main.js
new file mode 100644
index 0000000..c8c88fc
--- /dev/null
+++ b/cars/js/main.js
@@ -0,0 +1,387 @@
+// Visable JavaScript
+class Wall {
+    constructor(x, y, w, h, a) {
+      var options = {
+        friction: 0.5,
+        restitution: 0.5,
+        angle: a,
+        isStatic: true
+      };
+
+      this.body = Bodies.rectangle(x, y, w, h, options);
+      this.w = w;
+      this.h = h;
+      World.add(world, this.body);
+    }
+  }
+
+
+  class Ball {
+    constructor() {
+      this.position = createVector(width / 2, height / 2);
+      this.radius = width / 32;
+      const options = {
+        restitution: 0.9,
+        friction: 0.001,
+        density: 0.0001
+      };
+
+      this.body = Bodies.circle(
+        this.position.x, this.position.y, this.radius / 2, options);
+
+      World.add(world, this.body);
+    }
+
+    didScore() {
+      const [x, y] = [this.body.position.x, this.body.position.y];
+      const topOfGoalY = height / 2 + goalHeight / 2;
+      const bottomOfGoalY = height / 2 - goalHeight / 2;
+      const withinGoalRange = y < topOfGoalY && y > bottomOfGoalY;
+      if (withinGoalRange) {
+        return x <= this.radius / 2 || x >= width - this.radius / 2;
+      }
+      return false;
+    }
+
+    render() {
+      this.position.x = this.body.position.x;
+      this.position.y = this.body.position.y;
+
+      push();
+      translate(this.body.position.x, this.body.position.y);
+      rotate(this.body.angle);
+      fill(173, 255, 47);
+      ellipse(0, 0, this.radius);
+      fill(54);
+      ellipse(0, 0, this.radius / 3);
+      line(-this.radius / 2, 0, this.radius / 2, 0);
+      pop();
+    }
+  }
+
+
+  class Car {
+    constructor(paintColor, startX) {
+      const startY = startX < width / 2 ? height / 4 : 3 * height / 4;
+      this.position = createVector(startX, startY);
+      this.width = width / 36;
+      this.length = this.width * 2;
+      this.isAccelerating = false;
+      this.rotation = 0; // If you set this to 100, it goes wack lmao 9/15/2019
+      this.color = paintColor;
+      this.history = [];
+      const options = {
+        density: 0.01,
+        friction: 0.0, // Usually 0.2 but Jared wanted to move easier 9/15/2019
+        mass: 50
+      };
+      this.body = Bodies.rectangle(
+        this.position.x, this.position.y, this.length, this.width, options);
+
+      World.add(world, this.body);
+      if (startX > width / 2) {
+        Body.setAngle(this.body, PI);
+      }
+    }
+
+    update() {
+      if (this.isAccelerating) {
+        this.accelerate();
+      }
+      this.rotate(this.rotation);
+      this.history.push([this.body.position.x, this.body.position.y]);
+      if (this.history.length > exaustClouds) {
+        this.history.splice(0, 1);
+      }
+      this.position.x = this.body.position.x;
+      this.position.y = this.body.position.y;
+    }
+
+    accelerating(isAccelerating) {
+      this.isAccelerating = isAccelerating;
+    }
+
+    accelerate() {
+      var force = p5.Vector.fromAngle(this.body.angle);
+      force.mult(0.02);
+      Body.applyForce(this.body, this.body.position, force);
+    }
+
+    rotate(rotation) {
+      this.rotation = rotation;
+      Body.setAngularVelocity(this.body, rotation);
+    }
+
+    pointTowardsBall() {
+      const desired = p5.Vector.sub(ball.position, this.position);
+      const angle = desired.heading();
+      Body.setAngle(this.body, angle);
+    }
+
+    render() {
+      var angle = this.body.angle;
+      push();
+      rectMode(CENTER);
+      translate(this.body.position.x, this.body.position.y);
+      rotate(angle);
+      // Car Tires
+      fill(54);
+      ellipse(this.length / 3, -this.width / 2, this.width / 4, this.width / 8);
+      ellipse(this.length / 3, this.width / 2, this.width / 4, this.width / 8);
+      ellipse(-this.length / 3, -this.width / 2, this.width / 4, this.width / 8);
+      ellipse(-this.length / 3, this.width / 2, this.width / 4, this.width / 8);
+      // Car Body
+      fill(this.color);
+      rect(0, 0, this.length, this.width, 5);
+      fill(54);
+      rect(-this.length / 24, 0, 0.7 * this.length, 0.8 * this.width, 5);
+      fill(this.color);
+      rect(-this.length / 12, 0, 0.45 * this.length, 0.6 * this.width, 5);
+      // Car Headlights
+      fill(255, 255, 200);
+      ellipse(this.length / 2, -this.width / 3, this.width / 8, this.width / 4);
+      ellipse(this.length / 2, this.width / 3, this.width / 8, this.width / 4);
+      pop();
+      push();
+      noStroke();
+      const carWidth = this.width;
+      this.history.forEach(function (h, i) {
+        const [x, y] = h;
+        push();
+        translate(x, y);
+        rotate(angle);
+        fill(54, i);
+        ellipse(-carWidth, 0, exaustClouds - i + random(-10, 10), exaustClouds - i + random(-3, 3));
+        pop();
+      });
+      pop();
+    }
+  }
+
+
+  class Spark {
+    constructor(x, y, xVel) {
+      this.pos = createVector(x, y);
+      this.lifespan = 255;
+
+      this.vel = createVector(random(0, xVel), random(-xVel, xVel));
+      // Get Direction
+      this.vel.normalize();
+      // Add Random Speed
+      this.vel.mult(random(0, 20));
+      this.fill = [random(255), random(255), random(255)];
+    }
+
+    update() {
+      this.vel.mult(0.95);
+      this.lifespan -= 5;
+      this.pos.add(this.vel);
+    }
+
+    done() {
+      return this.lifespan < 0;
+    }
+
+    render() {
+      if (!this.done()) {
+        noStroke();
+        fill(this.fill, this.lifespan);
+        rect(this.pos.x, this.pos.y, this.lifespan / 20, this.lifespan / 20, 3);
+      }
+    }
+  }
+
+
+  const Engine = Matter.Engine;
+  const World = Matter.World;
+  const Bodies = Matter.Bodies;
+  const Body = Matter.Body;
+
+  let engine;
+  let world;
+
+  const exaustClouds = 25; // Set this to anything above 50, it goes wild 9/15/2019
+  let car;
+  let computerCar;
+  let ball;
+
+  // Goal Explosion Effect
+  let sparks = [];
+
+  let goalHeight;
+  let goalWaitPeriod = false;
+
+  let playerScore = 0;
+  let computerScore = 0;
+
+  function setup() {
+    const h = min(window.innerHeight, window.innerWidth * 0.61);
+    // keep field dimensions nice :)
+    const w = min(window.innerWidth, h * 1.64);
+
+    createCanvas(w, h);
+
+    goalHeight = width / 6;
+
+    engine = Engine.create();
+    world = engine.world;
+
+    // Disable matter.js Gravity
+    engine.world.gravity.y = 0;
+
+    addWalls();
+
+    const redHexVals = [255, 100, 100];
+    const playerStartX = width / 4;
+    car = new Car(redHexVals, playerStartX);
+    const blueHexVals = [100, 100, 255];
+    const computerStartX = 3 * width / 4;
+    computerCar = new Car(blueHexVals, computerStartX);
+
+    ball = new Ball();
+  }
+
+  function keyReleased() {
+    if (keyCode == 87) { // UP_ARROW
+      car.accelerating(false);
+    } else if (keyCode == 68 || keyCode == 65) { // RIGHT_ARROW, LEFT_ARROW
+      car.rotate(0);
+    }
+  }
+
+  // TODO: Add multiple key layout functionality, eg. both WASD and arrow keys.
+
+  function keyPressed() {
+    if (keyCode == 68) { // RIGHT_ARROW
+      car.rotate(PI / 72);
+    } else if (keyCode == 65) { // LEFT_ARROW
+      car.rotate(-PI / 72);
+    } else if (keyCode == 87) { // UP_ARROW
+      car.accelerating(true);
+    }
+  }
+
+  function draw() {
+    if (goalWaitPeriod) {
+      // Screen Shakes On Goal (User feedback)
+      translate(random(-13, 13), random(-13, 13));
+    }
+
+    drawSoccerField();
+
+    Engine.update(engine);
+
+    car.render();
+    car.update();
+
+    computerCar.render();
+    computerCar.update();
+
+    computerCar.accelerating(true);
+    computerCar.pointTowardsBall();
+
+
+    ball.render();
+    if (ball.didScore()) {
+      const [x, y] = [ball.body.position.x, ball.body.position.y];
+      x < width / 2 ? computerScore++ : playerScore++;
+      shootSparks(x, y);
+      Body.setPosition(ball.body, {
+        x: width / 2,
+        y: height / 2
+      });
+      Body.setVelocity(ball.body, {
+        x: 0,
+        y: 0
+      });
+      goalWaitPeriod = true;
+      setTimeout(function () {
+        goalWaitPeriod = false;
+      }, 1000);
+    }
+
+    textSize(18);
+    noStroke();
+    fill(255, 100, 100);
+    text("Player", width / 2 - 100, height / 16);
+    fill(100, 100, 255);
+    text("Computer", width / 2 + 50, height / 16);
+    fill(4);
+    textSize(48);
+    text(playerScore, width / 2 - 88, height / 6);
+    text(computerScore, width / 2 + 78, height / 6);
+
+    if (goalWaitPeriod) {
+      fill(random(255), random(255), random(255));
+      textSize(64);
+      text("GOOOOOOAL", width / 2 - 200, height / 2);
+    }
+
+    // Update, show, and delete sparks for goals
+    goSparksGo();
+
+  }
+
+  function shootSparks(x, y) {
+    // Shoot sparks in opposite direction (towards middle)
+    const xVel = x < width / 2 ? 10 : -10;
+    const xPos = x < width / 2 ? 0 : width;
+    for (var i = 0; i < 50; i++) {
+      if (window.CP.shouldStopExecution(0)) break;
+      var s = new Spark(xPos, y, xVel);
+      sparks.push(s);
+    }
+    window.CP.exitedLoop(0);
+  }
+
+  function goSparksGo() {
+    // Go backwards through array in case we splice (will break if forwards) <- lol
+    for (var i = sparks.length - 1; i >= 0; i--) {
+      if (window.CP.shouldStopExecution(1)) break;
+      sparks[i].update();
+      sparks[i].render();
+      if (sparks[i].done()) {
+        sparks.splice(i, 1);
+      }
+    }
+    window.CP.exitedLoop(1);
+  }
+
+  function drawSoccerField() {
+    background(254);
+    noFill();
+    stroke(55);
+    strokeWeight(1);
+
+    // Center Field Line
+    line(width / 2, 0, width / 2, height);
+    ellipse(width / 2, height / 2, width / 6);
+
+    // left Goalie Box
+    rect(0, height / 2 - width / 6, width / 6, width / 3);
+    stroke(255, 100, 100);
+    rect(0, height / 2 - width / 12, width / 18, goalHeight);
+    strokeWeight(10);
+    line(0, height / 2 - width / 12, 0, height / 2 - width / 12 + goalHeight);
+    // Right Goalie Box
+    strokeWeight(1);
+    stroke(0);
+    rect(width - width / 6, height / 2 - width / 6, width / 6, width / 3);
+    stroke(100, 100, 255);
+    rect(width - width / 18, height / 2 - width / 12, width / 18, goalHeight);
+    strokeWeight(10);
+    line(width, height / 2 - width / 12, width, height / 2 - width / 12 + goalHeight);
+    strokeWeight(1);
+    stroke(0);
+  }
+
+  function addWalls() {
+    const wallThickness = 500;
+    const wt2 = wallThickness / 2;
+
+    bottomWall = new Wall(width / 2, height + wt2, width, wallThickness, 0);
+    topWall = new Wall(width / 2, -wt2, width, wallThickness, 0);
+
+    leftWall = new Wall(-wt2, height / 2, height, wallThickness, PI / 2);
+    rightWall = new Wall(width + wt2, height / 2, height, wallThickness, PI / 2);
+  }
\ No newline at end of file