3/28/2020, 10:30HEADmaster

1 files changed, 387 insertions, 0 deletions

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