Viewing Program

Program Data

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

Title	Car Crash (Game)
ID	5372254209654784
Created	4 years ago, 1618233844164
Updated	4 years ago, 1618278797607
Code	/* Car Crash (Game) Gray Wolf, April 2021 You need to complete a certain number of laps within a given timeframe without crashing. Use the LEFT/RIGHT or A/D keys to go slow/fast respectively. Press RIGHT or D to start moving. Sorry in advance for the harder levels - wanted to make it challenging :D Let me know if you completed all the levels :) Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 Credits: - rotated rect collisions code adapted from -- Loyalty (Cavan P): https://www.khanacademy.org/profile/kaid_716488551714127278797372 -- Dandelion Fire Coding: https://www.khanacademy.org/profile/kaid_565064446382644511974643 Game based off a YouTube video: - JhgBwJn1bQw / var game; textFont(createFont("Trebuchet MS")); smooth(); keyPressed = function () { game.keys[keyCode] = true; }; keyReleased = function () { game.keys[keyCode] = false; }; mouseClicked = function () { game.clicked = true; }; /* @created_by MKaelin368 (KWC) (c) 2018 / var setKALoopTimeout = function(ms) { var method_name = "KAInfiniteLoopSetTimeout"; if (method_name in this) { this[method_name](ms >>> 0); } }; Object.constructor.prototype.new = function() { var obj = Object.create(this.prototype); this.apply(obj, arguments); return obj; }; var Button = (function() { var Button = function(args) { this.x = args.x; this.y = args.y; this.w = args.w \|\| 100; this.h = args.h \|\| 50; this.content = args.content; this.id = args.id \|\| 0; this.func = args.func; this.growth = 0; this.color = color(33, 30, 30); this.opacity = 80; this.hover = false; }; Button.prototype = { over: function() { return (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h); }, update: function() { if(this.over()) { this.hover = true; game.hover = true; this.growth = constrain(this.growth + 0.5, 0, 10); this.opacity = lerp(140, 80, 0.1); } else { this.hover = false; this.growth = constrain(this.growth - 0.5, 0, 10); this.opacity = lerp(80, 140, 0.1); } }, draw: function() { noFill(); this.update(); pushStyle(); noStroke(); fill(this.color, this.opacity); rect(this.x - this.growth / 2, this.y, this.w + this.growth, this.h); textAlign(CENTER, CENTER); textSize(18); fill(255); text(this.content, this.x + this.w / 2, this.y + this.h / 2); popStyle(); if(game.clicked && this.hover) { this.func(); } } }; return Button; })(); var CarButton = (function() { CarButton = function(args) { Button.call(this, args); this.type = args.type \|\| 1; this.colors = [ color(232, 88, 93), color(60, 133, 201), color(242, 220, 121), color(50, 60, 65), color(156, 111, 179), color(127, 209, 109) ]; }; CarButton.prototype = Object.create(Button.prototype); CarButton.prototype.over = function() { return (game.cars.show && mouseX > this.x - this.w / 2 && mouseX < this.x + this.w / 2 && mouseY > this.y - this.h / 2 && mouseY < this.y + this.h / 2); }; CarButton.prototype.select = function() { if(this.type === game.player.type) { fill(this.colors[this.type-1], 240); rect(0, this.h 0.6, this.w, this.h * 0.1, 6, 7, 7, 6); } else if(this.hover) { fill(this.colors[this.type-1], 140); rect(0, this.h * 0.6, this.w, this.h * 0.1, 6, 7, 7, 6); } }; CarButton.prototype.draw = function() { this.update(); pushMatrix(); translate(this.x, this.y); pushStyle(); switch(this.type) { case 1: noStroke(); fill(this.color); fill(232, 88, 93); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 7, 7, 6); noStroke(); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.75, this.h * 0.8, 4); fill(this.color); fill(240); rect(-this.w * 0.15, 0, this.w * 0.40, this.h * 0.78, 2); fill(232, 88, 93); rect(-this.w * 0.15, -this.h * 0.12, this.w * 0.39, this.h * 0.1, 0); rect(-this.w * 0.15, this.h * 0.12, this.w * 0.39, this.h * 0.1, 0); fill(240); ellipse(this.w * 0.18, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.18, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; case 2: noStroke(); fill(this.color); fill(60, 133, 201); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 10, 10, 6); fill(255, 100); rect(0, -this.h * 0.12, this.w * 0.90, this.h * 0.1); rect(0, this.h * 0.12, this.w * 0.90, this.h * 0.1); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.5, this.h * 0.8, 4); fill(this.color); fill(60, 133, 201); rect(-this.w * 0.10, 0, this.w * 0.3, this.h * 0.78, 0); fill(255, 100); rect(-this.w * 0.10, -this.h * 0.15, this.w * 0.3, this.h * 0.1); rect(-this.w * 0.10, this.h * 0.15, this.w * 0.3, this.h * 0.1); fill(240); ellipse(this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; case 3: noStroke(); fill(this.color); fill(242, 220, 121); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 8, 8, 6); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.5, this.h * 0.8, 4); fill(this.color); fill(242, 220, 121); rect(-this.w * 0.10, 0, this.w * 0.3, this.h * 0.90, 0); fill(70); rect(-this.w * 0.22, 0, this.w * 0.38, this.h * 0.6); rect(-this.w * 0.50, 0, this.w * 0.1, this.h * 0.90, 0); fill(240); ellipse(this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; case 4: noStroke(); fill(this.color); fill(50, 60, 65); rectMode(CENTER); rect(0, 0, this.w, this.h, 8, 8, 8, 8); fill(255, 100); rect(this.w * 0.30, -this.h * 0.06, this.w * 0.16, this.h * 0.05); rect(this.w * 0.30, this.h * 0.06, this.w * 0.16, this.h * 0.05); rect(this.w * 0.30, -this.h * 0.17, this.w * 0.16, this.h * 0.05); rect(this.w * 0.30, this.h * 0.17, this.w * 0.16, this.h * 0.05); fill(this.color); fill(240); rect(-this.w * 0.05, 0, this.w * 0.3, this.h * 0.78, 2); //sirens fill(0); rect(this.w * -0.10, 0, this.w * 0.05, this.h * 0.50); fill(25, 160, 255); rect(this.w * -0.10, this.h * 0.15, this.w * 0.05, this.h * 0.15); fill(240, 5, 5); rect(this.w * -0.10, -this.h * 0.15, this.w * 0.05, this.h * 0.15); fill(20); ellipse(this.w * 0.02, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.02, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; case 5: noStroke(); fill(this.color); fill(156, 111, 179); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 8, 8, 6); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.5, this.h * 0.8, 4); fill(this.color); fill(156, 111, 179); rect(-this.w * 0.10, 0, this.w * 0.3, this.h * 0.78, 0); fill(70); rect(-this.w * 0.22, 0, this.w * 0.38, this.h * 0.6); rect(-this.w * 0.50, 0, this.w * 0.1, this.h * 0.90, 0); fill(240); ellipse(this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; case 6: noStroke(); fill(this.color); fill(127, 209, 109); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 10, 10, 6); fill(255, 100); rect(0, -this.h * 0.12, this.w * 0.90, this.h * 0.1); rect(0, this.h * 0.12, this.w * 0.90, this.h * 0.1); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.5, this.h * 0.8, 4); fill(this.color); fill(127, 209, 109); rect(-this.w * 0.10, 0, this.w * 0.3, this.h * 0.78, 0); fill(255, 100); rect(-this.w * 0.10, -this.h * 0.15, this.w * 0.3, this.h * 0.1); rect(-this.w * 0.10, this.h * 0.15, this.w * 0.3, this.h * 0.1); fill(240); ellipse(this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; } this.select(); popStyle(); popMatrix(); if(game.clicked && this.over()) { this.func(); } }; return CarButton; })(); var LevelButton = (function() { LevelButton = function(args) { Button.call(this, args); this.level = args.level \|\| 1; this.enabled = false; }; LevelButton.prototype = Object.create(Button.prototype); LevelButton.prototype.draw = function() { noFill(); this.enabled = game.unlocked[this.level]; if(this.enabled) { this.update(); } pushStyle(); noStroke(); fill(this.color, this.opacity); rect(this.x - this.growth / 2, this.y, this.w + this.growth, this.h); textAlign(CENTER, CENTER); textSize(18); fill(this.enabled ? 255 : 200); text(this.content, this.x + this.w / 2, this.y + this.h / 2); popStyle(); if(game.clicked && this.hover) { this.func(); } }; return LevelButton; })(); var Transition = (function() { var Transition = function(args) { this.h = 0; this.vy = 15; this.color = args.color \|\| color(0); this.active = false; this.scene = "home"; this.level = 0; }; Transition.prototype = { reset: function() { this.h = 0; this.vy = 15; }, draw: function() { if(this.active) { pushStyle(); noStroke(); fill(this.color); rect(-20, -20, width + 40, this.h); rect(-20, height-this.h, width + 40, this.h + 20); popStyle(); } }, update: function() { if(this.active) { this.h+= this.vy; //if halfway across the screen then change the scene if(this.h >= 300) { game.level = this.level; if(this.scene === "play") { game.init(); } else if((game.scene === "over" \|\| game.scene === "crash" \|\| game.scene === "complete") && this.scene === "home") { game.crashes = 0; game.init(); } game.scene = this.scene; this.vy= -1; } //else if it's completely off the screen reset it and set to inactive else if(this.h < 0) { this.reset(); this.active = false; } } }, run: function() { this.draw(); this.update(); } }; return Transition; })(); var Vehicle = (function() { Vehicle = function(args) { this.points = args.points; this.startIndex = args.startIndex \|\| 0; this.x = args.x \|\| this.points[this.startIndex].x; this.y = args.y \|\| this.points[this.startIndex].y; this.w = args.w \|\| 35; this.h = args.h \|\| this.w 0.65; this.speed = args.speed \|\| 1; this.vel = args.vel \|\| 1; this.minvel = 0.5; this.maxvel = 2; this.dir = this.speed < 0 ? -1 : 1; this.tx = args.tx \|\| this.points[this.startIndex+1].x; //target x position this.ty = args.ty \|\| this.points[this.startIndex+1].y; //target y position this.pIndex = this.startIndex + 1; this.angle = atan2(this.ty - this.y, this.tx - this.x); this.color = args.color \|\| color(random(100, 220), random(100, 220), random(100, 220)); this.type = args.type \|\| ~~random(2); this.laps = 0; this.smokes = []; this.coords = [ {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0} ]; this.setCoords(); }; Vehicle.prototype = { setCoords: function() { var cosTheta = cos(this.angle), sinTheta = sin(this.angle); this.coords[0].x = ((-this.w/2)cosTheta - (-this.h/2)sinTheta) + this.x; this.coords[0].y = ((-this.w/2)sinTheta + (-this.h/2)cosTheta) + this.y; this.coords[1].x = (( this.w/2)cosTheta - (-this.h/2)sinTheta) + this.x; this.coords[1].y = (( this.w/2)sinTheta + (-this.h/2)cosTheta) + this.y; this.coords[2].x = (( this.w/2)cosTheta - ( this.h/2)sinTheta) + this.x; this.coords[2].y = (( this.w/2)sinTheta + ( this.h/2)cosTheta) + this.y; this.coords[3].x = ((-this.w/2)cosTheta - ( this.h/2)sinTheta) + this.x; this.coords[3].y = ((-this.w/2)sinTheta + ( this.h/2)cosTheta) + this.y; }, update: function() { this.x+= this.speed * this.vel * cos(this.angle); this.y+= this.speed * this.vel * sin(this.angle); if (dist(this.x, this.y, this.tx, this.ty) <= 15) { this.pIndex = (this.pIndex + 1) % this.points.length; if(this.pIndex === this.startIndex + 1) { this.laps++; } if(this.pIndex < this.points.length) { this.tx = this.points[this.pIndex].x; this.ty = this.points[this.pIndex].y; this.angle = atan2(this.ty-this.y, this.tx-this.x); } } this.setCoords(); }, draw: function() { pushMatrix(); translate(this.x, this.y); rotate(this.angle); pushStyle(); noStroke(); fill(this.color); rectMode(CENTER); rect(0, 0, this.w, this.h, 8); switch(this.type) { case 0: noStroke(); fill(this.color); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 10, 10, 6); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.5, this.h * 0.8, 4); fill(this.color); rect(-this.w * 0.10, 0, this.w * 0.3, this.h * 0.78, 0); fill(240); ellipse(this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; // fill(250, 200); // rect(0, 0, this.w * 0.5, this.h * 0.8, 4); // fill(0); // ellipse(this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); // ellipse(this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); // break; case 1: noStroke(); fill(this.color); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 10, 10, 6); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.5, this.h * 0.8, 4); fill(this.color); rect(-this.w * 0.10, 0, this.w * 0.3, this.h * 0.78, 0); fill(240); ellipse(this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; // fill(250, 200); // rect(-this.h * 0.2, 0, this.w * 0.5, this.h * 0.8, 4); // fill(0); // ellipse(-this.h * 0.2 + this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); // ellipse(-this.h * 0.2 + this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); // break; } popStyle(); popMatrix(); }, run: function(start) { this.draw(); if(start) { this.update(); } } }; return Vehicle; })(); var Player = (function() { Player = function(args) { Vehicle.call(this, args); }; Player.prototype = Object.create(Vehicle.prototype); Player.prototype.draw = function() { pushMatrix(); translate(this.x, this.y); rotate(this.angle); pushStyle(); switch(this.type) { case 1: noStroke(); fill(this.color); fill(232, 88, 93); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 7, 7, 6); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.75, this.h * 0.8, 4); fill(this.color); fill(240); rect(-this.w * 0.15, 0, this.w * 0.40, this.h * 0.78, 2); fill(232, 88, 93); rect(-this.w * 0.15, -this.h * 0.12, this.w * 0.39, this.h * 0.1, 0); rect(-this.w * 0.15, this.h * 0.12, this.w * 0.39, this.h * 0.1, 0); fill(240); ellipse(this.w * 0.18, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.18, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; case 2: noStroke(); fill(this.color); fill(60, 133, 201); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 10, 10, 6); fill(255, 100); rect(0, -this.h * 0.12, this.w * 0.90, this.h * 0.1); rect(0, this.h * 0.12, this.w * 0.90, this.h * 0.1); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.5, this.h * 0.8, 4); fill(this.color); fill(60, 133, 201); rect(-this.w * 0.10, 0, this.w * 0.3, this.h * 0.78, 0); fill(255, 100); rect(-this.w * 0.10, -this.h * 0.15, this.w * 0.3, this.h * 0.1); rect(-this.w * 0.10, this.h * 0.15, this.w * 0.3, this.h * 0.1); fill(240); ellipse(this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; case 3: noStroke(); fill(this.color); fill(242, 220, 121); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 8, 8, 6); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.5, this.h * 0.8, 4); fill(this.color); fill(242, 220, 121); rect(-this.w * 0.10, 0, this.w * 0.3, this.h * 0.90, 0); fill(70); rect(-this.w * 0.22, 0, this.w * 0.38, this.h * 0.6); rect(-this.w * 0.50, 0, this.w * 0.1, this.h * 0.90, 0); fill(240); ellipse(this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; case 4: noStroke(); fill(this.color); fill(50, 60, 65); rectMode(CENTER); rect(0, 0, this.w, this.h, 8, 8, 8, 8); fill(255, 100); rect(this.w * 0.30, -this.h * 0.06, this.w * 0.16, this.h * 0.05); rect(this.w * 0.30, this.h * 0.06, this.w * 0.16, this.h * 0.05); rect(this.w * 0.30, -this.h * 0.17, this.w * 0.16, this.h * 0.05); rect(this.w * 0.30, this.h * 0.17, this.w * 0.16, this.h * 0.05); fill(this.color); fill(240); rect(-this.w * 0.05, 0, this.w * 0.3, this.h * 0.78, 2); //sirens fill(0); rect(this.w * -0.10, 0, this.w * 0.05, this.h * 0.50); fill(25, 160, 255); rect(this.w * -0.10, this.h * 0.15, this.w * 0.05, this.h * 0.15); fill(240, 5, 5); rect(this.w * -0.10, -this.h * 0.15, this.w * 0.05, this.h * 0.15); fill(20); ellipse(this.w * 0.02, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.02, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; case 5: noStroke(); fill(this.color); fill(156, 111, 179); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 8, 8, 6); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.5, this.h * 0.8, 4); fill(this.color); fill(156, 111, 179); rect(-this.w * 0.10, 0, this.w * 0.3, this.h * 0.78, 0); fill(70); rect(-this.w * 0.22, 0, this.w * 0.38, this.h * 0.6); rect(-this.w * 0.50, 0, this.w * 0.1, this.h * 0.90, 0); fill(240); ellipse(this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; case 6: noStroke(); fill(this.color); fill(127, 209, 109); rectMode(CENTER); rect(0, 0, this.w, this.h, 6, 10, 10, 6); fill(255, 100); rect(0, -this.h * 0.12, this.w * 0.90, this.h * 0.1); rect(0, this.h * 0.12, this.w * 0.90, this.h * 0.1); fill(50, 200); rect(-this.w * 0.07, 0, this.w * 0.5, this.h * 0.8, 4); fill(this.color); fill(127, 209, 109); rect(-this.w * 0.10, 0, this.w * 0.3, this.h * 0.78, 0); fill(255, 100); rect(-this.w * 0.10, -this.h * 0.15, this.w * 0.3, this.h * 0.1); rect(-this.w * 0.10, this.h * 0.15, this.w * 0.3, this.h * 0.1); fill(240); ellipse(this.w * 0.1, this.w * 0.1, this.h * 0.1, this.h * 0.1); ellipse(this.w * 0.1, -this.w * 0.1, this.h * 0.1, this.h * 0.1); break; } popStyle(); popMatrix(); }; return Player; })(); var Game = (function() { Game = function() { this.scene = "load"; this.images = undefined; this.imageIndex = 0; this.loaded = false; this.shake = 0; this.shakedown = 0.1; this.timer = 0; this.keys = []; this.clicked = false; this.ms = 0; this.duration = 1; this.laps = 1; this.crashes = 0; this.start = false; this.gameOver = false; this.sceneImage = undefined; this.unlocked = [ true, true, false, false, false, false, false, false ]; this.level = 0; this.levels = [ //level 0 - Menu { width: 40, img: undefined, colors: { background: color(220, 195, 165), trackInner: color(255, 0), track: color(110, 90, 80), trackLines: color(255, 100) }, duration: 60, laps: 1, trees: [ { x: 100, y: 100, diameter: 80 }, { x: 200, y: 100, diameter: 100 }, { x: 450, y: 420, diameter: 100 }, { x: 95, y: 520, diameter: 90 } ], rocks: [ { x: 300, y: 100, diameter: 70 }, { x: 170, y: 420, diameter: 60 } ], water: [], tunnels: [], tracks: [ //track 0 [ {x: 298, y: 45}, {x: 419, y: 45}, {x: 508, y: 128}, {x: 501, y: 216}, {x: 490, y: 314}, {x: 386, y: 380}, {x: 298, y: 377}, {x: 184, y: 372}, {x: 91, y: 282}, {x: 97, y: 189}, {x: 102, y: 98}, {x: 204, y: 45} ], //track 1 [ {x: 298, y: 225}, {x: 419, y: 225}, {x: 508, y: 328}, {x: 501, y: 416}, {x: 490, y: 514}, {x: 386, y: 560}, {x: 298, y: 557}, {x: 184, y: 552}, {x: 91, y: 482}, {x: 97, y: 389}, {x: 102, y: 298}, {x: 204, y: 225} ] ], player: { trackIndex: 0, startIndex: 20, speed: 4, color: color(68, 177, 189) }, vehicles: [ { trackIndex: 1, startIndex: 0, speed: 3, } ] }, //level 1 { width: 40, img: undefined, colors: { background: color(220, 195, 165), trackInner: color(255, 0), track: color(110, 90, 80), trackLines: color(255, 100) }, duration: 25, laps: 5, //5 trees: [ { x: 100, y: 120, diameter: 80 }, { x: 200, y: 120, diameter: 100 }, { x: 300, y: 420, diameter: 100 }, { x: 450, y: 260, diameter: 90 } ], rocks: [ { x: 455, y: 400, diameter: 70 }, { x: 320, y: 270, diameter: 60 } ], water: [ // { // x: 255, // y: 420, // diameter: 60 // } ], tunnels: [], tracks: [ //track 0 [ {x: 140, y: 123}, {x: 219, y: 46}, {x: 336, y: 80}, {x: 389, y: 152}, {x: 426, y: 212}, {x: 402, y: 322}, {x: 328, y: 366}, {x: 266, y: 394}, {x: 247, y: 442}, {x: 194, y: 448}, {x: 90, y: 450}, {x: 43, y: 237} ], //track 1 [ {x: 319, y: 199}, {x: 380, y: 178}, {x: 464, y: 185}, {x: 516, y: 249}, {x: 553, y: 297}, {x: 549, y: 374}, {x: 514, y: 441}, {x: 482, y: 497}, {x: 405, y: 446}, {x: 344, y: 458}, {x: 302, y: 465}, {x: 243, y: 481}, {x: 209, y: 449}, {x: 146, y: 362}, {x: 193, y: 254} ] ], player: { trackIndex: 0, startIndex: 20, speed: 4, color: color(68, 177, 189) }, vehicles: [ { trackIndex: 1, startIndex: 20, speed: 2, }, { trackIndex: 1, startIndex: 0, speed: 2, } ] }, //level 2 { width: 40, img: undefined, colors: { background: color(220, 195, 165), trackInner: color(255, 0), track: color(110, 90, 80), trackLines: color(255, 100) }, duration: 50, laps: 5, //5 trees: [ { x: 525, y: 165, diameter: 80 }, { x: 200, y: 120, diameter: 100 }, { x: 300, y: 420, diameter: 100 }, { x: 450, y: 260, diameter: 90 }, { x: 215, y: 640, diameter: 100 }, { x: 495, y: 545, diameter: 90 } ], rocks: [ { x: 455, y: 400, diameter: 70 }, { x: 320, y: 270, diameter: 60 }, { x: 460, y: 665, diameter: 60 } ], water: [ { x: 610, y: 240, diameter: 50 } ], tunnels: [ { x1: 95, y1: 472, x2: 98, y2: 395, x3: 181, y3: 354, x4: 210, y4: 310, }, { x1: 286, y1: 89, x2: 360, y2: 60, x3: 442, y3: 67, x4: 519, y4: 93, } //bezier(95, 472, 98, 395, 181, 354, 210, 310); //bezier(286, 89, 360, 60, 442, 67, 519, 93); ], tracks: [ //track 0 [ {x: 348, y: 73}, {x: 487, y: 64}, {x: 586, y: 111}, {x: 607, y: 173}, {x: 626, y: 239}, {x: 595, y: 288}, {x: 560, y: 339}, {x: 533, y: 387}, {x: 537, y: 463}, {x: 566, y: 532}, {x: 589, y: 602}, {x: 572, y: 683}, {x: 512, y: 710}, {x: 432, y: 738}, {x: 355, y: 746}, {x: 277, y: 717}, {x: 203, y: 686}, {x: 124, y: 614}, {x: 109, y: 553}, {x: 87, y: 474}, {x: 104, y: 399}, {x: 150, y: 364}, {x: 204, y: 321}, {x: 230, y: 280}, {x: 219, y: 239}, {x: 197, y: 169}, {x: 238, y: 73}, ], //track 1 [ {x: 319, y: 199}, {x: 380, y: 178}, {x: 464, y: 185}, {x: 516, y: 249}, {x: 553, y: 297}, {x: 549, y: 374}, {x: 514, y: 441}, {x: 482, y: 497}, {x: 405, y: 446}, {x: 344, y: 458}, {x: 302, y: 465}, {x: 243, y: 481}, {x: 209, y: 449}, {x: 146, y: 362}, {x: 193, y: 254} ], //track 2 [ {x: 368, y: 589}, {x: 445, y: 627}, {x: 569, y: 583}, {x: 610, y: 635}, {x: 647, y: 675}, {x: 633, y: 731}, {x: 580, y: 743}, {x: 497, y: 764}, {x: 400, y: 772}, {x: 305, y: 761}, {x: 225, y: 744}, {x: 149, y: 717}, {x: 138, y: 667}, {x: 126, y: 608}, {x: 144, y: 548}, {x: 190, y: 529}, {x: 263, y: 505}, {x: 314, y: 560}, ] ], player: { trackIndex: 0, startIndex: 0, speed: 4, color: color(68, 177, 189) }, vehicles: [ { trackIndex: 1, startIndex: 20, speed: 2, }, { trackIndex: 1, startIndex: 0, speed: 3, }, { trackIndex: 2, startIndex: 30, speed: 2.5, } ] }, //level 3 { width: 40, img: undefined, colors: { background: color(220, 195, 165), trackInner: color(255, 0), track: color(110, 90, 80), trackLines: color(255, 100) }, duration: 45, laps: 5, //5 trees: [ { x: 100, y: 100, diameter: 80 }, { x: 200, y: 100, diameter: 100 }, { x: 300, y: 400, diameter: 90 }, { x: 495, y: 300, diameter: 100 }, { x: 490, y: 525, diameter: 100 }, { x: 175, y: 510, diameter: 90 }, { x: 300, y: 270, diameter: 80 } ], rocks: [ { x: 155, y: 210, diameter: 70 }, { x: 330, y: 500, diameter: 60 }, { x: 475, y: 340, diameter: 60 } ], water: [ { x: 480, y: 445, diameter: 50 } ], tunnels: [], tracks: [ //track 0 [ {x: 140, y: 103}, {x: 219, y: 26}, {x: 336, y: 60}, {x: 389, y: 132}, {x: 426, y: 192}, {x: 402, y: 302}, {x: 328, y: 346}, {x: 266, y: 374}, {x: 247, y: 422}, {x: 194, y: 428}, {x: 90, y: 430}, {x: 43, y: 217} ], //track 1 [ {x: 319, y: 179}, {x: 380, y: 158}, {x: 464, y: 165}, {x: 516, y: 229}, {x: 553, y: 277}, {x: 549, y: 354}, {x: 514, y: 421}, {x: 482, y: 477}, {x: 405, y: 426}, {x: 344, y: 438}, {x: 302, y: 445}, {x: 243, y: 461}, {x: 209, y: 429}, {x: 146, y: 342}, {x: 193, y: 234} ], //track 2 [ {x: 254, y: 153}, {x: 348, y: 135}, {x: 404, y: 254}, {x: 412, y: 328}, {x: 419, y: 401}, {x: 429, y: 487}, {x: 389, y: 536}, {x: 353, y: 575}, {x: 272, y: 583}, {x: 181, y: 558}, {x: 92, y: 520}, {x: 90, y: 390}, {x: 140, y: 361}, {x: 193, y: 338}, {x: 235, y: 313}, {x: 223, y: 274}, {x: 215, y: 239}, {x: 215, y: 162} ] ], player: { trackIndex: 1, startIndex: 0, speed: 3, color: color(194, 107, 70) }, vehicles: [ { trackIndex: 0, startIndex: 0, speed: 2.5, }, { trackIndex: 0, startIndex: 10, speed: 4, }, { trackIndex: 0, startIndex: 20, speed: 5.5, }, { trackIndex: 2, startIndex: 10, speed: 6.5, color: color(230, 227, 32) } ] }, //level 4 { width: 35, img: undefined, colors: { background: color(220, 195, 165), trackInner: color(255, 0), track: color(110, 90, 80), trackLines: color(255, 100) }, duration: 45, laps: 5, //5 trees: [ { x: 122, y: 168, diameter: 100 }, { x: 234, y: 89, diameter: 80 }, { x: 556, y: 89, diameter: 90 }, { x: 690, y: 183, diameter: 100 }, { x: 131, y: 265, diameter: 80 }, { x: 541, y: 319, diameter: 100 }, { x: 398, y: 408, diameter: 90 }, { x: 316, y: 529, diameter: 100 }, { x: 601, y: 466, diameter: 80 }, { x: 498, y: 543, diameter: 100 }, { x: 627, y: 692, diameter: 90 }, { x: 518, y: 695, diameter: 90 }, { x: 311, y: 655, diameter: 80 }, { x: 118, y: 559, diameter: 100 }, { x: 43, y: 384, diameter: 100 } ], rocks: [ { x: 590, y: 194, diameter: 70 }, { x: 279, y: 307, diameter: 70 }, { x: 215, y: 475, diameter: 60 }, { x: 674, y: 578, diameter: 70 }, { x: 180, y: 700, diameter: 60 }, { x: 748, y: 418, diameter: 70 } ], water: [ { x: 630, y: 315, diameter: 50 }, // { // x: 176, // y: 505, // diameter: 50 // } ], tunnels: [ { x1: 510, y1: 601, x2: 437, y2: 635, x3: 357, y3: 634, x4: 282, y4: 599 }, { x1: 252, y1: 223, x2: 343, y2: 162, x3: 456, y3: 163, x4: 538, y4: 218 } ], tracks: [ //track 0 [ {x: 394, y: 176}, {x: 511, y: 172}, {x: 660, y: 275}, {x: 651, y: 409}, {x: 644, y: 542}, {x: 505, y: 628}, {x: 409, y: 625}, {x: 290, y: 637}, {x: 154, y: 534}, {x: 148, y: 422}, {x: 133, y: 276}, {x: 290, y: 175} ], //track 1 [ {x: 551, y: 44}, {x: 645, y: 38}, {x: 748, y: 123}, {x: 750, y: 205}, {x: 758, y: 310}, {x: 657, y: 392}, {x: 576, y: 395}, {x: 458, y: 406}, {x: 344, y: 321}, {x: 347, y: 222}, {x: 344, y: 117}, {x: 464, y: 43} ], //track 2 [ {x: 229, y: 44}, {x: 341, y: 39}, {x: 466, y: 132}, {x: 450, y: 238}, {x: 444, y: 329}, {x: 340, y: 393}, {x: 237, y: 392}, {x: 138, y: 391}, {x: 41, y: 311}, {x: 47, y: 201}, {x: 54, y: 121}, {x: 139, y: 54} ], //track 3 [ {x: 558, y: 419}, {x: 661, y: 424}, {x: 755, y: 510}, {x: 748, y: 598}, {x: 748, y: 702}, {x: 632, y: 778}, {x: 546, y: 769}, {x: 447, y: 767}, {x: 349, y: 694}, {x: 346, y: 607}, {x: 346, y: 502}, {x: 453, y: 415} ], //track 4 [ {x: 242, y: 419}, {x: 344, y: 419}, {x: 442, y: 492}, {x: 448, y: 572}, {x: 458, y: 671}, {x: 363, y: 772}, {x: 261, y: 770}, {x: 153, y: 778}, {x: 41, y: 681}, {x: 46, y: 588}, {x: 49, y: 492}, {x: 152, y: 417} ] ], player: { trackIndex: 0, startIndex: 10, speed: 4, color: color(68, 177, 189) }, vehicles: [ { trackIndex: 1, startIndex: 10, speed: 3.2, }, { trackIndex: 1, startIndex: 0, speed: 1.7, }, { trackIndex: 2, startIndex: 0, speed: 3.7, }, { trackIndex: 3, startIndex: 15, speed: 2.8, }, { trackIndex: 4, startIndex: 0, speed: 4, }, { trackIndex: 4, startIndex: 10, speed: 2.5, } ] }, //level 5 { width: 35, img: undefined, colors: { background: color(220, 195, 165), trackInner: color(255, 0), track: color(110, 90, 80), trackLines: color(255, 100) }, duration: 60, laps: 5, //5 trees: [ { x: 279, y: 95, diameter: 80 }, { x: 183, y: 173, diameter: 80 }, { x: 604, y: 180, diameter: 80 }, { x: 645, y: 274, diameter: 100 }, { x: 517, y: 312, diameter: 90 }, { x: 408, y: 281, diameter: 100 }, { x: 332, y: 331, diameter: 70 }, { x: 192, y: 425, diameter: 90 }, { x: 297, y: 500, diameter: 80 }, { x: 506, y: 476, diameter: 80 }, { x: 513, y: 596, diameter: 80 }, { x: 391, y: 578, diameter: 100 }, { x: 250, y: 616, diameter: 80 }, { x: 660, y: 635, diameter: 80 }, { x: 717, y: 703, diameter: 100 }, { x: 64, y: 258, diameter: 90 }, { x: 392, y: 56, diameter: 70 }, { x: 683, y: 356, diameter: 100 }, { x: 437, y: 747, diameter: 80 } ], rocks: [ { x: 372, y: 164, diameter: 50 }, { x: 622, y: 406, diameter: 50 }, { x: 414, y: 397, diameter: 70 }, { x: 457, y: 655, diameter: 60 }, { x: 629, y: 556, diameter: 70 }, { x: 181, y: 512, diameter: 60 } ], water: [ { x: 582, y: 438, diameter: 50 }, { x: 323, y: 407, diameter: 50 } ], tunnels: [ { x1: 373, y1: 99, x2: 453, y2: 139, x3: 473, y3: 197, x4: 468, y4: 264 }, { x1: 147, y1: 293, x2: 182, y2: 329, x3: 228, y3: 359, x4: 290, y4: 385 } //bezier(373, 99, 453, 139, 473, 197, 468, 264); //bezier(147, 293, 182, 329, 228, 359, 290, 385); ], tracks: [ //track 0 [ {x: 136, y: 115}, {x: 236, y: 18}, {x: 399, y: 87}, {x: 449, y: 163}, {x: 493, y: 244}, {x: 439, y: 324}, {x: 486, y: 392}, {x: 518, y: 433}, {x: 658, y: 442}, {x: 680, y: 498}, {x: 713, y: 571}, {x: 709, y: 680}, {x: 642, y: 717}, {x: 563, y: 759}, {x: 426, y: 739}, {x: 387, y: 682}, {x: 324, y: 587}, {x: 380, y: 514}, {x: 357, y: 450}, {x: 334, y: 384}, {x: 238, y: 373}, {x: 187, y: 329}, {x: 118, y: 283}, {x: 81, y: 184} ], //track 1 [ {x: 107, y: 463}, {x: 163, y: 369}, {x: 255, y: 307}, {x: 355, y: 242}, {x: 471, y: 178}, {x: 561, y: 114}, {x: 619, y: 133}, {x: 707, y: 165}, {x: 718, y: 261}, {x: 680, y: 303}, {x: 616, y: 368}, {x: 536, y: 383}, {x: 453, y: 452}, {x: 373, y: 514}, {x: 275, y: 590}, {x: 165, y: 573}, {x: 108, y: 555}, {x: 88, y: 502} ], //track 2 [ {x: 515, y: 534}, {x: 570, y: 530}, {x: 666, y: 439}, {x: 728, y: 506}, {x: 759, y: 548}, {x: 760, y: 626}, {x: 720, y: 650}, {x: 665, y: 685}, {x: 577, y: 667}, {x: 512, y: 694}, {x: 461, y: 707}, {x: 395, y: 758}, {x: 327, y: 713}, {x: 275, y: 665}, {x: 285, y: 569}, {x: 346, y: 541}, {x: 412, y: 510}, {x: 466, y: 537} ], //track 3 [ {x: 176, y: 39}, {x: 249, y: 37}, {x: 336, y: 65}, {x: 328, y: 131}, {x: 317, y: 194}, {x: 262, y: 243}, {x: 200, y: 244}, {x: 145, y: 248}, {x: 59, y: 226}, {x: 57, y: 158}, {x: 53, y: 86}, {x: 113, y: 38} ] ], player: { trackIndex: 0, startIndex: 33, speed: 4, color: color(68, 177, 189) }, vehicles: [ { trackIndex: 1, startIndex: 20, speed: 2.8, }, { trackIndex: 1, startIndex: 0, speed: 4.1, }, { trackIndex: 2, startIndex: 0, speed: 2.5, }, { trackIndex: 2, startIndex: 10, speed: 4.2, }, { trackIndex: 3, startIndex: 0, speed: 2, } ] }, //level 6 { width: 35, img: undefined, colors: { background: color(220, 195, 165), trackInner: color(255, 0), track: color(110, 90, 80), trackLines: color(255, 100) }, duration: 60, laps: 5, //5 trees: [ { x: 179, y: 148, diameter: 100 }, { x: 245, y: 251, diameter: 80 }, { x: 205, y: 351, diameter: 90 }, { x: 423, y: 284, diameter: 80 }, { x: 624, y: 137, diameter: 100 }, { x: 567, y: 232, diameter: 80 }, { x: 647, y: 315, diameter: 90 }, { x: 392, y: 399, diameter: 90 }, { x: 112, y: 346, diameter: 80 }, { x: 547, y: 479, diameter: 100 }, { x: 425, y: 525, diameter: 80 }, { x: 424, y: 637, diameter: 100 }, { x: 209, y: 517, diameter: 90 }, { x: 164, y: 593, diameter: 90 }, { x: 474, y: 724, diameter: 80 }, { x: 88, y: 462, diameter: 100 }, ], rocks: [ { x: 519, y: 114, diameter: 50 }, { x: 671, y: 468, diameter: 50 }, { x: 311, y: 651, diameter: 50 }, { x: 588, y: 656, diameter: 50 }, ], water: [ { x: 419, y: 221, diameter: 50 }, { x: 73, y: 334, diameter: 50 } ], tunnels: [ { x1: 238, y1: 667, x2: 225, y2: 609, x3: 295, y3: 559, x4: 288, y4: 500 }, { x1: 277, y1: 125, x2: 305, y2: 188, x3: 359, y3: 237, x4: 429, y4: 218 } ], tracks: [ //track 0 [ {x: 119, y: 64}, {x: 172, y: 46}, {x: 260, y: 74}, {x: 278, y: 126}, {x: 300, y: 187}, {x: 360, y: 238}, {x: 430, y: 218}, {x: 501, y: 203}, {x: 574, y: 151}, {x: 645, y: 184}, {x: 736, y: 240}, {x: 751, y: 310}, {x: 732, y: 360}, {x: 723, y: 400}, {x: 664, y: 423}, {x: 616, y: 401}, {x: 567, y: 374}, {x: 494, y: 332}, {x: 457, y: 386}, {x: 425, y: 442}, {x: 464, y: 513}, {x: 510, y: 537}, {x: 575, y: 570}, {x: 664, y: 619}, {x: 652, y: 683}, {x: 641, y: 740}, {x: 566, y: 776}, {x: 509, y: 773}, {x: 454, y: 773}, {x: 401, y: 773}, {x: 333, y: 759}, {x: 275, y: 746}, {x: 219, y: 677}, {x: 240, y: 625}, {x: 268, y: 573}, {x: 298, y: 536}, {x: 286, y: 489}, {x: 260, y: 431}, {x: 150, y: 462}, {x: 103, y: 414}, {x: 53, y: 363}, {x: 77, y: 296}, {x: 99, y: 239}, {x: 122, y: 173}, {x: 15, y: 115} ], //track 1 [ {x: 385, y: 76}, {x: 442, y: 109}, {x: 504, y: 161}, {x: 522, y: 244}, {x: 535, y: 318}, {x: 543, y: 415}, {x: 492, y: 446}, {x: 423, y: 484}, {x: 340, y: 438}, {x: 278, y: 377}, {x: 202, y: 303}, {x: 124, y: 328}, {x: 88, y: 267}, {x: 53, y: 194}, {x: 94, y: 109}, {x: 151, y: 71}, {x: 195, y: 41}, {x: 285, y: 13} ], //track 2 [ {x: 104, y: 570}, {x: 117, y: 490}, {x: 193, y: 420}, {x: 260, y: 392}, {x: 328, y: 360}, {x: 422, y: 324}, {x: 511, y: 360}, {x: 579, y: 390}, {x: 629, y: 435}, {x: 613, y: 501}, {x: 595, y: 557}, {x: 529, y: 584}, {x: 504, y: 611}, {x: 457, y: 656}, {x: 444, y: 713}, {x: 378, y: 726}, {x: 316, y: 733}, {x: 255, y: 730}, {x: 192, y: 698}, {x: 135, y: 670}, {x: 98, y: 622} ], //track 3 [ {x: 569, y: 64}, {x: 648, y: 75}, {x: 691, y: 143}, {x: 705, y: 232}, {x: 722, y: 332}, {x: 741, y: 394}, {x: 724, y: 470}, {x: 714, y: 521}, {x: 682, y: 584}, {x: 695, y: 634}, {x: 711, y: 724}, {x: 569, y: 758}, {x: 535, y: 713}, {x: 526, y: 706}, {x: 506, y: 644}, {x: 427, y: 583}, {x: 379, y: 552}, {x: 313, y: 498}, {x: 331, y: 422}, {x: 349, y: 350}, {x: 324, y: 297}, {x: 329, y: 253}, {x: 336, y: 192}, {x: 357, y: 153}, {x: 398, y: 114}, {x: 447, y: 65}, {x: 498, y: 57} ] ], player: { trackIndex: 0, startIndex: 10, speed: 4, color: color(68, 177, 189) }, vehicles: [ { trackIndex: 1, startIndex: 0, speed: 2.7, }, { trackIndex: 1, startIndex: 15, speed: 4.1, }, { trackIndex: 2, startIndex: 0, speed: 2.5, }, { trackIndex: 2, startIndex: 20, speed: 4.2, }, { trackIndex: 3, startIndex: 0, speed: 3, }, { trackIndex: 3, startIndex: 20, speed: 2.3, } ] }, //level 7 { width: 35, img: undefined, colors: { background: color(220, 195, 165), trackInner: color(255, 0), track: color(110, 90, 80), trackLines: color(255, 100) }, duration: 45, laps: 5, //5 trees: [ { x: 335, y: 132, diameter: 80 }, { x: 522, y: 136, diameter: 100 }, { x: 673, y: 194, diameter: 100 }, { x: 690, y: 356, diameter: 90 }, { x: 492, y: 294, diameter: 100 }, { x: 647, y: 528, diameter: 90 }, { x: 421, y: 443, diameter: 80 }, { x: 164, y: 155, diameter: 90 }, { x: 149, y: 303, diameter: 80 }, { x: 228, y: 403, diameter: 100 }, { x: 303, y: 527, diameter: 90 }, { x: 136, y: 519, diameter: 80 }, { x: 179, y: 635, diameter: 80 }, { x: 403, y: 649, diameter: 100 } ], rocks: [ { x: 126, y: 404, diameter: 70 }, { x: 605, y: 102, diameter: 60 }, { x: 550, y: 400, diameter: 80 }, { x: 497, y: 535, diameter: 60 } ], water: [], tunnels: [ { x1: 430, y1: 543, x2: 464, y2: 602, x3: 526, y3: 646, x4: 595, y4: 649, }, { x1: 714, y1: 172, x2: 698, y2: 118, x3: 647, y3: 47, x4: 596, y4: 45, }, { x1: 458, y1: 94, x2: 408, y2: 138, x3: 400, y3: 198, x4: 393, y4: 271, }, { x1: 291, y1: 630, x2: 244, y2: 693, x3: 165, y3: 706, x4: 96, y4: 623, }, { x1: 36, y1: 463, x2: 24, y2: 388, x3: 27, y3: 310, x4: 51, y4: 224, }, { x1: 269, y1: 141, x2: 304, y2: 179, x3: 322, y3: 230, x4: 341, y4: 292, } ], tracks: [ //track 0 [ {x: 195, y: 107}, {x: 274, y: 105}, {x: 317, y: 201}, {x: 340, y: 290}, {x: 375, y: 405}, {x: 390, y: 509}, {x: 467, y: 592}, {x: 538, y: 662}, {x: 653, y: 674}, {x: 712, y: 596}, {x: 767, y: 510}, {x: 756, y: 377}, {x: 743, y: 276}, {x: 718, y: 166}, {x: 683, y: 53}, {x: 590, y: 44}, {x: 502, y: 42}, {x: 417, y: 104}, {x: 404, y: 192}, {x: 387, y: 287}, {x: 389, y: 372}, {x: 364, y: 480}, {x: 336, y: 575}, {x: 284, y: 680}, {x: 195, y: 683}, {x: 117, y: 677}, {x: 62, y: 592}, {x: 46, y: 512}, {x: 21, y: 413}, {x: 24, y: 309}, {x: 52, y: 221}, {x: 74, y: 152}, {x: 139, y: 107} ], //track 1 [ {x: 160, y: 233}, {x: 243, y: 200}, {x: 344, y: 186}, {x: 468, y: 196}, {x: 570, y: 201}, {x: 696, y: 230}, {x: 735, y: 302}, {x: 772, y: 372}, {x: 759, y: 451}, {x: 727, y: 502}, {x: 676, y: 575}, {x: 612, y: 594}, {x: 525, y: 601}, {x: 411, y: 608}, {x: 308, y: 619}, {x: 212, y: 591}, {x: 118, y: 559}, {x: 36, y: 498}, {x: 38, y: 396}, {x: 39, y: 303}, {x: 98, y: 259} ] ], player: { trackIndex: 0, startIndex: 22, speed: 4, color: color(68, 177, 189) }, vehicles: [ { trackIndex: 1, startIndex: 30, speed: 2, }, { trackIndex: 1, startIndex: 0, speed: 3.8, } ] } ]; this.carIndex = 1; this.points = []; this.player = undefined; this.vehicles = []; this.explosions = []; this.smokes = []; this.trees = []; this.rocks = []; this.waters = []; this.tunnels = []; this.crashedCarIndex = 0; this.cam = { x: 0, y: 0 }; this.transition = Transition.new({ color: this.levels[0].colors.track }); this.cars = { show: false, value: 100, min: 100, max: -10 }; this.buttons = { home: { how: Button.new({ x: 210, y: 410, w: 90, h: 45, content: "HOW", func: function() { game.cars.show = false; game.transition.level = 0; game.transition.scene = "how"; game.transition.active = true; } }), select: Button.new({ x: 310, y: 410, w: 90, h: 45, content: "LEVELS", func: function() { game.cars.show = false; game.transition.level = 0; game.transition.scene = "select"; game.transition.active = true; } }), cars: Button.new({ x: 240, y: 465, w: 120, h: 45, content: "SELECT CAR", func: function() { game.cars.show = !game.cars.show; } }), play: Button.new({ x: 240, y: 277, w: 120, content: "PLAY", func: function() { game.cars.show = false; game.transition.level = 1; game.transition.scene = "play"; game.transition.active = true; } }) }, over: { replay: Button.new({ x: 230, y: 310, w: 140, content: "REPLAY", func: function() { game.cars.show = false; game.transition.level = game.level; game.transition.scene = "play"; game.transition.active = true; } }), home: Button.new({ x: 230, y: 375, w: 140, h: 50, content: "HOME", func: function() { game.cars.show = false; game.transition.level = 0; game.transition.scene = "home"; game.transition.active = true; } }), cars: Button.new({ x: 230, y: 440, w: 140, content: "SELECT CAR", func: function() { game.cars.show = !game.cars.show; } }) }, crash: { replay: Button.new({ x: 230, y: 310, w: 140, content: "REPLAY", func: function() { game.cars.show = false; game.transition.level = game.level; game.transition.scene = "play"; game.transition.active = true; } }), home: Button.new({ x: 230, y: 375, w: 140, h: 50, content: "HOME", func: function() { game.cars.show = false; game.transition.level = 0; game.transition.scene = "home"; game.transition.active = true; } }), cars: Button.new({ x: 230, y: 440, w: 140, content: "SELECT CAR", func: function() { game.cars.show = !game.cars.show; } }) }, next: { play: Button.new({ x: 230, y: 370, w: 140, content: "NEXT", func: function() { game.cars.show = false; game.transition.level = game.level + 1; game.transition.scene = "play"; game.transition.active = true; } }), cars: Button.new({ x: 230, y: 440, w: 140, content: "SELECT CAR", func: function() { game.cars.show = !game.cars.show; } }) }, complete: { home: Button.new({ x: 225, y: 520, w: 150, h: 50, content: "HOME", func: function() { game.cars.show = false; game.transition.level = 0; game.transition.scene = "home"; game.transition.active = true; } }) }, how: { home: Button.new({ x: 225, y: 520, w: 150, h: 50, content: "Back", func: function() { game.cars.show = false; game.transition.level = game.level; game.transition.scene = "home"; game.transition.active = true; } }) }, select: { home: Button.new({ x: 225, y: 520, w: 150, h: 50, content: "Back", func: function() { game.cars.show = false; game.transition.level = game.level; game.transition.scene = "home"; game.transition.active = true; } }), levels: { level1: LevelButton.new({ x: 240, y: 150, w: 120, h: 40, content: "LEVEL 1", level: 1, func: function() { game.cars.show = false; game.transition.level = 1; game.transition.scene = "play"; game.transition.active = true; } }), level2: LevelButton.new({ x: 240, y: 200, w: 120, h: 40, content: "LEVEL 2", level: 2, func: function() { game.cars.show = false; game.transition.level = 2; game.transition.scene = "play"; game.transition.active = true; } }), level3: LevelButton.new({ x: 240, y: 250, w: 120, h: 40, content: "LEVEL 3", level: 3, func: function() { game.cars.show = false; game.transition.level = 3; game.transition.scene = "play"; game.transition.active = true; } }), level4: LevelButton.new({ x: 240, y: 300, w: 120, h: 40, content: "LEVEL 4", level: 4, func: function() { game.cars.show = false; game.transition.level = 4; game.transition.scene = "play"; game.transition.active = true; } }), level5: LevelButton.new({ x: 240, y: 350, w: 120, h: 40, content: "LEVEL 5", level: 5, func: function() { game.cars.show = false; game.transition.level = 5; game.transition.scene = "play"; game.transition.active = true; } }), level6: LevelButton.new({ x: 240, y: 400, w: 120, h: 40, content: "LEVEL 6", level: 6, func: function() { game.cars.show = false; game.transition.level = 6; game.transition.scene = "play"; game.transition.active = true; } }), level7: LevelButton.new({ x: 240, y: 450, w: 120, h: 40, content: "LEVEL 7", level: 7, func: function() { game.cars.show = false; game.transition.level = 7; game.transition.scene = "play"; game.transition.active = true; } }) } } }; this.carButtons = { home: { car1: CarButton.new({ x: 60, y: 560, w: 80, type: 1, content: "1", func: function() { game.carIndex = 1; game.player.type = 1; } }), car2: CarButton.new({ x: 155, y: 560, w: 80, type: 2, content: "2", func: function() { game.carIndex = 2; game.player.type = 2; } }), car3: CarButton.new({ x: 250, y: 560, w: 80, type: 3, content: "3", func: function() { game.carIndex = 3; game.player.type = 3; } }), car4: CarButton.new({ x: 345, y: 560, w: 80, type: 4, content: "4", func: function() { game.carIndex = 4; game.player.type = 4; } }), car5: CarButton.new({ x: 440, y: 560, w: 80, type: 5, content: "5", func: function() { game.carIndex = 5; game.player.type = 5; } }), car6: CarButton.new({ x: 535, y: 560, w: 80, type: 6, content: "6", func: function() { game.carIndex = 6; game.player.type = 6; } }) } }; //initial setup this.gtx = createGraphics(800, 800, P2D); this.setup(); }; Game.prototype = { tree: function(args) { pushMatrix(); translate(300, 300); noStroke(); fill(args.color1); for(var i = 0; i < 180; i+= 10) { rotate(random(args.rotFrom \|\| 5, args.rotTo \|\| 15)); ellipse(0, -0, 15, 100); } translate(2, 0); fill(args.color2); for(var i = 0; i < 180; i+= 10) { rotate(random(args.rotFrom \|\| 5, args.rotTo \|\| 15)); ellipse(0, 0, 5, 80); } popMatrix(); }, getRandomTree: function() { switch(~~random(4)) { case 0: return this.images.tree1; case 1: return this.images.tree2; case 2: return this.images.tree3; case 3: return this.images.tree4; } }, getRandomRock: function() { switch(~~random(4)) { case 0: return this.images.rock1; case 1: return this.images.rock2; case 2: return this.images.rock3; case 3: return this.images.rock4; } }, getRandomWater: function() { switch(~~random(2)) { case 0: return this.images.water; case 1: return this.images.mud; } }, generateImages: function(index) { var level = this.levels[index]; this.gtx.background(level.colors.background); this.gtx.noStroke(); this.gtx.fill(209, 183, 152); for(var i = 0; i < 150; i++) { var diameter = random(10, 20); this.gtx.ellipse(random(800), random(800), diameter, diameter); } //draw the background for the beziers for(var i = 0; i < level.tracks.length; i++) { var track = level.tracks[i]; this.gtx.noStroke(); this.gtx.fill(level.colors.trackInner); this.gtx.beginShape(); this.gtx.vertex(track[0].x, track[0].y); for(var j = 1; j < level.tracks[i].length; j+=3) { this.gtx.bezierVertex( track[j].x, track[j].y, track[j+1].x, track[j+1].y, track[(j+2)%track.length].x, track[(j+2)%track.length].y ); } this.gtx.endShape(); } //draw the track (beziers) this.gtx.noFill(); for(var i = 0; i < level.tracks.length; i++) { var track = level.tracks[i]; this.gtx.stroke(level.colors.track); this.gtx.strokeWeight(level.width * 1.5); for(var j = 0; j < level.tracks[i].length; j+=3) { this.gtx.bezier( track[j].x, track[j].y, track[j+1].x, track[j+1].y, track[j+2].x, track[j+2].y, track[(j+3)%track.length].x, track[(j+3)%track.length].y ); } this.gtx.strokeWeight(1); } //draw the dots and tangent lines this.gtx.noFill(); this.gtx.stroke(level.colors.trackLines); for(var i = 0; i < level.tracks.length; i++) { for(var j = 0; j < this.points[index][i].length; j++) { var p = this.points[index][i][j]; this.gtx.line( p.x - cos(p.angle + 90) * 3, p.y - sin(p.angle + 90) * 3, p.x + cos(p.angle + 90) * 3, p.y + sin(p.angle + 90) * 3); } } var p = this.points[index][level.player.trackIndex][level.player.startIndex]; this.gtx.line( p.x + sin(p.angle + 90) * level.width * 0.7, p.y - cos(p.angle + 90) * level.width * 0.7, p.x - sin(p.angle + 90) * level.width * 0.7, p.y + cos(p.angle + 90) * level.width * 0.7); return this.gtx.get(); }, setup: function() { //add arrays for each level for(var i = 0; i < this.levels.length; i++) { //add array to points array this.points.push([]); //add sub array for each track within the level for(var j = 0; j < this.levels[i].tracks.length; j++) { this.points[i].push([]); } //add array to tunnels array this.tunnels.push([]); //add sub array for each tunnel within the level for(var j = 0; j < this.levels[i].tunnels.length; j++) { this.tunnels[i].push([]); } //add array to water array this.waters.push([]); //add sub array for each water within the level for(var j = 0; j < this.levels[i].water.length; j++) { this.waters[i].push([]); } } //add points for each track for each level for(var i = 0; i < this.levels.length; i++) { for(var j = 0; j < this.levels[i].tracks.length; j++) { var track = this.levels[i].tracks[j]; for(var n = 0; n < track.length; n+= 3) { var steps = 20; for(var k = 0; k < steps; k++) { var t = k / steps; var x = bezierPoint(track[n].x, track[n+1].x, track[n+2].x, track[(n+3)%track.length].x, t); var y = bezierPoint(track[n].y, track[n+1].y, track[n+2].y, track[(n+3)%track.length].y, t); var tx = bezierTangent(track[n].x, track[n+1].x, track[n+2].x, track[(n+3)%track.length].x, t); var ty = bezierTangent(track[n].y, track[n+1].y, track[n+2].y, track[(n+3)%track.length].y, t); var a = atan2(ty, tx); a += 90; this.points[i][j].push({ x: x, y: y, angle: a }); } } } } //add points for each tunnel for each level for(var i = 0; i < this.levels.length; i++) { for(var j = 0; j < this.levels[i].tunnels.length; j++) { var tunnel = this.levels[i].tunnels[j]; var steps = 10; for(var k = 0; k < steps; k++) { var t = k / steps; var x = bezierPoint(tunnel.x1, tunnel.x2, tunnel.x3, tunnel.x4, t); var y = bezierPoint(tunnel.y1, tunnel.y2, tunnel.y3, tunnel.y4, t); var tx = bezierTangent(tunnel.x1, tunnel.x2, tunnel.x3, tunnel.x4, t); var ty = bezierTangent(tunnel.y1, tunnel.y2, tunnel.y3, tunnel.y4, t); var a = atan2(ty, tx); a += 90; this.tunnels[i][j].push({ x: x, y: y, angle: a }); } } } this.images = { back: function() { background(game.levels[0].colors.background); noStroke(); fill(209, 183, 152); for(var i = 0; i < 60; i++) { var diameter = random(10, 20); ellipse(random(600), random(600), diameter, diameter); } return get(); }, back0: function() { background(0, 0); return game.generateImages(0); }, back1: function() { background(0, 0); return game.generateImages(1); }, back2: function() { background(0, 0); return game.generateImages(2); }, back3: function() { background(0, 0); return game.generateImages(3); }, back4: function() { background(0, 0); return game.generateImages(4); }, back5: function() { background(0, 0); return game.generateImages(5); }, back6: function() { background(0, 0); return game.generateImages(6); }, back7: function() { background(0, 0); return game.generateImages(7); }, tree1: function() { background(0, 0); game.tree({ rs: 100, color1: color(122, 166, 87), color2: color(149, 196, 110) }); return get(250, 250, 100, 100); }, tree2: function() { background(0, 0); game.tree({ rs: 150, color1: color(166, 139, 88), color2: color(194, 163, 110) }); return get(250, 250, 100, 100); }, tree3: function() { background(0, 0); game.tree({ rs: 100, color1: color(122, 166, 87), color2: color(149, 196, 110), rotFrom: 10, rotTo: 30 }); return get(250, 250, 100, 100); }, tree4: function() { background(0, 0); game.tree({ rs: 150, color1: color(166, 139, 88), color2: color(194, 163, 110), rotFrom: 10, rotTo: 30 }); return get(250, 250, 100, 100); }, water: function() { background(0, 0); fill(104, 209, 217, 150); beginShape(); vertex(172, 153); bezierVertex(185, 151, 190, 158, 192, 166); bezierVertex(197, 173, 197, 182, 194, 189); bezierVertex(189, 195, 182, 197, 173, 192); bezierVertex(167, 185, 158, 186, 155, 175); bezierVertex(154, 166, 159, 156, 172, 153); endShape(CLOSE); return get(150, 150, 50, 50); }, mud: function() { background(0, 0); fill(204, 163, 98, 200); beginShape(); vertex(155, 165); bezierVertex(161, 154, 168, 158, 177, 155); bezierVertex(186, 155, 190, 159, 191, 167); bezierVertex(192, 172, 198, 178, 199, 186); bezierVertex(195, 195, 185, 194, 174, 193); bezierVertex(168, 192, 163, 198, 158, 191); bezierVertex(153, 187, 153, 180, 155, 165); endShape(CLOSE); return get(150, 150, 50, 50); }, rock1: function() { background(0, 0); pushStyle(); stroke(77, 75, 77, 100); fill(107, 106, 107); beginShape(); vertex(424, 372); vertex(440, 344); vertex(470, 344); vertex(486, 357); vertex(491, 380); vertex(480, 394); vertex(464, 410); vertex(442, 406); vertex(434, 389); vertex(425, 376); endShape(CLOSE); fill(130, 128, 130); beginShape(); vertex(441, 351); vertex(458, 351); vertex(469, 359); vertex(467, 374); vertex(469, 387); vertex(460, 395); vertex(444, 395); vertex(438, 384); vertex(433, 374); vertex(434, 366); endShape(CLOSE); popStyle(); return get(422, 342, 70, 70); }, rock2: function() { background(0, 0); pushStyle(); stroke(77, 75, 77, 100); fill(107, 106, 107); beginShape(); vertex(424, 356); vertex(445, 345); vertex(470, 352); vertex(490, 361); vertex(488, 381); vertex(488, 393); vertex(477, 410); vertex(457, 404); vertex(438, 406); vertex(426, 391); vertex(427, 374); endShape(CLOSE); fill(130, 128, 130); beginShape(); vertex(434, 355); vertex(454, 353); vertex(469, 366); vertex(477, 385); vertex(466, 388); vertex(461, 396); vertex(447, 396); vertex(432, 385); vertex(435, 372); endShape(CLOSE); popStyle(); return get(422, 342, 70, 70); }, rock3: function() { background(0, 0); pushStyle(); stroke(77, 75, 77, 100); fill(107, 106, 107); beginShape(); vertex(426, 358); vertex(445, 345); vertex(466, 352); vertex(483, 350); vertex(490, 366); vertex(487, 381); vertex(491, 396); vertex(474, 406); vertex(454, 409); vertex(435, 404); vertex(427, 390); vertex(427, 372); endShape(CLOSE); fill(130, 128, 130); beginShape(); vertex(452, 353); vertex(464, 357); vertex(477, 367); vertex(480, 384); vertex(474, 396); vertex(458, 401); vertex(451, 393); vertex(438, 395); vertex(432, 384); vertex(432, 364); endShape(CLOSE); popStyle(); return get(422, 342, 70, 70); }, rock4: function() { background(0, 0); pushStyle(); stroke(77, 75, 77, 100); fill(107, 106, 107); beginShape(); vertex(427, 358); vertex(442, 345); vertex(468, 345); vertex(483, 356); vertex(489, 377); vertex(485, 395); vertex(472, 409); vertex(451, 405); vertex(436, 401); vertex(426, 378); endShape(CLOSE); fill(130, 128, 130); beginShape(); vertex(440, 361); vertex(455, 356); vertex(470, 356); vertex(480, 369); vertex(477, 386); vertex(468, 401); vertex(453, 400); vertex(434, 379); endShape(CLOSE); popStyle(); return get(422, 342, 70, 70); }, heading: function() { background(0, 0); pushStyle(); textAlign(CENTER, CENTER); textSize(45); pushMatrix(); translate(300, 162); rotate(-7); fill(game.levels[0].colors.track); for(var i = 0; i < 360; i+=30) { text("CAR CRASH!!", sin(i)3, cos(i)3); } fill(242, 239, 242); text("CAR CRASH!!", 0, 0); popMatrix(); popStyle(); return get(); }, how: function() { background(0, 0); pushStyle(); textAlign(CENTER, CENTER); textSize(45); pushMatrix(); translate(300, 140); // rotate(-7); fill(game.levels[0].colors.track); for(var i = 0; i < 360; i+=30) { text("HOW", sin(i)3, cos(i)3); } fill(242, 239, 242); text("HOW", 0, 0); popMatrix(); popStyle(); return get(0, 0, 600, 200); }, levels: function() { background(0, 0); pushStyle(); textAlign(CENTER, CENTER); textSize(45); pushMatrix(); translate(300, 50); // rotate(-7); fill(game.levels[0].colors.track); for(var i = 0; i < 360; i+=30) { text("LEVELS", sin(i)3, cos(i)3); } fill(242, 239, 242); text("LEVELS", 0, 0); popMatrix(); popStyle(); return get(0, 0, 600, 100); } }; }, load: function (s) { var obj = Object.keys(this.images); this.images[obj[this.imageIndex]] = this.images[obj[this.imageIndex]](); this.imageIndex++; background(this.levels[0].colors.background); pushStyle(); fill(this.levels[0].colors.track); textAlign(CENTER, CENTER); textSize(40); text('LOADING', 300, 300); noFill(); stroke(this.levels[0].colors.track); strokeWeight(15); arc(300, 300, 300, 300, 0, map(this.imageIndex / obj.length, 0, 1, 0, 360)); strokeWeight(1); popStyle(); if(this.imageIndex < obj.length){ this.loaded = false; } else { this.loaded = true; this.levels[0].img = this.images.back0; this.levels[1].img = this.images.back1; this.levels[2].img = this.images.back2; this.levels[3].img = this.images.back3; this.levels[4].img = this.images.back4; this.levels[5].img = this.images.back5; this.levels[6].img = this.images.back6; this.levels[7].img = this.images.back7; this.init(); this.scene = s; } }, init: function() { var level = this.levels[this.level]; this.player = Player.new({ points: this.points[this.level][level.player.trackIndex], startIndex: level.player.startIndex, speed: level.player.speed, color: level.player.color, w: level.width, type: this.carIndex }); this.vehicles.length = 0; for(var i = 0; i < level.vehicles.length; i++) { var vehicle = level.vehicles[i]; this.vehicles.push(Vehicle.new({ points: this.points[this.level][vehicle.trackIndex], startIndex: vehicle.startIndex, speed: vehicle.speed, w: vehicle.w \|\| level.width, h: vehicle.h, color: vehicle.color })); } this.trees.length = 0; for(var i = 0; i < level.trees.length; i++) { var tree = level.trees[i]; this.trees.push({ x: tree.x - tree.diameter / 2, y: tree.y - tree.diameter / 2, diameter: tree.diameter, image: this.getRandomTree() }); } this.rocks.length = 0; for(var i = 0; i < level.rocks.length; i++) { var rock = level.rocks[i]; this.rocks.push({ x: rock.x - rock.diameter / 2, y: rock.y - rock.diameter / 2, diameter: rock.diameter, image: this.getRandomRock() }); } this.waters.length = 0; for(var i = 0; i < level.water.length; i++) { var water = level.water[i]; this.waters.push({ x: water.x - water.diameter / 2, y: water.y - water.diameter / 2, diameter: water.diameter, image: this.getRandomWater() }); } // this.tunnels.length = 0; this.duration = level.duration; this.laps = level.laps; this.start = false; this.gameOver = false; this.explosions.length = 0; this.crashedCarIndex = 0; this.smokes.length = 0; this.timer = this.duration; this.ms = millis(); }, collision: function(a, b) { var polygons = [a, b]; var minA, maxA, projected, i, i1, j, minB, maxB; for (i = 0; i < polygons.length; i++) { var polygon = polygons[i]; for (i1 = 0; i1 < polygon.length; i1++) { // grab 2 vertices to create an edge var i2 = (i1 + 1) % polygon.length; var p1 = polygon[i1]; var p2 = polygon[i2]; // find the line perpendicular to this edge var normal = { x: p2.y - p1.y, y: p1.x - p2.x }; minA = maxA = undefined; // for each vertex in the first shape, project it onto the line perpendicular to the edge // and keep track of the min and max of these values for (j = 0; j < a.length; j++) { projected = normal.x * a[j].x + normal.y * a[j].y; if (minA===undefined \|\| projected < minA) { minA = projected; } if (maxA===undefined \|\| projected > maxA) { maxA = projected; } } // for each vertex in the second shape, project it onto the line perpendicular to the edge // and keep track of the min and max of these values minB = maxB = undefined; for (j = 0; j < b.length; j++) { projected = normal.x * b[j].x + normal.y * b[j].y; if (minB===undefined \|\| projected < minB) { minB = projected; } if (maxB===undefined \|\| projected > maxB) { maxB = projected; } } // if there is no overlap between the projects, the edge we are looking at separates the two // polygons, and we know there is no overlap if (maxA < minB \|\| maxB < minA) { return false; } } } return true; }, collisionWater: function() { for(var i = 0; i < this.waters.length; i++) { var water = this.waters[i]; if(dist(water.x, water.y, this.player.x, this.player.y) < (water.diameter + this.player.w) * 0.5) { this.player.vel = constrain(this.player.vel * 0.92, this.player.minvel * 0.7, this.player.maxvel); } } }, shakeScreen: function() { if(this.shake > 0) { this.shake = lerp(this.shake, 0, this.shakedown); translate(round(random(-this.shake, this.shake)), round(random(-this.shake, this.shake))); } }, addSmoke: function() { if(frameCount % 2 === 0) { //add smoke for the player this.smokes.push({ x: this.player.x, y: this.player.y, diameter: this.player.w * 0.2, opacity: 200, offset: random(-this.player.h * 0.3, this.player.h * 0.3) }); //add smoke for each of the other vehicles for(var i = 0; i < this.vehicles.length; i++) { var vehicle = this.vehicles[i]; this.smokes.push({ x: vehicle.x, y: vehicle.y, diameter: vehicle.w * 0.2, opacity: 200, offset: random(-vehicle.h * 0.3, vehicle.h * 0.3) }); } } }, runSmoke: function() { noStroke(); for(var i = this.smokes.length - 1; i >= 0; i--) { var smoke = this.smokes[i]; fill(200, smoke.opacity); ellipse(smoke.x, smoke.y + smoke.offset, smoke.diameter, smoke.diameter); smoke.opacity-= 5; if(smoke.opacity <= 0) { this.smokes.splice(i, 1); } } }, runExplosions: function() { noStroke(); for(var i = this.explosions.length - 1; i >= 0; i--) { var explosion = this.explosions[i]; explosion.x+= explosion.vx; explosion.y+= explosion.vy; explosion.opacity-= 2; explosion.diameter+= 0.2; fill(explosion.color, explosion.opacity); ellipse(explosion.x, explosion.y, explosion.diameter, explosion.diameter); if(explosion.opacity <= 0) { this.explosions.splice(i, 1); } } }, runTrees: function() { for(var i = 0; i < this.trees.length; i++) { var tree = this.trees[i]; image(tree.image, tree.x, tree.y, tree.diameter, tree.diameter); } }, runRocks: function() { for(var i = 0; i < this.rocks.length; i++) { var rock = this.rocks[i]; image(rock.image, rock.x, rock.y, rock.diameter, rock.diameter); } }, runWater: function() { for(var i = 0; i < this.waters.length; i++) { var water = this.waters[i]; image(water.image, water.x, water.y, water.diameter, water.diameter); } }, runTunnels: function() { var level = this.levels[this.level]; pushStyle(); strokeCap(SQUARE); noFill(); for(var i = 0; i < level.tunnels.length; i++) { stroke(145, 121, 85); strokeWeight(15); for(var j = 0; j < this.tunnels[this.level][i].length; j++) { var p = this.tunnels[this.level][i][j]; line( p.x + sin(p.angle + 90) * level.width * 0.8, p.y - cos(p.angle + 90) * level.width * 0.8, p.x - sin(p.angle + 90) * level.width * 0.8, p.y + cos(p.angle + 90) * level.width * 0.8); } stroke(92, 83, 69); strokeWeight(5); beginShape(); for(var j = 0; j < this.tunnels[this.level][i].length; j++) { var p = this.tunnels[this.level][i][j]; vertex( p.x + sin(p.angle + 90) * level.width * 0.8, p.y - cos(p.angle + 90) * level.width * 0.8); } endShape(); beginShape(); for(var j = 0; j < this.tunnels[this.level][i].length; j++) { var p = this.tunnels[this.level][i][j]; vertex( p.x - sin(p.angle + 90) * level.width * 0.8, p.y + cos(p.angle + 90) * level.width * 0.8); } endShape(); } popStyle(); }, showCarButtons: function() { if(this.cars.show && this.cars.value !== this.cars.max) { this.cars.value = ceil(lerp(this.cars.value, this.cars.max, 0.1)); } else if(!this.cars.show && this.cars.value !== this.cars.min) { this.cars.value = floor(lerp(this.cars.value, this.cars.min, 0.1)); } pushMatrix(); translate(0, this.cars.value); fill(110, 90, 80, 250); rect(0, 520, 600, 80); for(var i in this.carButtons.home) { this.carButtons.home[i].draw(); } popMatrix(); }, stats: function() { pushStyle(); textAlign(LEFT, TOP); textSize(25); fill(255); text("SECONDS: " + this.timer, 10, 10); textAlign(RIGHT, TOP); text("LAPS: " + this.player.laps + "/" + this.laps, 590, 10); textAlign(CENTER, TOP); text("LEVEL: " + this.level, 300, 10); popStyle(); }, over: function() { pushMatrix(); translate(this.cam.x, this.cam.y); background(this.levels[this.level].colors.background); image(this.levels[this.level].img, 0, 0); this.runWater(); this.runSmoke(); this.player.draw(); for(var i = 0; i < this.vehicles.length; i++) { this.vehicles[i].draw(); } this.runTunnels(); this.runRocks(); this.runTrees(); popMatrix(); this.showCarButtons(); this.stats(); pushStyle(); textAlign(CENTER, CENTER); textSize(30); fill(255); text("YOU RAN OUT OF TIME!!", 300, 250); popStyle(); this.buttons.over.replay.draw(); this.buttons.over.home.draw(); this.buttons.over.cars.draw(); }, crash: function() { if(this.explosions.length < 50 && random() < 0.15) { this.explosions.push({ x: random(this.player.x - this.player.w * 0.1, this.player.x + this.player.w * 0.1), y: random(this.player.y - this.player.h * 0.1, this.player.y + this.player.h * 0.1), vx: random(-0.2, 0.2), vy: random(-0.2, 0.2), diameter: ~~random(1, 4), opacity: 255, color: random() < 0.5 ? color(40) : color(199, 63, 42) }); var crashedCar = this.vehicles[this.crashedCarIndex]; this.explosions.push({ x: random(crashedCar.x - crashedCar.w * 0.1, crashedCar.x + crashedCar.w * 0.1), y: random(crashedCar.y - crashedCar.h * 0.1, crashedCar.y + crashedCar.h * 0.1), vx: random(-0.2, 0.2), vy: random(-0.2, 0.2), diameter: ~~random(1, 4), opacity: 255, color: random() < 0.5 ? color(40) : color(199, 63, 42) }); } pushMatrix(); translate(this.cam.x, this.cam.y); background(this.levels[this.level].colors.background); this.shakeScreen(); image(this.levels[this.level].img, 0, 0); this.runWater(); this.runSmoke(); this.player.draw(); for(var i = 0; i < this.vehicles.length; i++) { this.vehicles[i].draw(); } this.runTunnels(); this.runRocks(); this.runTrees(); this.runExplosions(); popMatrix(); this.stats(); this.showCarButtons(); pushStyle(); textAlign(CENTER, CENTER); textSize(30); fill(255); text("YOU CRASHED!!\n\nTOTAL CRASHES: " + this.crashes, 300, 230); popStyle(); this.buttons.crash.replay.draw(); this.buttons.crash.home.draw(); this.buttons.crash.cars.draw(); }, next: function() { pushMatrix(); translate(this.cam.x, this.cam.y); background(this.levels[this.level].colors.background); image(this.levels[this.level].img, 0, 0); this.runWater(); this.runSmoke(); this.player.draw(); for(var i = 0; i < this.vehicles.length; i++) { this.vehicles[i].draw(); } this.runTunnels(); this.runRocks(); this.runTrees(); popMatrix(); this.stats(); this.showCarButtons(); pushStyle(); textAlign(CENTER, CENTER); textSize(30); fill(255); text("Well done!!\n\nClick to move to the next level.", 300, 250); popStyle(); this.buttons.next.play.draw(); this.buttons.next.cars.draw(); }, complete: function() { pushMatrix(); translate(this.cam.x, this.cam.y); background(this.levels[this.level].colors.background); image(this.levels[this.level].img, 0, 0); this.runWater(); this.runSmoke(); this.player.draw(); for(var i = 0; i < this.vehicles.length; i++) { this.vehicles[i].draw(); } this.runTunnels(); this.runRocks(); this.runTrees(); popMatrix(); this.stats(); pushStyle(); textAlign(CENTER, CENTER); textSize(30); fill(255); text("CONGRATULATIONS!!!\n\nYou've completed all the levels.\n\nTOTAL CRASHES: " + this.crashes, 300, 300); popStyle(); this.buttons.complete.home.draw(); }, draw: function() { this.cam.x = ~~lerp(this.cam.x, width * 0.5 - this.player.x, 0.1); this.cam.y = ~~lerp(this.cam.y, height * 0.5 - this.player.y, 0.1); pushMatrix(); translate(this.cam.x, this.cam.y); background(this.levels[this.level].colors.background); image(this.levels[this.level].img, 0, 0); this.runWater(); this.runSmoke(); this.player.run(this.start); for(var i = 0; i < this.vehicles.length; i++) { this.vehicles[i].run(this.start); if (this.collision(this.player.coords, this.vehicles[i].coords)){ this.gameOver = true; this.crashedCarIndex = i; this.crashes++; } } this.runTunnels(); this.runRocks(); this.runTrees(); this.collisionWater(); popMatrix(); this.stats(); if(this.gameOver) { //crashed this.sceneImage = get(0, 0, width, height); this.scene = "crash"; this.shake = 20; } else if(this.timer > 0) { //continue with game //if completed all the laps if(this.player.laps >= this.laps) { this.sceneImage = get(0, 0, width, height); if(this.level === this.levels.length - 1) { this.scene = "complete"; } else { this.scene = "next"; this.unlocked[this.level+1] = true; } } } else { //out of time this.gameOver = true; this.sceneImage = get(0, 0, width, height); this.scene = "over"; } }, update: function() { if(this.start) { //count down the seconds this.timer = this.duration - ~~((millis() - this.ms) / 1000); this.addSmoke(); } //handle speed (velocity) of player's car if(this.keys[LEFT] \|\| this.keys[65]) { //Left arrow or A this.player.vel = constrain(this.player.vel - 0.02, this.player.minvel, this.player.maxvel); // this.player.vel = lerp(this.player.vel, this.player.minvel, 0.05); } if(this.keys[RIGHT] \|\| this.keys[68]) { //Right arrow or D this.player.vel = constrain(this.player.vel + 0.02, this.player.minvel, this.player.maxvel); // this.player.vel = lerp(this.player.vel, this.player.maxvel, 0.05); //begin the level when you first accelerate if(!this.start) { this.ms = millis(); this.start = true; } } //up/down not currently implemented - may remove later if((this.keys[UP] \|\| this.keys[87])) { //Up arrow or W } if(this.keys[DOWN] \|\| this.keys[83]) { //Down arrow or S } }, home: function() { background(this.levels[this.level].colors.background); image(this.levels[this.level].img, 0, 0); this.runWater(); this.runSmoke(); this.player.run(true); for(var i = 0; i < this.vehicles.length; i++) { this.vehicles[i].run(true); } this.runTunnels(); this.runRocks(); this.runTrees(); this.addSmoke(); image(this.images.heading, 0, 0); for(var i in this.buttons.home) { this.buttons.home[i].draw(); } this.showCarButtons(); }, how: function() { image(this.images.back, 0, 0); pushStyle(); fill(this.levels[0].colors.track); textAlign(CENTER, TOP); textSize(20); text("The object of the game is to complete a certain number of laps within a certain timeframe without crashing into another car.\n\nLEFT/RIGHT or A/D keys to slow down / speed up respectively. Note however that you can't fully stop.\n\nPress RIGHT or D to start moving.\n\nCan you complete all " + (this.levels.length - 1) + " levels?", 20, 200, 560, 600); popStyle(); image(this.images.how, 0, 0); this.buttons.how.home.draw(); }, select: function() { image(this.images.back, 0, 0); pushStyle(); fill(this.levels[0].colors.track); textAlign(CENTER, TOP); textSize(20); text("Click on the (unlocked) level you want to start on.", 20, 100, 560, 600); popStyle(); for(var i in this.buttons.select.levels) { this.buttons.select.levels[i].draw(); } image(this.images.levels, 0, 0); this.buttons.select.home.draw(); }, run: function(rate) { setKALoopTimeout(10000); switch(this.scene) { case "load": this.load("home"); break; case "home": this.home(); break; case "play": this.draw(); this.update(); break; case "over": this.over(); break; case "crash": this.crash(); break; case "next": this.next(); break; case "complete": this.complete(); break; case "how": this.how(); break; case "select": this.select(); break; } pushStyle(); textAlign(RIGHT, BOTTOM); textSize(18); fill(240, 100); text(rate, 590, 590); popStyle(); if(this.transition.active) { this.transition.run(); } cursor(this.hover ? 'pointer' : 'default'); this.clicked = false; this.hover = false; } }; return Game; })(); game = Game.new(); draw = function() { game.run(~~this.__frameRate); };
Folds	33,35,36,38,39,41,44,49,51,55,57,113,114,325,326,358,359,413,414,553,554,730,731,4065
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL2-lsHFCQw
Votes	429
Spin-Offs	13
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739381137913
Updated	4 months ago, 1744828318812
Source Deleted	unknown