diff options
Diffstat (limited to 'cars')
| -rw-r--r-- | cars/.htaccess | 1 | ||||
| -rw-r--r-- | cars/cars_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js | 1 | ||||
| -rw-r--r-- | cars/cars_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js | 1 | ||||
| -rw-r--r-- | cars/cars_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js | 1 | ||||
| -rw-r--r-- | cars/css/main.css | 13 | ||||
| -rw-r--r-- | cars/favicon.png | bin | 0 -> 6098 bytes | |||
| -rw-r--r-- | cars/index.html | 67 | ||||
| -rw-r--r-- | cars/js/main.js | 387 |
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 Binary files differnew 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 |
