diff options
| author | fruitberry <[email protected]> | 2019-05-28 21:12:52 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2019-05-28 21:12:52 -0700 |
| commit | 4c1f5efc44aef34b5a99f41d94e434eb98409cf5 (patch) | |
| tree | 057a762dd77a7b3026fc7d62a52e99341d1e0820 /index.html | |
| parent | upload core files (diff) | |
| download | 2d-car-game-4c1f5efc44aef34b5a99f41d94e434eb98409cf5.tar.xz 2d-car-game-4c1f5efc44aef34b5a99f41d94e434eb98409cf5.zip | |
rename index file
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 387 |
1 files changed, 387 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..f84f62d --- /dev/null +++ b/index.html @@ -0,0 +1,387 @@ +<!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>
|