MASS update assets

author: s1nical <[email protected]> 2019-07-30 16:53:34 -0700
committer: s1nical <[email protected]> 2019-07-30 16:53:34 -0700
commit: 47cb950049bbe6f80060cac5b01f4b8c8afcb803 (patch)
tree: 73f9e472f1f679a8b8728ca50c195cc9fab62fab
parent: Update README.md (diff)
download: 2d-car-game-47cb950049bbe6f80060cac5b01f4b8c8afcb803.tar.xz
2d-car-game-47cb950049bbe6f80060cac5b01f4b8c8afcb803.zip
9 files changed, 423 insertions, 386 deletions
diff --git a/zoned.rf.gd_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js.download b/cars_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js.download
index 85fc223..85fc223 100644
--- a/zoned.rf.gd_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js.download
+++ b/cars_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js.download
diff --git a/zoned.rf.gd_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js.download b/cars_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js.download
index 09e1dff..09e1dff 100644
--- a/zoned.rf.gd_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js.download
+++ b/cars_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js.download
diff --git a/zoned.rf.gd_files/matter.min.js.download b/cars_files/matter.min.js.download
index 46eafe8..46eafe8 100644
--- a/zoned.rf.gd_files/matter.min.js.download
+++ b/cars_files/matter.min.js.download
diff --git a/zoned.rf.gd_files/p5.min.js.download b/cars_files/p5.min.js.download
index 7cc3cf4..7cc3cf4 100644
--- a/zoned.rf.gd_files/p5.min.js.download
+++ b/cars_files/p5.min.js.download
diff --git a/zoned.rf.gd_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js.download b/cars_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js.download
index 5193a70..5193a70 100644
--- a/zoned.rf.gd_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js.download
+++ b/cars_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js.download
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..3fc15da
--- /dev/null
+++ b/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/favicon.png b/favicon.png
new file mode 100644
index 0000000..aa511fc
--- /dev/null
+++ b/favicon.png
diff --git a/index.html b/index.html
index f84f62d..3a3070a 100644
--- a/index.html
+++ b/index.html
@@ -1,387 +1,25 @@
 <!DOCTYPE html>
-<!-- saved from url=(0022)http://zoned.rf.gd/ -->
-<html lang="en" class=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="./zoned.rf.gd_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js.download"></script><script src="./zoned.rf.gd_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js.download"></script><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico"><link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111"><link rel="canonical" href="https://codepen.io/fleemaja/pen/rzeEWE">
-
-
-<style class="cp-pen-styles">html {
-  background: #ccc;
-}
-
-canvas {
-  position: absolute;
-  top:0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-}</style><link id="avast_os_ext_custom_font" href="chrome-extension://eofcbnmajmjmplflapaojjnihcjkigck/common/ui/fonts/fonts.css" rel="stylesheet" type="text/css"></head><body>
-
-<script src="./zoned.rf.gd_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js.download"></script><script src="./zoned.rf.gd_files/p5.min.js.download"></script><script src="./zoned.rf.gd_files/matter.min.js.download"></script>
-        <script id="rendered-js">
-          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;
-    this.color = paintColor;
-    this.history = [];
-    const options = { density: 0.01, friction: 0.2, 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);
-    // 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);
-    // 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));
-    // we just want the direction
-    this.vel.normalize();
-    // then 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;
-let car;
-let computerCar;
-let ball;
-
-// for 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 == UP_ARROW) {
-    car.accelerating(false);
-  } else if (keyCode == RIGHT_ARROW || keyCode == LEFT_ARROW) {
-    car.rotate(0);
-  }
-}
-
-function keyPressed() {
-  if (keyCode == RIGHT_ARROW) {
-    car.rotate(PI / 72);
-  } else if (keyCode == LEFT_ARROW) {
-    car.rotate(-PI / 72);
-  } else if (keyCode == 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)
-  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);
-}
-          //# sourceURL=pen.js
-        </script>
-<canvas id="defaultCanvas0" width="1536" height="937" style="width: 1536.68px; height: 937px;"></canvas></body></html>
+<html lang="en" class="">
+
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script src="./cars_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js.download"></script>
+    <script src="./cars_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js.download"></script>
+    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
+    <meta name="robots" content="noindex">
+    <link rel="stylesheet" href="css/main.css">
+    <title>s1nical - Cars</title>
+  </head>
+
+  <body>
+    
+    <script src="./cars_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js.download"></script>
+    <script src="./cars_files/p5.min.js.download"></script>
+    <script src="./cars_files/matter.min.js.download"></script>
+    <script src="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/js/main.js b/js/main.js
new file mode 100644
index 0000000..5cf12fb
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,386 @@
+// rendered-js
+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;
+      this.color = paintColor;
+      this.history = [];
+      const options = {
+        density: 0.01,
+        friction: 0.2,
+        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);
+      // 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);
+      // 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));
+      // we just want the direction
+      this.vel.normalize();
+      // then 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;
+  let car;
+  let computerCar;
+  let ball;
+
+  // for 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 == UP_ARROW) {
+      car.accelerating(false);
+    } else if (keyCode == RIGHT_ARROW || keyCode == LEFT_ARROW) {
+      car.rotate(0);
+    }
+  }
+
+  function keyPressed() {
+    if (keyCode == RIGHT_ARROW) {
+      car.rotate(PI / 72);
+    } else if (keyCode == LEFT_ARROW) {
+      car.rotate(-PI / 72);
+    } else if (keyCode == 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)
+    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);
+  }
+  //# sourceURL=pen.js
+\ No newline at end of file
author	s1nical <[email protected]>	2019-07-30 16:53:34 -0700
committer	s1nical <[email protected]>	2019-07-30 16:53:34 -0700
commit	47cb950049bbe6f80060cac5b01f4b8c8afcb803 (patch)
tree	73f9e472f1f679a8b8728ca50c195cc9fab62fab
parent	Update README.md (diff)
download	2d-car-game-47cb950049bbe6f80060cac5b01f4b8c8afcb803.tar.xz 2d-car-game-47cb950049bbe6f80060cac5b01f4b8c8afcb803.zip