Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Car Crash [GAME]
ID	5153813817671680
Created	4 years ago, 1612817888813
Updated	4 years ago, 1617479823038
Code	<!DOCTYPE html> <!-- Version of HTML --> <!-- Car Crash - By Tanmay N. Instructions are on the How page, but additional info - detroying cars with the inferno powerup gives you points, but neither the inferno nor shield powerups defend you from missiles. Subscribe here - https://www.khanacademy.org/cs/tn/4762104903188480 Sorry, this game is super rushed. Attempted to use API for scores, but it wouldn't work. :( UPDATE 2/12/2021 - Fixed nuke warnings. Do not include this while judging, judges. --> <!-- HTML Tag - Starts Code --> <html> <!-- Head Tag - Setup and Styling --> <head> <!-- Meta Tag - Webpage Setup --> <meta charset = "utf-8"> <!-- Title Tag - Title --> <title>Car Crash [GAME]</title> <!-- Start Google Font Importer --> <link rel = "preconnect" href = "https://fonts.gstatic.com"> <!-- Import Font Montserrat --> <link href = "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel = "stylesheet"> <!-- Style Tag - CSS --> <style> /* Tag body Styling / body { margin: 0px 0px 0px 0px; overflow: hidden; } / Id my-canvas Styling / #my-canvas { position: absolute; top: 0px; left: 0px; } / Class resize-div Styling / .resize-div { display: none; font-family: "Montserrat"; font-size: 20px; padding: 15px 15px 15px 15px; } / Class resize-div Tag a Styling / .resize-div a { color: rgb(0, 111, 255); text-decoration: none; border-bottom: 1px solid; border-color: rgba(0, 111, 255, 0.3); transition-duration: 0.3s; } / Class resize-div Tag a Pseudo Class hover Styling / .resize-div a:hover { border-color: rgba(0, 111, 255, 1); } </style> </head> <!-- Body Tag - Webpage Content --> <body> <!-- Resize Div --> <div class = "resize-div"> <p> <a href = "https://www.khanacademy.org/computer-programming/car-crash-game/5153813817671680?width=800&editor=no">Clik tu pley.</a> </p> </div> <!-- Canvas Tag - To Draw All Shapes --> <canvas id = "my-canvas" width = "900" height = "600"></canvas> <!-- Script Tag - Processing JS --> <script src = "https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <!-- Script Tag - Reload Button --> <script></script> <!-- Script Tag - Game --> <script type = "application/javascript"> // program code { var sketchProc = function(processingInstance) { with (processingInstance) { // setup { size(800, 600); frameRate(60); rectMode(CENTER); ellipseMode(CENTER); textAlign(CENTER, CENTER); imageMode(CENTER); noStroke(); // } // variables { var scene = "menu"; // scene var clicked = false; // is the mouse pressed? var input = []; // keep track of key presses // { var otherCars = []; var nukes = []; var flashes = []; var shakes = []; var particles = []; var transitions = []; var powerups = []; // } class arrays var other_car_images = []; // store multiple images // { var bx = 0; var bx2 = 799; // } background movement vars var player; var nukeSpawnSpeed = 400; var carSpawnSpeed = 100; var powerupSpawnSpeed = 300; var leaderboard = [ { name: "Terry Harpy", score: 8941, }, { name: "Tanmay N.", score: 32852, }, { name: "ProGrammer798", score: 7934, }, { name: "XxSoloNuggetxX", score: 6410, }, { name: "Abu7maid", score: 8329, }, { name: "You", score: 0, }, ]; // } // collision functions { function rectToRect(x1, y1, w1, h1, x2, y2, w2, h2) { return x1 + w1 / 2 > x2 - w2 / 2 && x1 - w1 / 2 < x2 + w2 / 2 && y1 + h1 / 2 > y2 - h2 / 2 && y1 - h1 / 2 < y2 + h2 / 2; } // rect to rect collision function pointToRect(px, py, rx, ry, rw, rh) { return px > rx - rw / 2 && px < rx + rw / 2 && py > ry - rh / 2 && py < ry + rh / 2; } // point to rect collision function circleToRect(cx, cy, cr, rx, ry, rw, rh) { return dist(cx, cy, rx - rw / 2, ry - rh / 2) < cr \|\| dist(cx, cy, rx - rw / 2, ry + rh / 2) < cr \|\| dist(cx, cy, rx + rw / 2, ry - rh / 2) < cr \|\| dist(cx, cy, rx + rw / 2, ry + rh / 2) < cr \|\| ((abs((rx - rw / 2) - cx) <= cr \|\| abs((rx + rw / 2) - cx) <= cr) && (cy >= ry - rh / 2 && cy <= ry + rh / 2)) \|\| ((abs((ry - rh / 2) - cy) <= cr \|\| abs((ry + rh / 2) - cy) <= cr) && (cx >= rx - rw / 2 && cx <= rx + rw / 2)) \|\| (cx >= rx - rw / 2 && cx <= rx + rw / 2 && cy >= ry - rh / 2 && cy <= ry + rh / 2); } // circle to rect collision // } // graphics { // building function { function building(x, y, width, height, bCol, rows, columns, wwidth, wheight, wCol) { noStroke(); // no lines uwu fill(bCol); // building color rect(x, y, width, height); // building fill(wCol); // window color for (var i = columns - 1; i >= 0; i--) { for (var j = rows - 1; j >= 0; j--) { rect(i wwidth * 2 - wwidth * (columns - 1) + x, j * wheight * 2 - wheight * (rows - 1) + y, wwidth, wheight); } // rows } // columns } // } // bad car function { function bad_car(col) { pushMatrix(); translate(-155, -145); fill(col); // color stroke(col); // stroke color strokeWeight(8); // strokeWeight strokeCap(ROUND); // round cap strokeJoin(ROUND); // round join // car chassis beginShape(); vertex(800 - 200, 240); vertex(800 - 200, 280); vertex(800 - 240, 310); vertex(800 - 640, 310); vertex(800 - 640, 250); vertex(800 - 630, 230); bezierVertex(800 - 640, 222, 800 - 640, 219, 800 - 630, 215); bezierVertex(800 - 585, 198, 800 - 577, 197, 800 - 510, 191); vertex(800 - 430, 150); vertex(800 - 330, 150); vertex(800 - 240, 200); vertex(800 - 210, 200); vertex(800 - 210, 230); endShape(CLOSE); fill(117, 198, 255); // color noStroke(); // screw you stroke lol // window pushMatrix(); translate(93, -106); beginShape(); vertex(800 - 400, 300); vertex(800 - 440, 310); vertex(800 - 582, 310); vertex(800 - 510, 270); vertex(800 - 440, 270); endShape(CLOSE); popMatrix(); stroke(col); // stroke color strokeWeight(18); // strokeWeight strokeCap(ROUND); // round cap line(800 - 345, 161, 800 - 345, 300); // car door break or smth idk stroke(col); // stroke color strokeWeight(14); // strokeWeight line(800 - 350, 230, 800 - 365, 230); // door handle stroke(0, 0, 0, 30); // stroke color strokeWeight(14); // strokeWeight line(800 - 350, 230, 800 - 365, 230); // door handle fill(245, 245, 245); // color noStroke(); // go away again stroke arc(800 - 320, 310, 90, 100, radians(180), radians(360)); // round part rect(800 - 320, 320, 90, 25); // sharp part fill(74, 78, 82); // color rect(800 - 320, 344, 90, 25); // sharp part pushMatrix(); translate(-210, 0); fill(245, 245, 245); // color arc(800 - 320, 310, 90, 100, radians(180), radians(360)); // round part rect(800 - 320, 320, 90, 25); // sharp part fill(74, 78, 82); // color rect(800 - 320, 344, 90, 25); // sharp part popMatrix(); popMatrix(); } // } // good car function { function good_car(col) { pushMatrix(); translate(-195, -145); fill(col); // color stroke(col); // stroke color strokeWeight(8); // strokeWeight strokeCap(ROUND); // round cap strokeJoin(ROUND); // round join // car chassis beginShape(); beginShape(); vertex(200, 240); vertex(200, 280); vertex(240, 310); vertex(640, 310); vertex(640, 250); vertex(630, 230); bezierVertex(640, 222, 640, 219, 630, 215); bezierVertex(585, 198, 577, 197, 510, 191); vertex(430, 150); vertex(330, 150); vertex(240, 200); vertex(210, 200); vertex(210, 230); endShape(CLOSE); fill(117, 198, 255); // color noStroke(); // screw you stroke lol // window pushMatrix(); translate(-93, -106); beginShape(); vertex(400, 300); vertex(440, 310); vertex(582, 310); vertex(510, 270); vertex(440, 270); endShape(CLOSE); popMatrix(); stroke(col); // stroke color strokeWeight(18); // strokeWeight strokeCap(ROUND); // round cap line(345, 161, 345, 300); // car door break or smth idk stroke(col); // stroke color strokeWeight(14); // strokeWeight line(350, 230, 365, 230); // door handle stroke(0, 0, 0, 30); // stroke color strokeWeight(14); // strokeWeight line(350, 230, 365, 230); // door handle fill(245, 245, 245); // color noStroke(); // go away again stroke arc(320, 310, 90, 100, radians(180), radians(360)); // round part rect(320, 320, 90, 25); // sharp part fill(74, 78, 82); // color rect(320, 344, 90, 25); // sharp part pushMatrix(); translate(210, 0); fill(245, 245, 245); // color arc(320, 310, 90, 100, radians(180), radians(360)); // round part rect(320, 320, 90, 25); // sharp part fill(74, 78, 82); // color rect(320, 344, 90, 25); // sharp part popMatrix(); popMatrix(); } // } // speed function { function speed(x, y, col, s) { (typeof x === "undefined") ? x = 0 : rect(0, 0, 0, 0); (typeof y === "undefined") ? y = 0 : rect(0, 0, 0, 0); (typeof col === "undefined") ? col = color(255, 255, 255) : rect(0, 0, 0, 0); (typeof s === "undefined") ? s = 0 : rect(0, 0, 0, 0); pushMatrix(); translate(x, y); scale(s); noStroke(); fill(col); beginShape(); vertex(100, 110); vertex(120, 110); vertex(140, 150); vertex(120, 190); vertex(100, 190); vertex(120, 150); endShape(); popMatrix(); } // } // player image { background(0, 0, 0, 0); // background good_car(color(240, 67, 110)); var playerImg = get(0, 0, 450, 213); background(255, 255, 255); // } // skyline background { background(0, 0, 0, 0); // background // { building(71, 323, 140, 360, color(20, 20, 20), 4, 2, 26, 41, color(59, 101, 168)); building(198, 353, 114, 300, color(105, 105, 105), 3, 2, 26, 41, color(184, 184, 184)); building(319, 288, 128, 430, color(240, 240, 240), 5, 2, 26, 41, color(164, 164, 164)); building(498, 329, 230, 348, color(240, 228, 199), 4, 4, 26, 41, color(255, 255, 255)); building(643, 261, 60, 484, color(255, 183, 0), 5, 1, 26, 41, color(68, 0, 255)); building(736, 377, 127, 252, color(66, 135, 245), 3, 2, 26, 41, color(146, 185, 247)); // } buildings // { fill(50, 50, 50); rect(400, 551, width, 97); fill(255, 255, 255); for (var i = 10; i >= 1; i--) { rect(i * 79, 551, 20, 10); } // } road var buildingsBack = get(0, 0, width, height); background(255, 255, 255); // } // other cars images { // orange { background(0, 0, 0, 0); // background bad_car(color(255, 145, 0)); other_car_images.push(get(0, 0, 450, 213)); background(255, 255, 255); // } // blue { background(0, 0, 0, 0); // background bad_car(color(72, 0, 255)); other_car_images.push(get(0, 0, 450, 213)); background(255, 255, 255); // } // black { background(0, 0, 0, 0); // background bad_car(color(27, 26, 28)); other_car_images.push(get(0, 0, 450, 213)); background(255, 255, 255); // } // green { background(0, 0, 0, 0); // background bad_car(color(0, 255, 110)); other_car_images.push(get(0, 0, 450, 213)); background(255, 255, 255); // } // other green { background(0, 0, 0, 0); // background bad_car(color(208, 255, 0)); other_car_images.push(get(0, 0, 450, 213)); background(255, 255, 255); // } // } // button images { // play { background(0, 0, 0, 0); good_car(color(0, 255, 110)); textFont(createFont("Trebuchet MS Bold Italics"), 70); fill(255, 255, 255); text("Play", 225, 183 / 2); var pbImage = get(0, 0, 450, 213); background(255, 255, 255); // } // how { background(0, 0, 0, 0); good_car(color(255, 145, 0)); textFont(createFont("Trebuchet MS Bold Italics"), 70); fill(255, 255, 255); text("How", 225, 183 / 2); var hbImage = get(0, 0, 450, 213); background(255, 255, 255); // } // lead { background(0, 0, 0, 0); good_car(color(72, 0, 255)); textFont(createFont("Trebuchet MS Bold Italics"), 70); fill(255, 255, 255); text("Lead", 225, 183 / 2); var lbImage = get(0, 0, 450, 213); background(255, 255, 255); // } // back { background(0, 0, 0, 0); bad_car(color(211, 237, 222)); textFont(createFont("Trebuchet MS Bold Italics"), 70); fill(255, 255, 255); text("Back", 225, 183 / 2); var bbImage = get(0, 0, 450, 213); background(255, 255, 255); // } // } // power up images { // speed power up { background(0, 0, 0, 0); pushMatrix(); translate(-46, -46); strokeWeight(6); stroke(255, 255, 255); fill(0, 208, 255); rect(100, 100, 100, 100, 0); for (var i = 2; i >= 0; i--) { speed(-40 + i * 22, -50, color(255, 255, 255), 1); } popMatrix(); var spImage = get(0, 0, 109, 109); background(255, 255, 255); // } // inferno power up { background(0, 0, 0, 0); pushMatrix(); translate(-46, -46); strokeWeight(6); stroke(255, 255, 255); fill(0, 208, 255); rect(100, 100, 100, 100, 0); pushMatrix(); translate(46, 46); stroke(255, 255, 255, 150); strokeWeight(14); line(22, 54, 85, 54); strokeWeight(10); stroke(255, 255, 255); line(22, 54, 85, 54); popMatrix(); popMatrix(); var ipImage = get(0, 0, 109, 109); background(255, 255, 255); // } // heal power up { background(0, 0, 0, 0); pushMatrix(); translate(-46, -46); strokeWeight(6); stroke(255, 255, 255); fill(0, 208, 255); rect(100, 100, 100, 100, 0); pushMatrix(); translate(-179, -168); scale(1.3); fill(255, 255, 255); noStroke(); arc(200, 200, 30, 30, radians(180), radians(360)); arc(230, 200, 30, 30, radians(180), radians(360)); triangle(185, 200, 215, 230, 245, 200); popMatrix(); popMatrix(); var hpImage = get(0, 0, 109, 109); background(255, 255, 255); // } // shield power up { background(0, 0, 0, 0); pushMatrix(); translate(-46, -46); strokeWeight(6); stroke(255, 255, 255); fill(0, 208, 255); rect(100, 100, 100, 100, 0); pushMatrix(); translate(-19, -58); scale(0.6); fill(255, 255, 255); noStroke(); beginShape(); vertex(200, 200); bezierVertex(220, 220, 230, 250, 260, 240); bezierVertex(255, 300, 235, 310, 200, 330); bezierVertex(400 - 235, 310, 400 - 255, 300, 400 - 260, 240); bezierVertex(400 - 230, 250, 400 - 220, 220, 200, 200); endShape(); popMatrix(); popMatrix(); var shpImage = get(0, 0, 109, 109); background(255, 255, 255); // } // boost power up { background(0, 0, 0, 0); pushMatrix(); translate(-46, -46); strokeWeight(6); stroke(255, 255, 255); fill(0, 208, 255); rect(100, 100, 100, 100, 0); pushMatrix(); translate(-24, -80); scale(1 / 1.6, 1.1 / 1.6); fill(255, 255, 255); noStroke(); beginShape(); vertex(200, 200); vertex(217, 250); vertex(270, 250); vertex(227, 276); vertex(240, 320); vertex(200, 290); vertex(400 - 240, 320); vertex(400 - 227, 276); vertex(400 - 270, 250); vertex(400 - 217, 250); vertex(400 - 200, 200); endShape(); popMatrix(); popMatrix(); var bpImage = get(0, 0, 109, 109); background(255, 255, 255); // } // } // nuke image { background(0, 0, 0, 0); pushMatrix(); translate(-201, 251); rotate(radians(-90)); noStroke(); fill(56, 61, 42); pushMatrix(); translate(40, 70); scale(0.8); beginShape(); vertex(185, 410); vertex(177, 430); vertex(137, 470); vertex(137, 500); vertex(263, 500); vertex(263, 470); vertex(223, 430); vertex(215, 410); endShape(); popMatrix(); fill(203, 219, 151); triangle(200, 200, 215, 250, 185, 250); rect(200, 280, 30, 60); fill(101, 110, 75); rect(200, 400, 30, 180); popMatrix(); var nukeImage = get(0, 0, 290, 102); background(255, 255, 255); // } // warning image { background(0, 0, 0, 0); pushMatrix(); translate(-146, -196); stroke(0, 0, 0); strokeWeight(6); strokeJoin(ROUND); fill(255, 243, 0); triangle(200, 200, 250, 287, 150, 287); fill(0, 0, 0); textFont(createFont("Trebuchet MS Bold"), 50); text("!", 200, 252); popMatrix(); var warnImage = get(0, 0, 108, 95); background(255, 255, 255); // } // } // all classes { class Particle { constructor(x, y, size, sizeVel, xVel, yVel, gravity, shape, col, transVel) { this.x = x; this.y = y; this.size = size; // size this.sizeVel = sizeVel \|\| 0; this.xVel = xVel; this.yVel = yVel; this.gravity = gravity \|\| 0; // gravity this.shape = shape \|\| "circle"; // shape this.col = col \|\| color(255, 255, 255); // color this.trans = 255; // transparency this.transVel = transVel \|\| 0; this.spliced = false; // spliced? } // contructor move() { this.x += this.xVel; this.y += this.yVel; this.yVel += this.gravity; } // move method shrink() { this.size -= this.sizeVel; } // shrink method fade() { this.trans -= this.transVel; } // fade method toSplice() { if (this.trans < 0 \|\| this.size < 0 \|\| this.x < -50 \|\| this.x > 850 \|\| this.y < -50 \|\| this.y > 650) { this.spliced = true; } } // to splice method display() { fill(this.col, this.trans); if (this.shape === "circle") { ellipse(this.x, this.y, this.size, this.size); } else if (this.shape === "rect") { rect(this.x, this.y, this.size, this.size); } } // display method update() { // call other methods this.move(); this.shrink(); this.fade(); this.toSplice(); this.display(); } // update method } // Particle class class Flash { constructor(col, trans) { this.x = width / 2; // x this.y = height / 2; // y this.width = width + 200; // width this.height = height + 200; // height this.col = col \|\| color(255, 255, 255); // color this.trans = trans \|\| 255; // transparency this.spliced = false; // spliced? } // contructor fade() { this.trans += -5; // increase this.trans } // fade method toSplice () { if (this.trans < 0) { // if trans is less than 0 this.spliced = true; } }; // toSplice method display() { fill(this.col, this.trans); // color rect(this.x, this.y, this.width, this.height); // rect } // display method update() { // call other methods this.fade(); this.toSplice(); this.display(); } // update method } // Flash class class Shake { constructor(time, amt) { this.time = time \|\| 0; // amount of time this.amt = amt \|\| 0; // shake magnitude this.timer = 0; // timer this.spliced = false; // spliced? } // constructor run() { this.timer++; // increase this.timer }; // run method shake() { if (this.timer < this.time) { // translate translate(random(-this.amt, this.amt), random(-this.amt, this.amt)); } else { // or this.spliced = true; // make this.spliced true } }; // shake method update() { // call other methods this.run(); this.shake(); }; // update method } // Shake class class ShowPowerUp { constructor(type) { this.x = 0; // x this.y = 62; this.type = type \|\| ""; // type this.displayed = false; // displayed? } // constructor display() { switch (this.type) { case "speed": image(spImage, this.x, this.y, 40, 40); break; case "inferno": image(ipImage, this.x, this.y, 40, 40); break; case "shield": image(shpImage, this.x, this.y, 40, 40); break; case "boost": image(bpImage, this.x, this.y, 40, 40); break; } fill(255, 255, 255); rect(this.x + 20 + 10, this.y, 20, 40); fill(0, 208, 255); switch (this.type) { case "speed": rect(this.x + 20 + 10, this.y, 16, 40 * (player.speedTimer / 250)); break; case "inferno": rect(this.x + 20 + 10, this.y, 16, 40 * (player.infernoTimer / 250)); break; case "shield": rect(this.x + 20 + 10, this.y, 16, 40 * (player.shieldTimer / 250)); break; case "boost": rect(this.x + 20 + 10, this.y, 16, 40 * (player.boostTimer / 250)); break; } } // display method toDisplay() { switch (this.type) { case "speed": if (player.speedTimer <= 0) { this.displayed = false; } break; case "inferno": if (player.infernoTimer <= 0) { this.displayed = false; } break; case "shield": if (player.shieldTimer <= 0) { this.displayed = false; } break; case "boost": if (player.boostTimer <= 0) { this.displayed = false; } break; } } // toSplice method update() { // call other methods this.display(); this.toDisplay(); } // update method } // instances of showpowerups { var showpowerups = [ new ShowPowerUp("speed"), new ShowPowerUp("inferno"), new ShowPowerUp("shield"), new ShowPowerUp("boost"), ]; // } class PowerUp { constructor(x, y, size, type) { this.x = x; // x this.y = y; this.size = size; // size this.type = type \|\| ""; // type this.xVel = floor(random(-4, -3)); // v velocity this.spliced = false; // spliced? } // constructor collide(obj) { if (rectToRect(this.x, this.y, this.size, this.size, obj.x, obj.y, obj.size, obj.size * 213 / 450)) { switch (this.type) { case "speed": obj.speedTimer = 250; showpowerups[0].displayed = true; break; case "inferno": obj.infernoTimer = 250; showpowerups[1].displayed = true; break; case "shield": obj.shieldTimer = 250; showpowerups[2].displayed = true; break; case "boost": obj.boostTimer = 250; showpowerups[3].displayed = true; break; case "heal": obj.health += 1; break; } shakes.push(new Shake(15, 3)); for (var i = 10 ; i >= 0; i--) { particles.push(new Particle(random(this.x - this.size / 2, this.x + this.size / 2), random(this.y - this.size / 2, this.y + this.size / 2), 20, 1, random(-2, 2), random(-2, 2), 0, "circle", (floor(random(0, 2)) === 0) ? color(255, 255, 255) : color(0, 195, 255), 0.2)); } this.spliced = true; } } // collide method move() { this.x += this.xVel; } // move method display() { switch (this.type) { case "speed": image(spImage, this.x, this.y, this.size, this.size); break; case "inferno": image(ipImage, this.x, this.y, this.size, this.size); break; case "shield": image(shpImage, this.x, this.y, this.size, this.size); break; case "boost": image(bpImage, this.x, this.y, this.size, this.size); break; case "heal": image(hpImage, this.x, this.y, this.size, this.size); break; } } // display method toSplice() { if (this.x < -50) { this.spliced = true; } } // toSplice method update(obj) { // call other methods this.collide(obj); this.toSplice(); this.move(); this.display(); } // update method } // PowerUp class class Nuke { constructor(x, y, size) { this.x = x; // x this.y = y; this.size = size; this.xVel = floor(random(-8, -6)); this.spliced = false; } // constructor collide(obj) { if (rectToRect(this.x, this.y, this.size, this.size * 102 / 290, obj.x, obj.y, obj.size, obj.size * 213 / 450)) { // detect collision flashes.push(new Flash(color(255, 0, 0), 255)); // create a flash shakes.push(new Shake(35, 10));// shake the screen a bit this.spliced = true; // make this.spliced true obj.health -= 3; // decrease obj.health for (var i = 30 ; i >= 0; i--) { particles.push(new Particle(random(this.x - this.size / 2, this.x + this.size / 2), random(this.y - (this.size * 102 / 290) / 2, this.y), 23, 0.7, random(-2, 2), random(-2, 2), 0, "circle", color(255, random(100, 150), 0), 0.2)); } } } // collide method move() { this.x += this.xVel; } // move method display() { if (this.x > 800 + this.size / 2 + 1) { image(warnImage, 750, this.y, 60, 60 * 95 / 108); } image(nukeImage, this.x, this.y, this.size, this.size * 102 / 290); if (frameCount % 3 === 0) { particles.push(new Particle(this.x + this.size / 2, this.y, 20, 0.2, random(-3, 0.3), random(-1, 1), 0, "circle", color(255, 50, 0), 4)); } } // display method update(obj) { // call other methods this.move(); this.collide(obj); this.display(); if (this.x < -this.size) { this.spliced = true; // if this is off of the screen, splice this } } // update method } // Nuke class class Player { constructor(x, y, size) { this.x = x; // x this.y = y; // y this.x2 = x; // x2 this.y2 = y; // y2 this.size = size; // size this.xVel = 0; // x velocity this.yVel = 0; // y velocity this.rot = 0; // rotation this.rotVel = 0; // rotation velocity this.flying = [ true, true, ]; // arcs of flying this.ind = 0; // index this.health = 5; // timers this.speedTimer = 0; this.infernoTimer = 0; this.shieldTimer = 0; this.boostTimer = 0; this.totSpd = 3; // total speed this.accel = 0.25; // acceleration this.score = 0; // score this.scoreVel = 10; this.highscore = 0; this.shield = { x: x, y: y, size: size + 20, }; this.inferno = { x: x + 400, y: y, width: 800, height: 10, }; } // constructor moveX() { if (input[RIGHT] && abs(this.xVel) < this.totSpd) { // right arrow key press this.xVel += this.accel; // increase xVel } else { // no key press this.xVel /= 1.05; } if (input[LEFT] && abs(this.xVel) < this.totSpd) { // left arrow key press this.xVel -= this.accel; // increase xVel } else { // no key press this.xVel /= 1.05; } if (this.x < 0) { // constrain x this.x = 0; this.xVel = 0; } if (this.x > 400) { // constrain x this.x = 400; this.xVel = 0; } this.x += this.xVel; // increase x } // moveX method moveY() { if (input[DOWN] && abs(this.yVel) < this.totSpd) { // down arrow key press this.yVel += this.accel; // increase yVel this.rot = lerp(this.rot, 20, 0.02); // change rot } else { // no key press this.yVel /= 1.05; this.rot = lerp(this.rot, 0, 0.02); } if (input[UP] && abs(this.yVel) < this.totSpd) { // up arrow key press this.yVel -= this.accel; // increase yVel this.rot = lerp(this.rot, -20, 0.02); // change rot } else { // no key press this.yVel /= 1.05; this.rot = lerp(this.rot, 0, 0.02); } if (this.y < 50) { // constrain y this.y = 50; this.yVel = 0; } if (this.y > 550) { // constrain y this.y = 550; this.yVel = 0; } this.y += this.yVel; // increase y } // moveY method fly() { stroke(240, 67, 110); strokeWeight(3); noFill(); this.ind++; // increase this.ind (this.flying[0]) ? arc(this.x, this.y + this.size / 3.5, this.size / 1.3, 30, radians(0), radians(180)) : rect(0, 0, 0, 0); (this.flying[1]) ? arc(this.x, this.y + this.size / 2.5, this.size / 1.2, 30, radians(0), radians(180)) : rect(0, 0, 0, 0); (this.ind > 10) ? this.flying[0] = false : rect(0, 0, 0, 0); (this.ind > 20) ? this.flying[1] = false : rect(0, 0, 0, 0); (this.ind > 40) ? this.flying[0] = true : rect(0, 0, 0, 0); (this.ind > 50) ? this.flying[1] = true : rect(0, 0, 0, 0); (this.ind > 60) ? this.ind = 0 : rect(0, 0, 0, 0); } // fly method runScore() { if (frameCount % this.scoreVel === 0) { this.score++; } } // runScore method display() { pushMatrix(); translate(this.x, this.y); rotate(radians(this.rot)); image(playerImg, 0, 0, this.size, this.size * 213 / 450); // player image popMatrix(); } // display method speedUp() { if (this.speedTimer > 0) { this.totSpd = 6; // increase total speed this.accel = 0.55; // increase acceleration } else { // or this.totSpd = 3; // reset total speed this.accel = 0.25; // reset acceleration } this.speedTimer--; // decrease it if (this.speedTimer <= 0) { // keep it at 0 this.speedTimer = 0; } } // speedUp method useShield() { if (this.shieldTimer > 0) { stroke(7, 74, 11); strokeWeight(8); fill(44, 219, 54, 100); ellipse(this.shield.x, this.shield.y, this.shield.size, this.shield.size); } this.shieldTimer--; // decrease it if (this.shieldTimer <= 0) { // keep it at 0 this.shieldTimer = 0; } } // useShield method useInferno() { if (this.infernoTimer > 0) { stroke(255, 34, 0, 100); strokeWeight(8); fill(255, 34, 0); rect(this.inferno.x, this.inferno.y, this.inferno.width, this.inferno.height); } this.infernoTimer--; // decrease it if (this.infernoTimer <= 0) { // keep it at 0 this.infernoTimer = 0; } } // useInferno method scoreBoost() { if (this.boostTimer > 0) { this.scoreVel = 5; // decrease this.scoreVel } else { // or this.scoreVel = 10; // reset total speed } this.boostTimer--; // decrease it if (this.boostTimer <= 0) { // keep it at 0 this.boostTimer = 0; } } // scoreBoost method update() { // call other methods this.moveX(); this.moveY(); this.fly(); this.runScore(); this.useShield(); this.useInferno(); this.display(); this.speedUp(); this.scoreBoost(); this.shield.x = this.x; this.shield.y = this.y; this.inferno.x = this.x + 400; this.inferno.y = this.y; if (this.health >= 5) { this.health = 5; // limit health } } // update method } // Player class class OtherCar { constructor(x, y, size) { this.x = x; // x this.y = y; // y this.size = size; // size this.xVel = floor(random(-5, -3)); // x velocity this.ind = floor(random(other_car_images.length - 1)); // index this.spliced = false; // spliced? } // constructor moveX() { this.x += this.xVel; // increase x } // moveX method collide(obj) { if (obj.shieldTimer > 0) { if (circleToRect(obj.shield.x, obj.shield.y, obj.shield.size, this.x, this.y, this.size, this.size * 213 / 450)) { // detect collision shakes.push(new Shake(20, 3));// shake the screen a bit this.spliced = true; // make this.spliced true for (var i = 20 ; i >= 0; i--) { particles.push(new Particle(random(this.x - this.size / 2, this.x + this.size / 2), random(this.y - (this.size * 213 / 450) / 2, this.y + (this.size * 213 / 450) / 2), 20, 1, random(-2, 2), random(-2, 2), 0, "circle", color(255, random(100, 150), 0), 0.2)); } } } else { if (rectToRect(this.x, this.y, this.size, this.size * 213 / 450, obj.x, obj.y, obj.size, obj.size * 213 / 450)) { // detect collision flashes.push(new Flash(color(255, 0, 0), 150)); // create a flash shakes.push(new Shake(20, 5));// shake the screen a bit this.spliced = true; // make this.spliced true obj.health--; // decrease obj.health for (var i = 20 ; i >= 0; i--) { particles.push(new Particle(random(this.x - this.size / 2, this.x + this.size / 2), random(this.y - (this.size * 213 / 450) / 2, this.y + (this.size * 213 / 450) / 2), 20, 0.7, random(-2, 2), random(-2, 2), 0, "circle", color(255, random(100, 150), 0), 0.2)); } } } if (obj.infernoTimer > 0) { if (rectToRect(this.x, this.y, this.size, this.size * 213 / 450, obj.inferno.x, obj.inferno.y, obj.inferno.width, obj.inferno.height)) { // detect collision shakes.push(new Shake(20, 3));// shake the screen a bit this.spliced = true; // make this.spliced true for (var i = 20 ; i >= 0; i--) { particles.push(new Particle(random(this.x - this.size / 2, this.x + this.size / 2), random(this.y - (this.size * 213 / 450) / 2, this.y + (this.size * 213 / 450) / 2), 20, 1, random(-2, 2), random(-2, 2), 0, "circle", color(255, random(0, 50), 0), 0.2)); } obj.score += 100; // increase score } } } // collide method display() { image(other_car_images[this.ind], this.x, this.y, this.size, this.size * 213 / 450); // player image } // display method update(obj) { // call other methods this.moveX(); this.collide(obj); this.display(); if (this.x < -this.size) { this.spliced = true; // if this is off of the screen, splice this } } // update method } // OtherCar class class Transition { constructor(func) { this.x = width / 2; // x this.y = height / 2; // y this.width = 0; this.height = 0; this.trans = 255; this.func = func \|\| function() {}; // functionto call this.spliced = false; // spliced? } grow() { this.width = lerp(this.width, 1005, 0.1); this.height = lerp(this.height, 605, 0.1); } // grow method fade() { this.trans = lerp(this.trans, -5, 0.1); } // fade method toSplice() { if (this.trans <= 0) { this.spliced = true; } } // toSplice method display() { noStroke(); fill(255, 255, 255, this.trans); ellipse(this.x, this.y, this.width, this.width); } // display method update() { this.grow(); this.display(); this.toSplice(); if (this.width > 1000) { this.fade(); if (this.width < 1002) { this.func(); } } } // update method } // Transition class class Button { constructor(x, y, size, image, func) { this.x = x; // x this.y = y; // y this.size = size; // size this.sizeL = size + (60 * size / 230); // size large this.sizeS = size; // size smol this.image = image; // image this.func = func \|\| function() {}; // function to call when mouse is clicked this.speed = 0.1; // lerp speed } hover() { if (pointToRect(mouseX, mouseY, this.x, this.y, this.size, this.size * 213 / 450)) { // detect hover this.size = lerp(this.size, this.sizeL, this.speed); cursor("pointer"); } else { // or this.size = lerp(this.size, this.sizeS, this.speed); } } // hover method clicked() { if (pointToRect(mouseX, mouseY, this.x, this.y, this.size, this.size * 213 / 450) && clicked) { // detect hover and click let func = this.func; transitions.push(new Transition(function() { func(); })); } } // clicked method display() { image(this.image, this.x, this.y, this.size, this.size * 213 / 450); } // display method update() { // call other methods this.hover(); this.clicked(); this.display(); } // update method } // Button class // } // buttons { var buttons = { "play": new Button(400, 320, 280, pbImage, function() { scene = "play"; player.health = 5; player.x = player.x2; player.y = player.y2; player.rot = 0; player.rotVel = 0; player.xVel = 0; player.yVel = 0; player.speedTimer = 0; player.infernoTimer = 0; player.shieldTimer = 0; player.boostTimer = 0; player.score = 0; otherCars = []; nukes = []; shakes = []; particles = []; powerups = []; nukeSpawnSpeed = 400; carSpawnSpeed = 100; powerupSpawnSpeed = 300; }), "how": new Button(180, 460, 230, hbImage, function() { scene = "how"; }), "lead": new Button(620, 460, 230, lbImage, function() { scene = "lead"; for (var i = leaderboard.length - 1; i >= 0; i--) { if (leaderboard[i].name === "You") { leaderboard[i].score = player.highscore; } } leaderboard.sort(function(a, b) { return b.score - a.score; }); }), "back": new Button(150, 510, 150, bbImage, function() { scene = "menu"; }), }; // } // set player { player = new Player(200, 300, 120); // } // scenes { var Scenes = { "menu": function() { textFont(createFont("Trebuchet MS Bold Italics"), 130); fill(255, 255, 255); text("Car Crash", 400, 100); buttons.play.update(); buttons.how.update(); buttons.lead.update(); }, "play": function() { pushMatrix(); for (var i = shakes.length - 1; i >= 0; i--) { shakes[i].update(); if (shakes[i].spliced) { shakes.splice(i, 1); } } // update shakes // { background(94, 218, 255); image(buildingsBack, width / 2 + bx, height / 2); image(buildingsBack, width / 2 + bx2, height / 2); noStroke(); fill(0, 0, 0, 30); rect(width / 2, height / 2, width, height); // } background for (var i = otherCars.length - 1; i >= 0; i--) { otherCars[i].update(player); if (otherCars[i].spliced) { otherCars.splice(i, 1); } } // update other cars for (var i = particles.length - 1; i >= 0; i--) { particles[i].update(); if (particles[i].spliced) { particles.splice(i, 1); } } // update particles for (var i = nukes.length - 1; i >= 0; i--) { nukes[i].update(player); if (nukes[i].spliced) { nukes.splice(i, 1); } } // update nukes for (var i = powerups.length - 1; i >= 0; i--) { powerups[i].update(player); if (powerups[i].spliced) { powerups.splice(i, 1); } } // update powerups player.update(); // update player popMatrix(); noStroke(); fill(0, 0, 0, 70); rect(width / 2, 50, width, 100); fill(255, 255, 255); textFont(createFont("Trebuchet MS Bold Italics"), 20); text("Health: ", 150, 30); text("Powerups: ", 610, 20); rectMode(CORNER); fill(255, 0, 15); rect(50, 55, 200, 20, 10); fill(0, 255, 15); rect(50, 55, 200 * (player.health / 5), 20, 10); rectMode(CENTER); fill(255, 255, 255); textSize(30); text("Score: " + player.score, 350, 50); for (var i = showpowerups.length - 1; i >= 0; i--) { showpowerups[i].update(); if (showpowerups[i].displayed) { showpowerups[i].x = 480 + i * 80; } else { showpowerups[i].x = -480; } } // update showpowerups if (frameCount % floor(carSpawnSpeed) === 0) { // when the frameCount is evenly divisible by floor(carSpawnSpeed) otherCars.push(new OtherCar(900, random(50, 530), 120)); // create other cars } if (frameCount % floor(nukeSpawnSpeed) === 0) { // when the frameCount is evenly divisible by floor(nukeSpawnSpeed) nukes.push(new Nuke(1250, random(50, 530), 200)); // create nukes } if (frameCount % floor(powerupSpawnSpeed) === 0) { // when the frameCount is evenly divisible by floor(powerupSpawnSpeed) switch (floor(random(0, 6))) { case 0: powerups.push(new PowerUp(900, random(50, 530), 80, "speed")); break; case 1: powerups.push(new PowerUp(900, random(50, 530), 80, "boost")); break; case 2: powerups.push(new PowerUp(900, random(50, 530), 80, "heal")); break; case 3: powerups.push(new PowerUp(900, random(50, 530), 80, "shield")); break; case 4: powerups.push(new PowerUp(900, random(50, 530), 80, "inferno")); break; case 5: powerups.push(new PowerUp(900, random(50, 530), 80, "inferno")); break; } } if (frameCount % 20 === 0) { nukeSpawnSpeed--; } if (frameCount % 70 === 0) { carSpawnSpeed--; } if (frameCount % 25 === 0) { powerupSpawnSpeed--; } if (player.health <= 0) { scene = "dead"; flashes.push(new Flash(color(255, 0, 0), 255)); if (player.score > player.highscore) { player.highscore = player.score; } } }, "how": function() { textFont(createFont("Trebuchet MS Bold Italics"), 90); fill(255, 255, 255); text("How to Play", 400, 90); textFont(createFont("Trebuchet MS Bold Italics"), 30); text("Use the arrow keys to move around.\nDodge other flying cars and nukes.\nCollect powerups to aid you in your\nperilous quest of driving a flying car.\nHave fun, and don't forget to give\nfeedback in the T&T and subscribe to me.", width / 2, height / 2); buttons.back.update(); }, "lead": function() { textFont(createFont("Trebuchet MS Bold Italics"), 90); fill(255, 255, 255); text("Leaderboard", 400, 90); textFont(createFont("Trebuchet MS Bold Italics"), 30); for (var i = leaderboard.length - 1; i >= 0; i--) { text(leaderboard[i].name + ": " + leaderboard[i].score, width / 2, 210 + i * 42); } buttons.back.update(); }, "dead": function() { textFont(createFont("Trebuchet MS Bold Italics"), 90); fill(255, 255, 255); text("You Died", 400, 90); textFont(createFont("Trebuchet MS Bold Italics"), 30); text("You died trying to unsuccessfully pilot\na flying car.\n\nYour score is: " + String(player.score) + "\n\nRemember \"Do or do not. There is no try.\"", width / 2, height / 2); buttons.back.update(); }, }; // Scenes object // } // processing.js functions { draw = function() { // { background(94, 218, 255); image(buildingsBack, width / 2 + bx, height / 2); image(buildingsBack, width / 2 + bx2, height / 2); noStroke(); fill(0, 0, 0, 30); rect(width / 2, height / 2, width, height); // } background // { bx -= 2; bx2 -= 2; (bx < -799) ? bx = 799 : rect(0, 0, 0, 0); (bx2 < -799) ? bx2 = 799 : rect(0, 0, 0, 0); // } background animation cursor("default"); Scenes[scene](); // draw scene if (transitions.length > 1) { transitions.length = 1; } // limit transitions for (var i = flashes.length - 1; i >= 0; i--) { flashes[i].update(); if (flashes[i].spliced) { flashes.splice(i, 1); } } // update flashes for (var i = transitions.length - 1; i >= 0; i--) { transitions[i].update(); if (transitions[i].spliced) { transitions.splice(i, 1); } } // update transitions clicked = false; // at the end of each frame reset clicked }; // draw each frame mousePressed = function() { clicked = true; // make clicked true }; // on mouse down keyPressed = function() { input[keyCode] = true; // set input[keyCode] to true }; // on key down keyReleased = function() { input[keyCode] = false; // set input[keyCode] to false }; // on key up // } } }; // } // store canvas { var canvas = document.getElementById("my-canvas"); // } // run Processing.js { var processingInstance = new Processing(canvas, sketchProc); // } </script> <!-- Script Tag - Resize Logic --> <script type = "application/javascript"> if (window.innerWidth !== 800 \|\| window.innerHeight !== 600) { canvas.style.display = "none"; document.getElementsByClassName("resize-div")[0].style.display = "block"; } </script> </body> </html>
Folds	31,66,72,76,88,1731,1734,1739
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN3O3OuTCQw
Votes	300
Spin-Offs	19
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Tanmay Natani
Author Name	TanmayNatani
Author ID	kaid_724677149575185996637814
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1739375938733
Updated	4 months ago, 1744844938327
Source Deleted	unknown