Viewing Program

Program Data

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

Title	WORMLIKE DIRTBIKE {Official release}
ID	4603221086748672
Created	1 years ago, 1707790683311
Updated	1 years ago, 1710722036813
Code	<!DOCTYPE html> <!-- SufficingPit To the Judges: This is the first sort of cooperative coding challenge/game jam type thing I've done, which was quite fun. I worked on the editor and level 2, I think there was a significant amount of work done by our team here that showed a great deal of dedication to and enjoyment of the art of programming. Overall, this was a very fun experience with many interesting implementation challenges that deserve recognition. --> <html> <title>WORMLIKE DIRTBIKE {Official release}</title> <canvas id = "m" width = '600' height = '600'></canvas> <canvas id = "b" width = '600' height = '600'></canvas> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lilita+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Rubik+Dirt&family=Single+Day&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap" rel="stylesheet"> <style> { margin:0px; overflow:hidden; width:600px; height:600px; } </style> <script type="module"> var level = 1; var particles = []; class Particle { constructor(x, y, xv, yv, s, type, r, g, b, a, life) { this.x = x; this.y = y; this.xv = xv; this.yv = yv; this.size = s; this.life = life ((Math.random() + 1) / 2) this.airResistance = 0.98; if(type === "gas") { this.gravity = -0.1; this.airResistance = 0.7; } else { this.gravity = 0.2 } this.color = [r, g, b, a] } update() { this.x += this.xv; this.y += this.yv; this.yv += this.gravity; this.xv = this.airResistance; this.yv = this.airResistance; this.life--; } draw() { ctx.fillStyle = "rgb(" + (this.color[0]) + "," + (this.color[1]) + "," + (this.color[2]) + "," + (this.color[3]) + ")" ctx.fillRect(this.x * 1.25 - 200, this.y * 1.25 - 100, this.size, this.size); } } var cameraView = "normal"; var EPSILON = 0.0001; for(let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } var mouseX = 0, pmouseX = 0, mouseY = 0, pmouseY = 0, clicked = false, key = {}; window.addEventListener("mouseover", event => { pmouseX = mouseX; pmouseY = mouseY mouseX = event.pageX; mouseY = event.pageY; }); window.addEventListener("mousemove", event => { pmouseX = mouseX; pmouseY = mouseY mouseX = event.pageX; mouseY = event.pageY; }); var resolution = 4; var fps = 1000; var type; var click = false; window.addEventListener("keydown", function(e) { if(["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(e.code) > -1) { e.preventDefault(); } }, false); window.addEventListener('mousedown', event => { clicked = true; }); window.addEventListener('mouseup', event => { clicked = false; clickToggle = 1; }); window.addEventListener("keydown", (event) => { key[event.key] = true; }); window.addEventListener("keyup", (event) => { delete key[event.key]; }); var levelEndToggle = 1; var c = document.getElementById("m") var ctx = c.getContext("2d"); var data = ctx.getImageData(0, 0, 600, 600); var b = document.getElementById("b") var ctx2 = b.getContext("2d"); class Vector { constructor(x, y) { this.x = x; this.y = y; } subtract(v) { var ve = new Vector(this.x, this.y); ve.x -= v.x; ve.y -= v.y; return ve; } add(v) { var ve = new Vector(this.x, this.y); ve.x += v.x; ve.y += v.y; return ve; } divide(n) { var ve = new Vector(this.x, this.y); ve.x /= n; ve.y /= n; return ve; } magnitude() { return Math.sqrt(this.x * this.x + this.y * this.y); } dot(v) { return this.x * v.x + this.y * v.y; } scale(n) { var ve = new Vector(this.x, this.y); ve.x = n; ve.y = n; return ve; } normalize() { var ve = new Vector(this.x, this.y); ve = ve.divide(ve.magnitude()); return ve; } rotateBy(ang) { ang = -ang; return new Vector(this.x * Math.cos(ang) - this.y * Math.sin(ang), this.x * Math.sin(ang) + this.y * Math.cos(ang)); } reflect(n) { var ve = new Vector(this.x, this.y); ve = ve.subtract(n.scale(2 * ve.dot(n))) return ve; } abs() { var ve = new Vector(this.x, this.y); ve.x = Math.abs(ve.x); ve.y = Math.abs(ve.y); return ve; } max(n) { var ve = new Vector(this.x, this.y); ve.x = Math.max(ve.x, n); ve.y = Math.max(ve.y, n); return ve; } } function smin(a, b, k) { var h = Math.max(k - Math.abs(a - b), -0.01) / k; return Math.min(a, b) - h * h * k * (1.0 / 4.0); } function box(p, l, b) { p = p.subtract(l); var d = p.abs().subtract(b); return d.max(0.0).magnitude() + Math.min(Math.max(d.x, d.y), 0.0); } /* float sdBezier( in vec2 pos, in vec2 A, in vec2 B, in vec2 C ) { vec2 a = B - A; vec2 b = A - 2.0B + C; vec2 c = a 2.0; vec2 d = A - pos; float kk = 1.0/dot(b,b); float kx = kk * dot(a,b); float ky = kk * (2.0dot(a,a)+dot(d,b)) / 3.0; float kz = kk dot(d,a); float res = 0.0; float p = ky - kxkx; float p3 = ppp; float q = kx(2.0kxkx-3.0ky) + kz; float h = qq + 4.0p3; if( h >= 0.0) { h = sqrt(h); vec2 x = (vec2(h,-h)-q)/2.0; vec2 uv = sign(x)pow(abs(x), vec2(1.0/3.0)); float t = clamp( uv.x+uv.y-kx, 0.0, 1.0 ); res = dot2(d + (c + bt)t); } else { float z = sqrt(-p); float v = acos( q/(pz2.0) ) / 3.0; float m = cos(v); float n = sin(v)1.732050808; vec3 t = clamp(vec3(m+m,-n-m,n-m)z-kx,0.0,1.0); res = min( dot2(d+(c+bt.x)t.x), dot2(d+(c+bt.y)t.y) ); // the third root cannot be the closest // res = min(res,dot2(d+(c+bt.z)t.z)); } return sqrt( res ); } / function circle(c, p, r) { c = c.subtract(p); var f = c.magnitude() - r; return f; } function lerp(a, b, t) { return a + (b - a) t; } var TAU = 3.14159265 * 2 function drawWormbike(player, ta, a1, a2) { var lilBit = new Vector(player.wx - player.centerx, player.wy - player.centery); lilBit = lilBit.scale(0.5); ctx.save(); ctx.translate(player.centerx, player.centery); ctx.rotate(ta - 3.1415 / 2); ctx.translate(lilBit.x, lilBit.y); lilBit = lilBit.add(new Vector(player.x, player.y).scale(0.08)) ctx.lineWidth = 2; ctx.fillStyle = "rgb(201, 136, 201)" ctx.strokeStyle = "rgb(125, 87, 125)" for(var i = 0; i < 15; i += 1.2) { ctx.beginPath(); ctx.ellipse(-50 + i * 6.7, -40 + Math.sin((-i / 2) + lilBit.magnitude() / 2) * 5, 12, 12, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(-50 + i * 6.7, -40 + Math.sin((-i / 2) + lilBit.magnitude() / 2) * 5, 12, 12, 0, 0, Math.PI * 2); ctx.stroke(); } ctx.lineWidth = 1.5; ctx.fillStyle = "rgb(0, 0, 0)" ctx.strokeStyle = "rgb(255, 255, 255)" ctx.beginPath(); ctx.ellipse(-50 + 15 * 6.7, -40 + Math.sin((-15 / 2) + lilBit.magnitude() / 2) * 5, 2.6, 2.6, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(-50 + 15 * 6.7, -40 + Math.sin((-15 / 2) + lilBit.magnitude() / 2) * 5, 2.6, 2.6, 0, 0, Math.PI * 2); ctx.lineWidth = 3; ctx.strokeStyle = "rgb(133, 133, 133)"; ctx.stroke(); ctx.beginPath(); ctx.moveTo(0, -40); ctx.lineTo(-25, 0); ctx.moveTo(0, -40); ctx.lineTo(25, 0); ctx.moveTo(30, -40); ctx.lineTo(25, 0); ctx.moveTo(-30, -40) ctx.lineTo(-25, 0); ctx.stroke(); ctx.restore(); ctx.lineWidth = 6; ctx.strokeStyle = "rgb(199, 172, 22)" for(var i = 0; i < 5; i++) { ctx.beginPath(); ctx.moveTo(player.x - Math.cos(ta) * 20, player.y - Math.sin(ta) * 20); ctx.lineTo(player.x - Math.cos(ta) * 20 - Math.cos(a1 + i * (TAU / 5)) * 17, player.y - Math.sin(ta) * 20 - Math.sin(a1 + i * (TAU / 5)) * 17); ctx.lineTo(player.x - Math.cos(ta) * 20 - Math.cos(a1 + i * (TAU / 5) - 0.6) * 15, player.y - Math.sin(ta) * 20 - Math.sin(a1 + i * (TAU / 5) - 0.6) * 15); ctx.stroke(); } for(var i = 0; i < 5; i++) { ctx.beginPath(); ctx.moveTo(player.x2 - Math.cos(ta) * 20, player.y2 - Math.sin(ta) * 20); ctx.lineTo(player.x2 - Math.cos(ta) * 20 - Math.cos(a2 + i * (TAU / 5)) * 17, player.y2 - Math.sin(ta) * 20 - Math.sin(a2 + i * (TAU / 5)) * 17); ctx.lineTo(player.x2 - Math.cos(ta) * 20 - Math.cos(a2 + i * (TAU / 5) - 0.6) * 15, player.y2 - Math.sin(ta) * 20 - Math.sin(a2 + i * (TAU / 5) - 0.6) * 15); ctx.stroke(); } ctx.strokeStyle = "rgb(255, 255, 255)" ctx.lineWidth = 4; ctx.strokeStyle = "rgb(0,0,0)" ctx.beginPath(); ctx.ellipse(player.x - Math.cos(ta) * 20, player.y - Math.sin(ta) * 20, 20, 20, 0, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.ellipse(player.x2 - Math.cos(ta) * 20, player.y2 - Math.sin(ta) * 20, 20, 20, 0, 0, Math.PI * 2); ctx.stroke(); } function sSubtract(d1, d2, k) { var h = Math.min(Math.max(0.5 - 0.5 * (d2 + d1) / k, 0.0), 1.0); return lerp(d2, -d1, h) + k * h * (1.0 - h); } var levelData = []; var levelData3 = []; var levelData5 = []; var levelData4 = []; function addLevelData(type, isAdditive, x, y, size, morphRange) { if(camera !== undefined) { x += camera.x - 300; x = Math.round(x); y += camera.y - 300; y = Math.round(y); } levelData.push({ type: type, isAdditive: isAdditive, x: x, y: y, size: size, morphRange: morphRange }); } function addLevelData3(type, isAdditive, x, y, size, morphRange) { if(camera !== undefined) { x += camera.x - 300; x = Math.round(x); y += camera.y - 300; y = Math.round(y); } levelData3.push({ type: type, isAdditive: isAdditive, x: x, y: y, size: size, morphRange: morphRange }); } function addLevelData5(type, isAdditive, x, y, size, morphRange) { if(camera !== undefined) { x += camera.x - 300; x = Math.round(x); y += camera.y - 300; y = Math.round(y); } levelData5.push({ type: type, isAdditive: isAdditive, x: x, y: y, size: size, morphRange: morphRange }); } function addLevelData4(type, isAdditive, x, y, size, morphRange) { if(camera !== undefined) { x += camera.x - 300; x = Math.round(x); y += camera.y - 300; y = Math.round(y); } levelData4.push({ type: type, isAdditive: isAdditive, x: x, y: y, size: size, morphRange: morphRange }); } //// /// //Level Data{ addLevelData("circle", true, -190, 268, 225, 100); addLevelData("circle", false, 261, 151, 163, 100); addLevelData("circle", true, 402, 139, 9, 100); addLevelData("circle", true, 562, 241, 80, 100); addLevelData("circle", true, 817, 140, 204, 100); addLevelData("circle", false, 479, 315, 110, 100); addLevelData("circle", false, 598, 372, 114, 100); addLevelData("circle", true, 243, -33, 195, 100); addLevelData("circle", false, 689, 438, 121, 100); addLevelData("circle", false, 785, 571, 187, 100); addLevelData("circle", false, 995, 648, 243, 100); addLevelData("circle", true, 910, 512, 80, 100); addLevelData("circle", true, 1040, 502, 80, 100); addLevelData("circle", true, 1163, 618, 80, 100); addLevelData("box", true, 1011, 615, 1, 100); addLevelData("circle", true, 870, 630, 1, 100); addLevelData("box", true, 1007, 676, 1, 100); addLevelData("box", true, 886, 687, 1, 100); addLevelData("circle", false, 1053, 667, 50, 100); addLevelData("box", false, 937, 673, 44, 100); addLevelData("circle", false, 918, 609, 40, 100); addLevelData("circle", false, 1190, 778, 123, 100); addLevelData("circle", false, 1364, 802, 139, 100); addLevelData("circle", false, 1485, 902, 80, 100); addLevelData("circle", false, 1571, 914, 80, 100); addLevelData("circle", false, 1659, 934, 80, 100); addLevelData("circle", false, 1765, 954, 103, 100); addLevelData("circle", false, 2151, 823, 405, 100); addLevelData("circle", true, 1936, 889, 85, 100); addLevelData("circle", true, 1782, 778, 80, 100); addLevelData("circle", true, 2140, 891, 203, 100); addLevelData("circle", false, 2071, 790, 234, 100); addLevelData("circle", true, 2353, 700, 9, 100); addLevelData("circle", true, 2526, 665, 80, 100); addLevelData("circle", false, 2444, 523, 119, 100); addLevelData("circle", true, 2308, 924, 35, 100); addLevelData("circle", true, 2320, 847, 25, 100); addLevelData("box", true, 2416, -79, 384, 100); addLevelData("circle", false, 2627, 490, 183, 100); addLevelData("circle", false, 2812, 582, 114, 100); addLevelData("circle", false, 2911, 630, 123, 100); addLevelData("circle", false, 3095, 766, 228, 100); addLevelData("circle", true, 3022, 160, 326, 100); addLevelData("circle", false, 3390, 776, 297, 100); addLevelData("circle", true, 3542, 1013, 220, 100); addLevelData("circle", false, 4359, 820, 884, 100); addLevelData("circle", true, 3836, 1544, 141, 100); addLevelData("circle", true, 4398, 649, 749, 100); addLevelData("box", true, 4597, 1559, 214, 100); addLevelData("circle", true, 3145, 959, 67, 100); addLevelData("circle", true, 2386, 662, 14, 100); addLevelData("circle", false, 2386, 797, 104, 100); addLevelData("circle", false, 2339, 733, 51, 100); addLevelData("circle", false, 2298, 770, 52, 100); addLevelData("circle", true, 3319, 878, 3, 100); addLevelData("circle", true, 3722, 399, 240, 100); //////// addLevelData3("box", false, 195, 298, 80, 100); addLevelData3("circle", true, 177, 318, 28, 100); addLevelData3("box", false, 486, 474, 261, 100); addLevelData3("circle", false, 479, 773, 255, 100); addLevelData3("box", false, 959, 574, 330, 100); addLevelData3("circle", true, 849, 852, 127, 100); addLevelData3("box", true, 1242, 166, 80, 100); addLevelData3("box", true, 1252, 18, 80, 100); addLevelData3("box", false, 1313, 331, 80, 100); addLevelData3("circle", true, 1454, 63, 193, 100); addLevelData3("circle", false, 1451, 287, 204, 100); addLevelData3("circle", true, 1749, 331, 80, 100); addLevelData3("box", true, 1468, 232, 8, 100); addLevelData3("box", true, 1528, 235, 5, 100); addLevelData3("circle", true, 1434, 91, 80, 100); addLevelData3("circle", false, 2171, -27, 439, 100); addLevelData3("circle", true, 2576, 228, 80, 100); addLevelData3("circle", true, 2910, 458, 410, 100); addLevelData3("circle", false, 2909, 318, 249, 100); addLevelData3("circle", true, 3801, 395, 80, 100); addLevelData3("box", false, 3819, 275, 67, 100); addLevelData3("box", false, 3811, 425, 106, 100); addLevelData3("circle", true, 4062, 218, 80, 100); addLevelData3("circle", true, 4026, 52, 80, 100); addLevelData3("circle", true, 3914, 18, 57, 100); addLevelData3("circle", true, 3794, 152, 13, 100); addLevelData3("circle", false, 3789, 805, 372, 100); addLevelData3("circle", false, 3789, 1166, 366, 100); addLevelData3("box", false, 3734, 1575, 80, 100); addLevelData3("circle", false, 3737, 1666, 80, 100); addLevelData3("circle", false, 3819, 1652, 110, 100); addLevelData3("circle", false, 3912, 1679, 80, 100); addLevelData3("circle", false, 4104, 1740, 246, 100); addLevelData3("box", false, 4110, 1919, 241, 100); addLevelData3("circle", true, 3924, 1813, 53, 100); addLevelData3("circle", true, 4014, 1765, 49, 100); addLevelData3("circle", true, 4099, 1709, 36, 100); addLevelData3("circle", true, 4312, 1949, 48, 100); addLevelData3("circle", true, 4227, 2013, 33, 100); addLevelData3("circle", true, 4127, 2011, 29, 100); addLevelData3("circle", true, 4054, 1976, 23, 100); addLevelData3("circle", false, 3976, 2150, 104, 100); addLevelData3("circle", true, 2486, 114, 31, 100); addLevelData3("circle", true, 2261, 173, 80, 100); addLevelData3("circle", true, 2060, 87, 129, 100); addLevelData3("circle", false, 2235, 32, 142, 100); addLevelData3("circle", false, 3995, 131, 165, 100); addLevelData3("circle", true, 4210, 184, 40, 100); addLevelData3("circle", true, 3795, 10, 19, 100); addLevelData3("circle", true, 4210, 57, 50, 100); addLevelData3("circle", true, 4096, -54, 44, 100); addLevelData3("circle", true, 3979, -97, 42, 100); addLevelData3("circle", true, 3794, 89, 1, 100); addLevelData3("box", false, 4426, 2245, 168, 100); addLevelData3("box", false, 4734, 2251, 169, 100); addLevelData3("box", true, 4455, 2285, 45, 100); addLevelData3("box", true, 4734, 2258, 56, 100); addLevelData3("circle", false, 4437, 2200, 92, 100); addLevelData3("circle", false, 4713, 2175, 100, 100); addLevelData3("circle", false, 4863, 2126, 122, 100); addLevelData3("circle", false, 4932, 2123, 100, 100); addLevelData3("circle", false, 5001, 2160, 61, 100); addLevelData3("box", false, 5063, 2122, 100, 100); addLevelData3("box", false, 5209, 2120, 101, 100); addLevelData3("circle", false, 5304, 2124, 105, 100); addLevelData3("box", false, 4064, 2178, 80, 100); addLevelData3("box", false, 4202, 2180, 80, 100); addLevelData3("circle", false, 4291, 2398, 32, 100); addLevelData3("circle", false, 4366, 2390, 40, 100); addLevelData3("circle", false, 4454, 2394, 40, 100); addLevelData3("circle", true, 4256, 2284, 3, 100); addLevelData3("box", false, 1351, 412, 80, 100); addLevelData3("circle", true, 1990, -89, 80, 100); addLevelData3("circle", true, 4189, -45, 53, 100); addLevelData3("circle", true, 3857, -67, 37, 100); addLevelData5("circle", true, -341, 268, 225, 100); addLevelData5("box", true, 203, -116, 404, 100); addLevelData5("circle", false, 206, -116, 429, 100); addLevelData5("box", false, -17, 96, 216, 100); addLevelData5("circle", true, 205, -116, 267, 100); addLevelData5("circle", true, -692, 295, 80, 100); addLevelData5("circle", false, -238, 144, 163, 100); addLevelData5("circle", false, 709, -570, 405, 100); addLevelData5("box", true, 819, 210, 179, 100); addLevelData5("box", true, 655, -336, 80, 100); addLevelData5("box", true, 661, 11, 1, 100); addLevelData5("box", true, 658, -39, 3, 100); addLevelData5("circle", true, 1987, 171, 728, 100); addLevelData5("circle", false, 1242, -69, 541, 100); addLevelData5("circle", false, 628, -174, 30, 100); addLevelData5("circle", true, 1243, -74, 313, 100); addLevelData5("circle", false, 2094, -17, 408, 100); addLevelData5("circle", false, 2277, 497, 221, 100); addLevelData5("circle", true, 1951, 243, 267, 100); addLevelData5("circle", true, 1664, -213, 55, 100); addLevelData5("circle", false, 1825, -145, 119, 100); addLevelData5("circle", false, 1821, -213, 80, 100); addLevelData5("circle", false, 1672, -9, 99, 100); addLevelData5("circle", false, 1730, -32, 80, 100); addLevelData5("circle", false, 2230, 842, 382, 100); addLevelData5("circle", true, 2324, 830, 253, 100); addLevelData5("circle", true, 2467, 563, 80, 100); addLevelData5("box", false, 2342, 1151, 69, 100); addLevelData5("box", false, 2462, 1150, 70, 100); addLevelData5("box", false, 2568, 1137, 85, 100); addLevelData5("box", false, 2654, 1102, 119, 100); addLevelData5("circle", false, 2564, 1080, 80, 100); addLevelData5("circle", false, 2764, 1214, 282, 100); addLevelData5("circle", false, 2797, 1298, 317, 100); addLevelData5("circle", true, 2747, 1367, 256, 100); addLevelData5("circle", false, 3456, 1633, 492, 100); addLevelData5("circle", true, 3446, 1635, 336, 100); addLevelData5("box", false, 3881, 1537, 64, 100); addLevelData5("box", false, 3865, 1411, 80, 100); addLevelData5("box", false, 3867, 1268, 80, 100); addLevelData5("circle", false, 3729, 1162, 216, 100); addLevelData5("circle", false, 3773, 1236, 80, 100); addLevelData5("circle", true, 3726, 1167, 85, 100); addLevelData5("box", true, 3630, 1136, 46, 100); addLevelData5("box", true, 3537, 1161, 62, 100); addLevelData5("box", false, 3509, 912, 152, 100); addLevelData5("box", false, 3435, 1016, 80, 100); addLevelData5("circle", false, 3442, 1588, 262, 100); addLevelData5("box", true, 3323, 1422, 29, 100); addLevelData5("box", true, 3304, 1483, 34, 100); addLevelData5("circle", true, 3285, 1581, 80, 100); addLevelData5("circle", true, 3279, 1728, 80, 100); addLevelData5("box", false, 3489, 1885, 133, 100); addLevelData5("box", false, 3441, 2180, 80, 100); addLevelData5("circle", true, 3299, 2092, 8, 100); addLevelData5("circle", false, 3514, 2051, 80, 100); addLevelData5("box", false, 3443, 2327, 80, 100); addLevelData5("box", false, 3492, 2485, 131, 100); addLevelData5("box", false, 3113, 1462, 99, 100); addLevelData5("box", false, 3111, 1556, 101, 100); addLevelData5("box", false, 3132, 1708, 80, 100); addLevelData5("box", false, 3131, 1828, 80, 100); addLevelData5("circle", true, 3139, 1296, 4, 100); addLevelData5("circle", true, 3308, 1225, 44, 100); addLevelData5("box", true, 3227, 1231, 80, 100); addLevelData5("box", false, 3457, 1311, 91, 100); addLevelData5("box", false, 3443, 1160, 80, 100); addLevelData5("box", false, 3627, 2838, 266, 100); addLevelData5("circle", false, 4219, 3096, 854, 100); addLevelData5("circle", true, 4214, 3096, 604, 100); addLevelData5("box", false, 5837, 2634, 848, 100); addLevelData5("circle", true, 5358, 3425, 336, 100); addLevelData5("circle", true, 5369, 2937, 205, 100); addLevelData5("circle", false, 5695, 1762, 507, 100); addLevelData5("circle", false, 6586, 3495, 251, 100); addLevelData5("circle", false, 6683, 3549, 235, 100); addLevelData5("circle", false, 6773, 3609, 197, 100); addLevelData5("box", false, 6991, 3451, 168, 100); addLevelData5("box", false, 7262, 3466, 154, 100); addLevelData5("circle", true, 5702, 2088, 80, 100); addLevelData5("circle", false, 3637, 970, 80, 100); addLevelData5("circle", false, 3464, 1012, 101, 100); addLevelData5("circle", false, 3458, 2123, 80, 100); addLevelData5("box", false, 7817, 3981, 534, 100); addLevelData5("circle", true, 7336, 3790, 54, 100); addLevelData5("circle", true, 7494, 4013, 55, 100); addLevelData5("circle", true, 7640, 3607, 57, 100); addLevelData5("circle", true, 7902, 3993, 69, 100); addLevelData5("circle", true, 7450, 4266, 64, 100); addLevelData5("circle", true, 7655, 3944, 80, 100); addLevelData5("circle", true, 7288, 4184, 80, 100); addLevelData5("circle", true, 7507, 4556, 80, 100); addLevelData5("circle", true, 8068, 4297, 268, 100); addLevelData5("circle", false, 7852, 4302, 213, 100); addLevelData5("box", false, 7361, 4526, 80, 100); addLevelData5("box", false, 7359, 4687, 108, 100); addLevelData5("box", false, 7362, 4883, 140, 100); addLevelData5("box", false, 7363, 5205, 215, 100); addLevelData5("box", true, 7360, 5337, 80, 100); addLevelData5("circle", true, 7184, 5240, 75, 150); addLevelData5("circle", true, 7519, 5238, 75, 150); addLevelData4("circle", true, -341, 268, 225, 100); addLevelData4("circle", true, 639, 206, 287, 100); addLevelData4("box", false, 363, 220, 80, 100); addLevelData4("circle", false, 437, 132, 163, 100); addLevelData4("box", false, 438, -47, 159, 100); addLevelData4("circle", true, 492, -359, 191, 100); addLevelData4("circle", false, 491, -360, 120, 100); addLevelData4("box", false, 595, -256, 122, 100); addLevelData4("box", true, 828, -408, 117, 100); addLevelData4("box", true, 1451, 194, 154, 100); addLevelData4("box", false, 1146, 360, 148, 100); addLevelData4("circle", false, 1145, 508, 146, 100); addLevelData4("box", false, 1013, 509, 145, 100); addLevelData4("box", false, 744, 505, 148, 100); addLevelData4("box", false, 676, 710, 80, 100); addLevelData4("box", false, 675, 842, 80, 100); addLevelData4("box", false, 676, 988, 80, 100); addLevelData4("circle", false, 757, 1065, 158, 100); addLevelData4("box", false, 895, 1066, 155, 100); addLevelData4("box", false, 1178, 1069, 154, 100); addLevelData4("circle", false, 1299, 1063, 161, 100); addLevelData4("box", false, 1390, 984, 80, 100); addLevelData4("box", false, 1387, 844, 80, 100); addLevelData4("box", false, 1386, 753, 80, 100); addLevelData4("circle", false, 1519, 693, 214, 100); addLevelData4("circle", true, 1630, 736, 96, 100); addLevelData4("circle", true, 1608, 881, 22, 100); addLevelData4("circle", true, 1571, 849, 80, 100); addLevelData4("box", false, 1389, 877, 80, 100); addLevelData4("box", false, 1633, 557, 77, 100); addLevelData4("box", false, 1746, 560, 80, 100); addLevelData4("circle", false, 1571, 513, 132, 100); addLevelData4("circle", false, 1658, 503, 80, 100); addLevelData4("box", false, 1981, 702, 217, 100); addLevelData4("box", false, 2122, 972, 80, 100); addLevelData4("box", false, 2121, 1108, 80, 100); addLevelData4("circle", false, 2118, 1334, 223, 100); addLevelData4("circle", false, 2491, 1233, 217, 100); addLevelData4("circle", false, 2918, 1438, 285, 100); addLevelData4("circle", false, 2484, 2221, 649, 100); //} function level1(x, y) { var f = box(new Vector(x, y), new Vector(400, 3300), new Vector(30000, 3000)); f = smin(f, circle(new Vector(x, y), new Vector(800, 250), 100), 150); f = smin(f, circle(new Vector(x, y), new Vector(-0, 300), 100), 100); f = smin(f, circle(new Vector(x, y), new Vector(2000, 190), 100), 250); f = smin(f, box(new Vector(x, y), new Vector(2650, 250), new Vector(200, 200)), 200); f = smin(f, circle(new Vector(x, y), new Vector(2440, 80), 10), 60); f = Math.max(f, -box(new Vector(x, y), new Vector(2840, 60), new Vector(40, 40))) f = Math.min(f, circle(new Vector(x, y), new Vector(2840 - 30, 60 + 30), 40)) f = smin(f, circle(new Vector(x, y), new Vector(4800, 200), 500), 100) f = smin(f, circle(new Vector(x, y), new Vector(4500, -500), 500), 100) f = sSubtract(circle(new Vector(x, y), new Vector(3580, 250), 800), f, 300) f = Math.min(f, circle(new Vector(x, y), new Vector(3580, 250), 600)) f = Math.min(f, circle(new Vector(x, y), new Vector(3280, -450), 200)) f = smin(f, circle(new Vector(x, y), new Vector(3160, -180), 100), 400) f = Math.max(f, -circle(new Vector(x, y), new Vector(3580, -200), 200)) return f; } function level2(x, y) { var f = box(new Vector(x, y), new Vector(400, 3300), new Vector(30000, 3000)); // Loop through the level data and add the level data for(var i in levelData) { var terrainType = levelData[i].type; var xPos = levelData[i].x; var yPos = levelData[i].y; var size = levelData[i].size; if(xPos < camera.x + size + 300 && xPos > camera.x - (size + 300) && yPos < camera.y + size + 300 && yPos > camera.y - (size + 300)) { var morphRange = levelData[i].morphRange; if(terrainType === "circle") { if(levelData[i].isAdditive) { f = smin(f, circle(new Vector(x, y), new Vector(xPos, yPos), size), morphRange); } else { f = Math.max(f, -circle(new Vector(x, y), new Vector(xPos, yPos), size)) } } else if(terrainType === "box") { if(levelData[i].isAdditive) { f = smin(f, box(new Vector(x, y), new Vector(xPos, yPos), new Vector(size, size)), morphRange); } else { f = Math.max(f, -box(new Vector(x, y), new Vector(xPos, yPos), new Vector(size, size))); } } } } return f; } function level3(x, y) { var f = box(new Vector(x, y), new Vector(400, 3300), new Vector(30000, 3000)); // Loop through the level data and add the level data for(var i in levelData3) { var terrainType = levelData3[i].type; var xPos = levelData3[i].x; var yPos = levelData3[i].y; var size = levelData3[i].size; if(xPos < camera.x + size + 300 && xPos > camera.x - (size + 300) && yPos < camera.y + size + 300 && yPos > camera.y - (size + 300)) { var morphRange = levelData3[i].morphRange; if(terrainType === "circle") { if(levelData3[i].isAdditive) { f = smin(f, circle(new Vector(x, y), new Vector(xPos, yPos), size), morphRange); } else { f = Math.max(f, -circle(new Vector(x, y), new Vector(xPos, yPos), size)) } } else if(terrainType === "box") { if(levelData3[i].isAdditive) { f = smin(f, box(new Vector(x, y), new Vector(xPos, yPos), new Vector(size, size)), morphRange); } else { f = Math.max(f, -box(new Vector(x, y), new Vector(xPos, yPos), new Vector(size, size))); } } } } return f; } function level5(x, y) { var f = box(new Vector(x, y), new Vector(400, 3300), new Vector(30000, 3000)); // Loop through the level data and add the level data for(var i in levelData5) { var terrainType = levelData5[i].type; var xPos = levelData5[i].x; var yPos = levelData5[i].y; var size = levelData5[i].size; if(xPos < camera.x + size + 300 && xPos > camera.x - (size + 300) && yPos < camera.y + size + 300 && yPos > camera.y - (size + 300)) { var morphRange = levelData5[i].morphRange; if(terrainType === "circle") { if(levelData5[i].isAdditive) { f = smin(f, circle(new Vector(x, y), new Vector(xPos, yPos), size), morphRange); } else { f = Math.max(f, -circle(new Vector(x, y), new Vector(xPos, yPos), size)) } } else if(terrainType === "box") { if(levelData5[i].isAdditive) { f = smin(f, box(new Vector(x, y), new Vector(xPos, yPos), new Vector(size, size)), morphRange); } else { f = Math.max(f, -box(new Vector(x, y), new Vector(xPos, yPos), new Vector(size, size))); } } } } return f; } function level4(x, y) { var f = box(new Vector(x, y), new Vector(400, 3300), new Vector(30000, 3000)); // Loop through the level data and add the level data for(var i in levelData4) { var terrainType = levelData4[i].type; var xPos = levelData4[i].x; var yPos = levelData4[i].y; var size = levelData4[i].size; if(xPos < camera.x + size + 300 && xPos > camera.x - (size + 300) && yPos < camera.y + size + 300 && yPos > camera.y - (size + 300)) { var morphRange = levelData4[i].morphRange; if(terrainType === "circle") { if(levelData4[i].isAdditive) { f = smin(f, circle(new Vector(x, y), new Vector(xPos, yPos), size), morphRange); } else { f = Math.max(f, -circle(new Vector(x, y), new Vector(xPos, yPos), size)) } } else if(terrainType === "box") { if(levelData4[i].isAdditive) { f = smin(f, box(new Vector(x, y), new Vector(xPos, yPos), new Vector(size, size)), morphRange); } else { f = Math.max(f, -box(new Vector(x, y), new Vector(xPos, yPos), new Vector(size, size))); } } } } return f; } var level1Flag = new Vector(4270, -100); var level2Flag = new Vector(5107, 2030); var level3Flag = new Vector(5207, 2130); var level5Flag = new Vector(7177, 5160); var level4Flag = new Vector(2484, 2221 + 650); function drawLevel1() { ctx.fillStyle = "rgb(0,0,0)"; ctx.font = "50px Lilita One"; ctx.textAlign = "center" ctx.fillText("W to Throttle", 340, 100); ctx.fillText("A/D to Tilt", 1340, 100); ctx.font = "30px Lilita One"; ctx.fillText("R to Restart", 2650, 200); ctx.fillText("S to Brake", 2950, -40); ctx.fillStyle = "rgb(133, 133, 133)" ctx.fillRect(level1Flag.x, level1Flag.y - 100, 6, 100); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level1Flag.x, level1Flag.y - 100, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level1Flag.x, level1Flag.y - 95, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level1Flag.x, level1Flag.y - 90, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level1Flag.x, level1Flag.y - 85, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level1Flag.x, level1Flag.y - 80, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level1Flag.x, level1Flag.y - 75, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level1Flag.x, level1Flag.y - 70, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level1Flag.x, level1Flag.y - 65, 60, 5); } function drawLevel2() { ctx.fillStyle = "rgb(133, 133, 133)" ctx.fillRect(level2Flag.x, level2Flag.y - 100, 6, 100); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level2Flag.x, level2Flag.y - 100, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level2Flag.x, level2Flag.y - 95, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level2Flag.x, level2Flag.y - 90, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level2Flag.x, level2Flag.y - 85, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level2Flag.x, level2Flag.y - 80, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level2Flag.x, level2Flag.y - 75, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level2Flag.x, level2Flag.y - 70, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level2Flag.x, level2Flag.y - 65, 60, 5); } function drawLevel3() { level3Flag.x += 1200; level3Flag.y += 550; ctx.fillStyle = "rgb(133, 133, 133)" ctx.fillRect(level3Flag.x, level3Flag.y - 100, 6, 100); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level3Flag.x, level3Flag.y - 100, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level3Flag.x, level3Flag.y - 95, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level3Flag.x, level3Flag.y - 90, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level3Flag.x, level3Flag.y - 85, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level3Flag.x, level3Flag.y - 80, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level3Flag.x, level3Flag.y - 75, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level3Flag.x, level3Flag.y - 70, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level3Flag.x, level3Flag.y - 65, 60, 5); level3Flag.x -= 1200; level3Flag.y -= 550; } function drawLevel5() { ctx.fillStyle = "rgb(133, 133, 133)" ctx.fillRect(level5Flag.x * 1.25, level5Flag.y * 1.25 - 100, 6, 100); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level5Flag.x * 1.25, level5Flag.y * 1.25 - 100, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level5Flag.x * 1.25, level5Flag.y * 1.25 - 95, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level5Flag.x * 1.25, level5Flag.y * 1.25 - 90, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level5Flag.x * 1.25, level5Flag.y * 1.25 - 85, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level5Flag.x * 1.25, level5Flag.y * 1.25 - 80, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level5Flag.x * 1.25, level5Flag.y * 1.25 - 75, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level5Flag.x * 1.25, level5Flag.y * 1.25 - 70, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level5Flag.x * 1.25, level5Flag.y * 1.25 - 65, 60, 5); } function drawLevel4() { ctx.fillStyle = "rgb(133, 133, 133)" ctx.fillRect(level4Flag.x * 1.25, level4Flag.y * 1.25 - 100, 6, 100); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level4Flag.x * 1.25, level4Flag.y * 1.25 - 100, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level4Flag.x * 1.25, level4Flag.y * 1.25 - 95, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level4Flag.x * 1.25, level4Flag.y * 1.25 - 90, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level4Flag.x * 1.25, level4Flag.y * 1.25 - 85, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level4Flag.x * 1.25, level4Flag.y * 1.25 - 80, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level4Flag.x * 1.25, level4Flag.y * 1.25 - 75, 60, 5); ctx.fillStyle = "rgb(255, 255, 255)" ctx.fillRect(level4Flag.x * 1.25, level4Flag.y * 1.25 - 70, 60, 5); ctx.fillStyle = "rgb(0, 0, 0)" ctx.fillRect(level4Flag.x * 1.25, level4Flag.y * 1.25 - 65, 60, 5); } var randPoints = []; for(var i = 0; i < 25; i++) { randPoints.push([Math.random() * 100, Math.random() * 35, 80 - Math.random() * 30]) } randPoints[1].sort(function(a, b) { return (a - b) }); function drawLevel1Background(x, y) { ctx.save() ctx.fillStyle = "rgb(112, 157, 255)" ctx.fillRect(0, 0, 100, 100); ctx.translate(-x / 260 + 4, 0); for(var j = 0; j < 6; j += 0.5) { ctx.fillStyle = "rgb(255,255,0," + (1 / (j * j)) + ")"; ctx.beginPath(); ctx.ellipse(90, 10, 10 + j * j, 10 + j * j, 0, 0, Math.PI * 2.0); ctx.fill(); } ctx.restore(); ctx.fillStyle = "rgb(255,255,255," + (0.2) + ")"; for(var i = 0; i < 15; i++) { ctx.beginPath(); ctx.ellipse(mod(-randPoints[i][0] - (x / randPoints[i][2]), 140) - 20, randPoints[i][1], 20, 10, 0, 0, Math.PI * 2.0); ctx.fill(); } } function drawLevel2Background(x, y) { ctx.save() ctx.fillStyle = "rgb(117, 71, 40)" ctx.fillRect(0, 0, 100, 100); ctx.fillStyle = "rgb(115, 115, 115)"; for(var i = 0; i < 15; i++) { ctx.beginPath(); ctx.ellipse(mod(-randPoints[i][0] - x / 28, 140) - 20, randPoints[i][1] * 3, 5, 5, 0, 0, Math.PI * 2.0); ctx.fill(); } ctx.restore() } function drawLevel3Background(x, y) { ctx.save() ctx.fillStyle = "rgb(92, 76, 65)" ctx.fillRect(0, 0, 100, 100); ctx.fillStyle = "rgb(59, 59, 59)"; ctx.lineWidth = 1; ctx.strokeStyle = "rgb(51, 51, 51)" for(var i = 0; i < 25; i++) { var stalagtiteX = mod(-randPoints[i][0] * 379.4 - x / (208 / (randPoints[i][1] / 3)), 160) - 20 ctx.beginPath(); ctx.moveTo(stalagtiteX + 16, 0, 5, 5, 0, 0, Math.PI * 2.0); ctx.lineTo(stalagtiteX + 8, randPoints[i][1] + 20, 5, 5, 0, 0, Math.PI * 2.0); ctx.lineTo(stalagtiteX, 0, 5, 5, 0, 0, Math.PI * 2.0); ctx.fill(); ctx.stroke(); } ctx.restore() } function drawLevel4Background(x, y) { ctx.save() ctx.fillStyle = "rgb(92, 45, 20)" ctx.fillRect(0, 0, 100, 100); ctx.fillStyle = "rgb(66, 49, 37)"; ctx.lineWidth = 1; ctx.strokeStyle = "rgb(48, 34, 25)" for(var i = 0; i < 25; i++) { var stalagtiteX = mod(-randPoints[i][0] * 379.4 - x / (208 / (randPoints[i][1] / 3)), 160) - 20 ctx.beginPath(); ctx.moveTo(stalagtiteX + 16, 0, 5, 5, 0, 0, Math.PI * 2.0); ctx.lineTo(stalagtiteX + 8, randPoints[i][1] + 20, 5, 5, 0, 0, Math.PI * 2.0); ctx.lineTo(stalagtiteX, 0, 5, 5, 0, 0, Math.PI * 2.0); ctx.fill(); ctx.stroke(); } ctx.restore() } function drawLevel5Background(x, y) { ctx.save() ctx.fillStyle = "rgb(151, 27, 9)" ctx.fillRect(0, 0, 100, 100); ctx.fillStyle = "rgb(225, 55, 21)"; ctx.lineWidth = 1; ctx.strokeStyle = "rgb(187, 42, 7)" for(var i = 0; i < 25; i++) { var stalagtiteX = mod(-randPoints[i][0] * 379.4 - x / (208 / (randPoints[i][1] / 3)), 160) - 20 ctx.beginPath(); ctx.moveTo(stalagtiteX + 16, 0, 5, 5, 0, 0, Math.PI * 2.0); ctx.lineTo(stalagtiteX + 8, randPoints[i][1] + 20, 5, 5, 0, 0, Math.PI * 2.0); ctx.lineTo(stalagtiteX, 0, 5, 5, 0, 0, Math.PI * 2.0); ctx.fill(); ctx.stroke(); } ctx.restore() } function sphereLevelCollision(x, y, r) { if(level === 1) { return level1(x, y); } else if(level === 2) { return level2(x, y); } else if(level === 3) { return level3(x, y); } else if(level === 5) { return level5(x, y); } else if(level === 4) { return level4(x, y); } } function getWorldNormal(x, y, r) { var cx = (sphereLevelCollision(x, y, r) - sphereLevelCollision(x + EPSILON, y, r) - 0.000001) * EPSILON; var cy = (sphereLevelCollision(x, y, r) - sphereLevelCollision(x, y + EPSILON, r)) * EPSILON; var norm = new Vector(cx, cy); norm = norm.normalize(); return norm; } ctx.imageSmoothingEnabled = false; ctx2.imageSmoothingEnabled = false; //b.style.display="none";c class Bike { constructor(x, y, a) { this.x = x; this.y = y; this.yv = 0; this.xv = 0; this.gravity = 0.2; this.t1Angle = 0; this.t2Angle = 0; this.t1Anglev = 0; this.t2Anglev = 0; this.x2 = x + 50 * Math.cos(a); this.y2 = y + 50 * Math.sin(a); this.yv2 = 0; this.xv2 = 0; this.centerx = (this.x + this.x2) / 2; this.centery = (this.y + this.y2) / 2; this.bikeAngle = a; this.alive = true; this.alive2 = true; this.wx = this.centerx; this.wy = this.centery this.wxv = 0; this.wyv = 0 this.delay = 0; this.frameCount = 0; this.toggle = 1; } update() { this.frameCount++; if(!this.alive2) { this.xv = 0; this.yv = 0; this.xv2 = 0; this.yv2 = 0; if(this.toggle === 1) { this.delay = this.frameCount; this.toggle = 0; particles.push(new Particle(this.centerx, this.centery, random() * 5, random() * 5 - 3, 20, "gas", 100, 100, 100, 0.7, 40)); for(var i = 0; i < 45; i++) { particles.push(new Particle(this.centerx, this.centery, random() * 8, random() * 8, 20, "g", 225 + random() * 80, 135 + random() * 80, 5, 0.7, 40)); } } if(this.frameCount - this.delay > 60) { this.alive = false; } } this.x2 += this.xv2 / 5; this.y2 += this.yv2 / 5; this.x += this.xv / 5; this.y += this.yv / 5; this.wxv = 0.96; this.wyv = 0.96 this.wx += this.wxv this.wy += this.wyv if(key.d \|\| key.ArrowRight) { var vels = new Vector(this.xv, this.yv); var rot = new Vector(Math.cos(this.bikeAngle), Math.sin(this.bikeAngle)) rot = rot.scale(0.15); if(!key.b){ this.xv -= rot.x; this.yv -= rot.y }else{ rot=rot.scale(3); } this.xv2 += rot.x; this.yv2 += rot.y } if(key.a \|\| key.ArrowLeft) { var rot = new Vector(Math.cos(this.bikeAngle), Math.sin(this.bikeAngle)) rot = rot.scale(-0.15); if(!key.b){ this.xv2 += rot.x; this.yv2 += rot.y }else{ rot=rot.scale(3); } this.xv -= rot.x; this.yv -= rot.y } this.yv += this.gravity; this.yv2 += this.gravity; var distToClosestSurface = sphereLevelCollision(this.x, this.y, 10.0); if(sphereLevelCollision(this.centerx - 50 * Math.cos(this.bikeAngle), this.centery - 50 * Math.sin(this.bikeAngle)) < 0) { this.alive2 = false; } if(distToClosestSurface < 0) { var pushOut = getWorldNormal(this.x, this.y, 10.0).normalize(); this.x += pushOut.x * distToClosestSurface; this.y += pushOut.y * distToClosestSurface; if(level <= 2 \|\| level === 5) { for(var i = 0; i < (-distToClosestSurface - 1) / 5; i++) { particles.push(new Particle(player[0].centerx, player[0].centery, random() * 4, random() * 1 - 1, 20, "g", 155, 85, 45, 0.9, 30)); } } else { for(var i = 0; i < (-distToClosestSurface - 1) / 5; i++) { particles.push(new Particle(player[0].centerx, player[0].centery, random() * 4, random() * 1 - 1, 20, "g", 75, 75, 75, 0.9, 30)); } } var vel = new Vector(this.xv, this.yv); var vel2 = new Vector(this.xv, this.yv); vel = vel.subtract(pushOut.scale(-distToClosestSurface)); this.xv = vel.x; this.yv = vel.y; } var distToClosestSurface = sphereLevelCollision(this.x2, this.y2, 10.0); if(distToClosestSurface < 0) { var pushOut = getWorldNormal(this.x2, this.y2, 10.0).normalize(); this.x2 += pushOut.x * distToClosestSurface; this.y2 += pushOut.y * distToClosestSurface; var vel = new Vector(this.xv2, this.yv2); var vel2 = new Vector(this.xv2, this.yv2); vel = vel.subtract(pushOut.scale(-distToClosestSurface)); this.xv2 = vel.x; this.yv2 = vel.y; } var diff = new Vector(this.x2, this.y2).subtract(new Vector(this.x, this.y)); diff = diff.normalize(); diff = diff.scale(-50); diff = diff.add(new Vector(this.x2, this.y2)); var toV = diff.subtract(new Vector(this.x, this.y)); var vels = new Vector(this.xv, this.yv); vels = vels.add(toV.scale(1)); this.xv = vels.x; this.yv = vels.y; diff = new Vector(this.x, this.y).subtract(new Vector(this.x2, this.y2)); diff = diff.normalize(); diff = diff.scale(-50); diff = diff.add(new Vector(this.x, this.y)); var toV = diff.subtract(new Vector(this.x2, this.y2)); var vels = new Vector(this.xv2, this.yv2); vels = vels.add(toV.scale(1)); this.xv2 = vels.x; this.yv2 = vels.y; diff = new Vector(this.centerx, this.centery).subtract(new Vector(this.wx, this.wy)); // diff=diff.normalize(); // diff=diff.scale(5); diff = diff.add(new Vector(this.centerx, this.centery)); var toV = diff.subtract(new Vector(this.wx, this.wy)); var vels = new Vector(this.wxv, this.wyv); vels = vels.add(toV.scale(0.03)); this.wxv = vels.x; this.wyv = vels.y; distToClosestSurface = sphereLevelCollision(this.x2, this.y2, 10.0); if(key.r) { this.alive2 = false; if(level === 1) { level1Time = 0; } if(level === 2) { level2Time = 0; } if(level === 3) { level3Time = 0; } if(level === 4) { level4Time = 0; } if(level === 5) { level5Time = 0; } } if(distToClosestSurface < 3 && (key.w \|\| key.ArrowUp)) { var g = new Vector(this.xv, this.yv); var n = getWorldNormal(this.x, this.y, 10.0).normalize(); n = n.rotateBy(3.14159 / 2); g = g.add(n.scale(0.4)); this.xv = g.x; this.yv = g.y; g = new Vector(this.xv2, this.yv2); n = getWorldNormal(this.x2, this.y2, 10.0).normalize(); n = n.rotateBy(3.14159 / 2); g = g.add(n.scale(0.4)); this.xv2 = g.x; this.yv2 = g.y; this.xv = 0.995; this.yv = 0.995; this.xv2 = 0.995; this.yv2 = 0.995; } if(distToClosestSurface < 3 && (key.s \|\| key.ArrowDown)) { this.xv = 0.95; this.yv = 0.95; this.xv2 = 0.95; this.yv2 = 0.95; } var an = new Vector(this.x, this.y).subtract(new Vector(this.x2, this.y2)); if(an.x >= 0 && an.y > 0) { this.bikeAngle = -(Math.atan(an.y / an.x)); } else if(an.x < 0 && an.y > 0) { this.bikeAngle = (Math.PI - Math.atan(an.y / an.x)) - (Math.PI * 2); } else if(an.x < 0 && an.y <= 0) { this.bikeAngle = -(Math.PI + Math.atan(an.y / an.x)); } else if(an.x >= 0 && an.y <= 0) { this.bikeAngle = ((Math.PI * 2) - Math.atan(an.y / an.x)) - (Math.PI * 2); } this.bikeAngle = -1; this.bikeAngle -= Math.PI / 2 this.centerx = (this.x + this.x2) / 2 - 20 Math.cos(this.bikeAngle); this.centery = (this.y + this.y2) / 2 - 20 * Math.sin(this.bikeAngle); } draw() { drawWormbike(this, this.bikeAngle, this.t1Angle, this.t2Angle); var distToClosestSurface = sphereLevelCollision(this.x, this.y, 10.0); if(distToClosestSurface < 2) { var vel = new Vector(this.xv, this.yv); var pushOut = getWorldNormal(this.x, this.y, 10.0); if(pushOut.rotateBy(3.1415 / 2).dot(vel) > 0) { this.t1Anglev = (vel.magnitude() / 30.2) * Math.abs(pushOut.rotateBy(3.1415 / 2).dot(vel.normalize())); } else { this.t1Anglev = -vel.magnitude() / 30.2 * Math.abs(pushOut.rotateBy(3.1415 / 2).dot(vel.normalize())); } } else { this.t1Anglev /= 1.01; } this.t1Angle += this.t1Anglev / 2; var distToClosestSurface = sphereLevelCollision(this.x2, this.y2, 10.0); if(distToClosestSurface < 2) { var vel = new Vector(this.xv2, this.yv2); var pushOut = getWorldNormal(this.x2, this.y2, 10.0); if(pushOut.rotateBy(3.1415 / 2).dot(vel) > 0) { this.t2Anglev = (vel.magnitude() / 30.2) * Math.abs(pushOut.rotateBy(3.1415 / 2).dot(vel.normalize())); } else { this.t2Anglev = -vel.magnitude() / 30.2 * Math.abs(pushOut.rotateBy(3.1415 / 2).dot(vel.normalize())); } } else { this.t2Anglev /= 1.01; } this.t2Angle += this.t2Anglev / 2; } } //Texture{ function mod(a, b) { if(a > 0) { return a % b; } else { return Math.abs((a + b * Math.abs(Math.floor(a))) % b); } } var noiseText = []; for(var i = 0; i < 200; i++) { noiseText.push([]); } for(var i = 0; i < 200; i++) { noiseText[i].push(0); } var pts = []; for(var y = 0; y <= 46; y++) { pts.push({ x: Math.random() * 200, y: Math.random() * 200 }) } var x = 0; var speed = 200; for(var x3 = 0; x3 < speed; x3++) { if(x < 200) { x++; } for(var y = 0; y < 200; y++) { var dist = 50; for(var i = 0; i < pts.length; i++) { for(var y1 = 0; y1 <= 3; y1++) { for(var x1 = 0; x1 <= 3; x1++) { var cx = (pts[i].x - x + x1 * 200 - 200); var cy = (pts[i].y - y + y1 * 200 - 200); dist = smin(dist, Math.sqrt(cx * cx + cy * cy), 20.0); } } } dist = 255 - (dist * 5 - 15); noiseText[y][x] = dist } } //} var latestGameTime = -1; var timeHighScore = -1; function random() { return Math.random() - 0.5 } function fbm(x, y) { var f = (noiseText[mod(x, 199) + 1][mod(y, 199) + 1] / 4 - 40) f += (noiseText[mod(x * 2, 199) + 1][mod(y * 2, 199) + 1] / 4 - 40) / 2 f += (noiseText[mod(Math.round(x / 2), 199) + 1][mod(Math.round(y / 2), 199) + 1] / 4 - 40) * 2 return f; } var frameCount = 0; var player = []; for(var i = 0; i < 1; i++) { player.push(new Bike(220 + i, 250, 0)); } var firstFrameToggle = 1; var camera = new Vector(0, 0); var camera2 = new Vector(0, 0); function runLevel1() { if(level === 1) { var dx = (player[0].centerx - level1Flag.x + 690); var dy = (player[0].centery - level1Flag.y - 80); if(frameCount > 100) { level1Time++; } } else if(level === 2) { var dx = (player[0].centerx - level2Flag.x + 890); var dy = (player[0].centery - level2Flag.y + 360); if(frameCount > 100) { level2Time++; } } else if(level === 3) { var dx = (player[0].centerx - level3Flag.x); var dy = (player[0].centery - level3Flag.y); if(frameCount > 100) { level3Time++; if(Math.sqrt(dx * dx + dy * dy) < 80) { scene = "levelEnd"; } } } else if(level === 5) { var dx = (player[0].centerx - level5Flag.x - 130); var dy = (player[0].centery - level5Flag.y + 30); if(Math.sqrt(dx * dx + dy * dy) < 120) { scene = "levelEnd"; } if(frameCount > 100) { level5Time++; } } else if(level === 4) { var dx = (player[0].centerx - level4Flag.x - 130); var dy = (player[0].centery - level4Flag.y + 30); if(frameCount > 100) { level4Time++; } } if(Math.sqrt(dx * dx + dy * dy) < 50) { scene = "levelEnd"; } if(firstFrameToggle === 1 && transitionRunning === 0) { frameCount = 0; firstFrameToggle = 0; } while(Math.floor(600 / resolution) !== (600 / resolution)) { resolution++; } camera = camera.subtract(camera.subtract(new Vector(player[0].centerx, player[0].centery)).scale(0.99)); ctx.save(); ctx.scale(6 / resolution, 6 / resolution) ctx.fillStyle = "rgb(0,0,0)" ctx.fillRect(0, 0, 600, 600); if(frameCount % 2 === 0) { particles.push(new Particle(player[0].x - Math.sin(-player[0].bikeAngle + 3.14 / 2) * 40, player[0].y - Math.cos(-player[0].bikeAngle + 3.14 / 2) * 40, random() * 5, random() * 5, 20, "gas", 155, 155, 155, 0.4, 30)); } if(level === 1) { drawLevel1Background(camera.x, camera.y); } else if(level === 2) { drawLevel2Background(camera.x, camera.y); } else if(level === 3) { drawLevel3Background(camera.x, camera.y); } else if(level === 4) { drawLevel4Background(camera.x, camera.y); } else if(level === 5) { drawLevel5Background(camera.x, camera.y); } ctx.restore(); var data = ctx.getImageData(0, 0, 600 / resolution, 600 / resolution); frameCount += 1; for(var y = 0; y < 600 / resolution; y++) { for(var x = 0; x < 600 / resolution; x++) { var index = (x) * 4 + (y) * (600 / resolution) * 4; var col = 0; var wh = new Vector(x * resolution + Math.floor((camera.x - 300) / resolution) * resolution, y * resolution + Math.floor((camera.y - 300) / resolution) * resolution); if(level === 1) { var dista = level1(wh.x, wh.y) } else if(level === 2) { var dista = level2(wh.x, wh.y) } else if(level === 3) { var dista = level3(wh.x, wh.y) } else if(level === 5) { var dista = level5(wh.x, wh.y) } else if(level === 4) { var dista = level4(wh.x, wh.y) } if(level === 1) { if(dista <= 0) { col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = 139 - col data.data[index + 1] = 69 - col data.data[index + 2] = 19 - col data.data[index + 3] = 255 } else if(dista < 8) { data.data[index + 0] = 60 data.data[index + 1] = 185 data.data[index + 2] = 80 data.data[index + 3] = 255 } } else if(level === 2) { var x1 = (x - 300 / resolution) * resolution; var y1 = (y - 300 / resolution) * resolution; var di = Math.max(Math.sqrt(x1 * x1 + y1 * y1) * 1.2 - 30, 0) / 5; if(dista <= 0) { col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = (139 - col / 2) - di data.data[index + 1] = (69 - col / 2) - di data.data[index + 2] = (19 - col / 2) - di } else if(dista < 8) { data.data[index + 0] = 139 / 1.5 - di data.data[index + 1] = 69 / 1.5 - di data.data[index + 2] = 19 / 1.5 - di } else { data.data[index + 0] -= di data.data[index + 1] -= di data.data[index + 2] -= di } } else if(level === 3) { var x1 = (x - 300 / resolution) * resolution; var y1 = (y - 300 / resolution) * resolution; var di = Math.max(Math.sqrt(x1 * x1 + y1 * y1) * 1.2 - 30, 0) / 5; if(dista <= 0) { col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = (79 - col / 2) - di data.data[index + 1] = (79 - col / 2) - di data.data[index + 2] = (79 - col / 2) - di } else if(dista < 8) { data.data[index + 0] = 99 - di data.data[index + 1] = 99 - di data.data[index + 2] = 99 - di } else { data.data[index + 0] -= di data.data[index + 1] -= di data.data[index + 2] -= di } } else if(level === 4) { var x1 = (x - 300 / resolution) * resolution; var y1 = (y - 300 / resolution) * resolution; var di = Math.max(Math.sqrt(x1 * x1 + y1 * y1) * 1.2 - 30, 0) / 2; if(dista <= 0) { col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = (49 - col / 4) - di data.data[index + 1] = (49 - col / 4) - di data.data[index + 2] = (49 - col / 4) - di } else if(dista < 8) { data.data[index + 0] = 29 - di data.data[index + 1] = 29 - di data.data[index + 2] = 29 - di } else { data.data[index + 0] -= di data.data[index + 1] -= di data.data[index + 2] -= di } } else if(level === 5) { var x1 = (x - 300 / resolution) * resolution; var y1 = (y - 300 / resolution) * resolution; var di = Math.max(Math.sqrt(x1 * x1 + y1 * y1) * 1.2 - 10, 0) / 5; if(dista <= 0) { col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 if(col < 12) { data.data[index + 0] = (159 - col / 2) - di data.data[index + 1] = (69 - col / 2) - di data.data[index + 2] = (69 - col / 2) - di } else { data.data[index + 0] = (255 - col * 2) - di data.data[index + 1] = (69 - col * 2) - di data.data[index + 2] = (69 - col * 2) - di } } else if(dista < 8) { data.data[index + 0] = 119 - di data.data[index + 1] = 39 - di data.data[index + 2] = 39 - di } else { data.data[index + 0] -= di data.data[index + 1] -= di data.data[index + 2] -= di } } } } ctx.putImageData(data, 0, 0); ctx2.drawImage(c, 0, 0, 600, 600); // ctx.fillStyle="rgb(255, 255, 255)" // ctx.fillRect(0,0,600,600); // ctx.fillStyle="rgb(26,26,23)" // ctx.fillRect(280,280,40,40); ctx.fillRect(0, 0, 600, 600); ctx.save(); ctx.drawImage(b, 0, 0, 600 * resolution, 600 * resolution); ctx.scale(0.75, 0.75) ctx.translate(-camera.x + 400, -camera.y + 400); ctx.translate(-(camera.x - 800) / 4, -(camera.y - 400) / 4) if(level === 1) { drawLevel1(); } else if(level === 2) { drawLevel2(); } else if(level === 3) { drawLevel3(); } else if(level === 5) { drawLevel5(); } for(var i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); if(particles[i].life < 0) { particles.splice(i, 1); } } ctx.translate((camera.x - 800) / 4, (camera.y - 400) / 4) for(var t = 0; t < player.length; t++) { player[t].update(); player[t].update(); player[t].draw(); if(!player[t].alive) { player[t].x = 220; player[t].y = 250; player[t].x2 = 220 + 50; player[t].y2 = 250; player[t].xv = 0; player[t].xv2 = 0; player[t].yv = 0; player[t].yv2 = 0; player[t].alive = true; player[t].alive2 = true; player[t].toggle = 1; player[t].wx = player[t].x + 25; player[t].wy = player[t].y; player[t].wxv = 0; player[t].wyv = 0; } } ctx.restore(); ctx.font = "15px Lilita One"; ctx.textAlign = "center" ctx.fillText(fps, 20, 40); if((fps < 40 && frameCount % 10 === 0) && frameCount < 150) { resolution++; } if(transitionRunning === 1) { for(var t = 0; t < player.length; t++) { player[t].xv /= 1.2; player[t].xv2 /= 1.2; player[t].yv /= 1.2; player[t].yv2 /= 1.2; } } if(transitionRunning === 1 && firstFrameToggle === 1) { for(var t = 0; t < player.length; t++) { player[t].xv = 0; player[t].xv2 = 0; player[t].yv = 0; player[t].yv2 = 0; player[t].x = 220; player[t].y = 250; player[t].x2 = 220 + 50; player[t].y2 = 250; player[t].wx = player[t].x + 25; player[t].wy = player[t].y; player[t].wxv = 0; player[t].wyv = 0; } } if(frameCount < 100) { ctx.font = "40px Lilita One"; ctx.textAlign = "center" ctx.fillStyle = "rgb(230, 88, 0)" ctx.fillText("Finding optimal resolution...", 300, 300); for(var t = 0; t < player.length; t++) { player[t].x = 220; player[t].y = 250; player[t].wx = player[t].x + 25; player[t].wy = player[t].y; player[t].x2 = 220 + 50; player[t].y2 = 250; player[t].xv = 0; player[t].xv2 = 0; player[t].yv = 0; player[t].yv2 = 0; player[t].wxv = 0; player[t].wyv = 0; } } } var clickToggle = 1; function menu() { ctx.fillRect(0, 0, 600, 600); var data = ctx.getImageData(0, 0, 600 / resolution, 600 / resolution); for(var y = 0; y < 600 / resolution; y++) { for(var x = 0; x < 600 / resolution; x++) { var index = (x) * 4 + (y) * (600 / resolution) * 4; var col = 0; var wh = new Vector(x * resolution + Math.floor((camera.x - 300) / resolution) * resolution, y * resolution + Math.floor((camera.y - 300) / resolution) * resolution); col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = (139 - col) / 2 data.data[index + 1] = (69 - col) / 2 data.data[index + 2] = (19 - col) / 2 data.data[index + 3] = 255 } } ctx.putImageData(data, 0, 0); ctx2.drawImage(c, 0, 0, 600, 600); // ctx.fillStyle="rgb(255, 255, 255)" // ctx.fillRect(0,0,600,600); // ctx.fillStyle="rgb(26,26,23)" // ctx.fillRect(280,280,40,40); ctx.fillRect(0, 0, 600, 600); ctx.drawImage(b, 0, 0, 600 * resolution, 600 * resolution); ctx.font = "80px Single Day"; ctx.textAlign = "center" ctx.fillStyle = "rgb(191, 103, 103)" ctx.strokeStyle = "rgb(82, 34, 34)" ctx.save(); ctx.rotate(0.1); ctx.translate(310, 20); ctx.lineWidth = 2; ctx.fillText("WORMLIKE", 0, 20); ctx.strokeText("WORMLIKE", 0, 20); ctx.restore(); ctx.lineWidth = 6; ctx.fillStyle = "rgb(156, 99, 34)" ctx.strokeStyle = "rgb(54, 32, 0)" ctx.font = "80px Rubik Dirt"; ctx.strokeText("DIRTBIKE", 300, 150); ctx.fillText("DIRTBIKE", 300, 150); if(key.q&&key.t){ player[0].update(); ctx.save(); ctx.translate(300,300); ctx.rotate(-0.2); ctx.scale(4,4); ctx.translate(-300,-300) ctx.translate(56,109) player[0].xv=0; player[0].yv=0; player[0].xv2=0; player[0].yv2=0; drawWormbike(player[0],player[0].bikeAngle,0,0); ctx.restore(); }else{ ctx.lineWidth = 1; ctx.fillStyle = "rgb(125, 125, 125)" ctx.font = "460px Rubik Mono One"; ctx.fillText("-", 300, 403); ctx.fillStyle = "rgb(102, 102, 102)" ctx.font = "400px Rubik Dirt"; ctx.fillText("–", 300, 370); ctx.fillStyle = "rgb(125, 125, 125)" ctx.font = "360px Rubik Mono One"; ctx.fillText("-", 300, 503); ctx.fillStyle = "rgb(102, 102, 102)" ctx.font = "300px Rubik Dirt"; ctx.fillText("–", 300, 474); ctx.fillStyle = "rgb(125, 125, 125)" ctx.font = "360px Rubik Mono One"; ctx.fillText("-", 300 + 190, 503); ctx.fillStyle = "rgb(102, 102, 102)" ctx.font = "300px Rubik Dirt"; ctx.fillText("–", 300 + 190, 474); ctx.fillStyle = "rgb(125, 125, 125)" ctx.font = "360px Rubik Mono One"; ctx.fillText("-", 300 - 190, 503); ctx.fillStyle = "rgb(102, 102, 102)" ctx.font = "300px Rubik Dirt"; ctx.fillText("–", 300 - 190, 474); if(mouseX > 200 && mouseX < 400 && mouseY > 206 && mouseY < 298) { ctx.font = "45px Rubik Mono One"; if(clicked) { scene = "level1"; firstFrameToggle = 1; } } else { ctx.font = "40px Rubik Mono One"; } ctx.fillStyle = "rgb(20, 20, 20)" ctx.fillText("Play", 300, 266); ctx.lineWidth = 2; ctx.strokeStyle = "rgb(173, 161, 0)" ctx.strokeText("Play", 300, 266); if(level1Time > 0 && level2Time > 0 && level3Time > 0 && level4Time > 0 && level5Time > 0) { timeHighScore = Math.max(timeHighScore, Math.round(((level1Time + level2Time + level3Time + level4Time + level5Time) / 60) * 100) / 100); } if(mouseX > 220 - 190 && mouseX < 380 - 190 && mouseY > 348 && mouseY < 420) { ctx.font = "30px Rubik Mono One"; if(clicked) { if(level1Time > 0 && level2Time > 0 && level3Time > 0 && level4Time > 0 && level5Time > 0) { scene = "levels"; } else { ctx.font = "25px Rubik Mono One"; ctx.fillStyle = "rgb(255,255,255)" ctx.fillText("Finish all the levels!", 300, 300) } } } else { ctx.font = "25px Rubik Mono One"; } ctx.fillStyle = "rgb(20, 20, 20)" ctx.fillText("Levels", 300 - 190, 394); ctx.lineWidth = 2; ctx.strokeStyle = "rgb(156, 156, 156)" ctx.strokeText("Levels", 300 - 190, 394); if(mouseX > 220 && mouseX < 380 && mouseY > 348 && mouseY < 420) { ctx.font = "30px Rubik Mono One"; if(clicked && clickToggle === 1) { clickToggle = 0; window.open("https://www.khanacademy.org/computer-programming/wormlike-dirtbike-editor/4731730148900864"); } } else { ctx.font = "25px Rubik Mono One"; } ctx.fillStyle = "rgb(20, 20, 20)" ctx.fillText("Editor", 300, 394); ctx.lineWidth = 2; ctx.strokeStyle = "rgb(156, 156, 156)" ctx.strokeText("Editor", 300, 394); if(mouseX > 220 + 190 && mouseX < 380 + 190 && mouseY > 348 && mouseY < 420) { ctx.font = "30px Rubik Mono One"; if(clicked) { scene = "leaderboard"; } } else { ctx.font = "25px Rubik Mono One"; } ctx.fillStyle = "rgb(20, 20, 20)" ctx.fillText("Scores", 300 + 190, 394); ctx.lineWidth = 2; ctx.strokeStyle = "rgb(156, 156, 156)" ctx.strokeText("Scores", 300 + 190, 394); ctx.font = "32px Single Day"; ctx.fillStyle = "rgb(153, 153, 153)" ctx.fillText("Your Total Time Highscore:", 300, 500); ctx.font = "28px Monospace"; if(timeHighScore > 0) { ctx.fillText((Math.floor(timeHighScore / 60)) + "' " + (Math.round((timeHighScore % 60) * 100) / 100) + "\"", 300, 550); } else { ctx.font = "22px Single Day"; ctx.fillText("No scores yet. Finish every level first!", 300, 550); } } frameCount++; } var frameCount3 = 0; function transition() { if(transitionToggle === 1) { frameCount2 = 0; transitionToggle = 0; levelEndToggle = 1; } ctx.fillStyle = "rgb(201, 136, 201)" ctx.strokeStyle = "rgb(125, 87, 125)" ctx.lineWidth = 50; for(var i = 0; i < 10; i++) { ctx.beginPath(); ctx.ellipse(-300 + frameCount2 * 15 - i * 200, 300, 300, 300, 0, 0, Math.PI * 2.0); ctx.stroke(); ctx.fill(); } ctx.lineWidth = 1; frameCount2++; transitionRunning = 1; if(frameCount2 > 150) { totalSceneSwitch = scene; } if(frameCount2 > 200) { transitionRunning = 0; sceneSwitchToggle = 1; } } var nextLevelToggle = 1; function levelEnd() { ctx.fillRect(0, 0, 600, 600); data = ctx.getImageData(0, 0, 600 / resolution, 600 / resolution); for(var y = 0; y < 600 / resolution; y++) { for(var x = 0; x < 600 / resolution; x++) { var index = (x) * 4 + (y) * (600 / resolution) * 4; var col = 0; var wh = new Vector(x * resolution + Math.floor((camera.x - 300) / resolution) * resolution, y * resolution + Math.floor((camera.y - 300) / resolution) * resolution); col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = (139 - col) / 2 data.data[index + 1] = (69 - col) / 2 data.data[index + 2] = (19 - col) / 2 data.data[index + 3] = 255 } } ctx.putImageData(data, 0, 0); ctx2.drawImage(c, 0, 0, 600, 600); // ctx.fillStyle="rgb(255, 255, 255)" // ctx.fillRect(0,0,600,600); // ctx.fillStyle="rgb(26,26,23)" // ctx.fillRect(280,280,40,40); ctx.fillRect(0, 0, 600, 600); //ctx.save(); ctx.drawImage(b, 0, 0, 600 * resolution, 600 * resolution); if(levelEndToggle === 1 && transitionRunning === 0) { levelEndToggle = 0; frameCount3 = 0; } if(levelEndToggle === 1) { frameCount3 = -1; nextLevelToggle = 1; } frameCount3++; if(clicked && nextLevelToggle === 1 && levelEndToggle === 0) { if(level <= 4) { nextLevelToggle = 0; level++; scene = "level1"; firstFrameToggle = 1; } else { nextLevelToggle = 0; scene = "menu"; } } ctx.lineWidth = 6; ctx.fillStyle = "rgb(194, 128, 58)" if(frameCount3 !== -1) { if(frameCount3 > 1) { ctx.font = (60 + (20 / (frameCount3 / 20))) + "px Rubik Dirt"; if(level === 1) { ctx.fillText("Level 1 Time:", 300, 150); } else if(level === 2) { ctx.fillText("Level 2 Time:", 300, 150); } else if(level === 3) { ctx.fillText("Level 3 Time:", 300, 150); } else if(level === 4) { ctx.fillText("Level 4 Time:", 300, 150); } else if(level === 5) { ctx.fillText("Level 5 Time:", 300, 150); } ctx.fillStyle = "rgb(120, 25, 25)" ctx.font = "25px Rubik Dirt"; if(level <= 4) { ctx.fillText("Click to burrow to the next level...", 300, 550) } else { ctx.font = "22px Rubik Dirt"; ctx.fillText("You beat all the levels! Click to return to menu", 300, 550) } } if(frameCount3 > 40) { ctx.fillStyle = "rgb(194, 128, 58)" ctx.font = (40 + (20 / ((frameCount3 - 40) / 20))) + "px Rubik Dirt"; if(level === 1) { ctx.fillText((Math.round(((level1Time) / 60) * 100) / 100) + " Seconds", 300, 300); } else if(level === 2) { ctx.fillText((Math.round(((level2Time) / 60) * 100) / 100) + " Seconds", 300, 300); } else if(level === 3) { ctx.fillText((Math.round(((level3Time) / 60) * 100) / 100) + " Seconds", 300, 300); } else if(level === 4) { ctx.fillText((Math.round(((level4Time) / 60) * 100) / 100) + " Seconds", 300, 300); } else if(level === 5) { ctx.fillText((Math.round(((level5Time) / 60) * 100) / 100) + " Seconds", 300, 300); } } } } function levelSelect() { var in1 = 0 var in2 = 0 var in3 = 0 var in4 = 0 var in5 = 0 //Bruh sounds like a song intro if(mouseY > 192 && mouseX > 0 && mouseX < 120) { in1 = 30; if(clicked) { scene = "level1" level = 1; } } if(mouseY > 192 && mouseX > 120 && mouseX < 240) { in2 = 30; if(clicked) { scene = "level1" level = 2; } } if(mouseY > 192 && mouseX > 240 && mouseX < 360) { in3 = 30; if(clicked) { scene = "level1" level = 3; } } if(mouseY > 192 && mouseX > 360 && mouseX < 480) { in4 = 30; if(clicked) { scene = "level1" level = 4; } } if(mouseY > 192 && mouseX > 480 && mouseX < 600) { in5 = 30; if(clicked) { scene = "level1" level = 5; } } ctx.fillRect(0, 0, 600, 600); var data = ctx.getImageData(0, 0, 600 / resolution, 600 / resolution); for(var y = 0; y < 600 / resolution; y++) { for(var x = 0; x < 600 / resolution; x++) { var index = (x) * 4 + (y) * (600 / resolution) * 4; var col = 0; var wh = new Vector(x * resolution + Math.floor((camera.x - 300) / resolution) * resolution, y * resolution + Math.floor((camera.y - 300) / resolution) * resolution); col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = (139 - col) / 2 data.data[index + 1] = (69 - col) / 2 data.data[index + 2] = (19 - col) / 2 data.data[index + 3] = 255 } } ctx.putImageData(data, 0, 0); ctx2.drawImage(c, 0, 0, 600, 600); for(var y = 300 / resolution; y < 600 / resolution; y++) { for(var x = 0; x < 600 / resolution; x++) { var index = (x) * 4 + (y) * (600 / resolution) * 4; var col = 0; var wh = new Vector(x * resolution + Math.floor((camera.x - 300) / resolution) * resolution, y * resolution + Math.floor((camera.y - 0) / resolution) * resolution); if(x < 120 / resolution) { col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = 139 - col + in1 data.data[index + 1] = 69 - col + in1 data.data[index + 2] = 19 - col + in1 data.data[index + 3] = 255 } else if(x < 240 / resolution) { var x1 = (x - 300 / resolution) * resolution; var y1 = (y - 300 / resolution) * resolution; var di = Math.max(Math.sqrt(x1 * x1 + y1 * y1) * 1.2 - 30, 0) / 5; col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = (139 - col / 2) - di + in2 data.data[index + 1] = (69 - col / 2) - di + in2 data.data[index + 2] = (19 - col / 2) - di + in2 } else if(x < 360 / resolution) { var x1 = (x - 300 / resolution) * resolution; var y1 = (y - 300 / resolution) * resolution; var di = Math.max(Math.sqrt(x1 * x1 + y1 * y1) * 1.2 - 30, 0) / 5; col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = (79 - col / 2) - di + in3 data.data[index + 1] = (79 - col / 2) - di + in3 data.data[index + 2] = (79 - col / 2) - di + in3 } else if(x < 480 / resolution) { var x1 = (x - 300 / resolution) * resolution; var y1 = (y - 300 / resolution) * resolution; var di = Math.max(Math.sqrt(x1 * x1 + y1 * y1) * 1.2 - 30, 0) / 5; col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = (49 - col / 4) - di + in4 data.data[index + 1] = (49 - col / 4) - di + in4 data.data[index + 2] = (49 - col / 4) - di + in4 } else if(x < 600 / resolution) { var x1 = (x - 300 / resolution) * resolution; var y1 = (y - 300 / resolution) * resolution; var di = Math.max(Math.sqrt(x1 * x1 + y1 * y1) * 1.2 - 10, 0) / 5; col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 if(col < 12) { data.data[index + 0] = (159 - col / 2) - di + in5 data.data[index + 1] = (69 - col / 2) - di + in5 data.data[index + 2] = (69 - col / 2) - di + in5 } else { data.data[index + 0] = (255 - col * 2) - di + in5 data.data[index + 1] = (69 - col * 2) - di + in5 data.data[index + 2] = (69 - col * 2) - di + in5 } } } } ctx.putImageData(data, 0, 0); ctx2.drawImage(c, 0, 0, 600, 600); // ctx.fillStyle="rgb(255, 255, 255)" // ctx.fillRect(0,0,600,600); // ctx.fillStyle="rgb(26,26,23)" // ctx.fillRect(280,280,40,40); ctx.fillRect(0, 0, 600, 600); ctx.save(); ctx.drawImage(b, 0, 0, 600 * resolution, 600 * resolution); // ctx.fillStyle="rgb(255, 255, 255)" // ctx.fillRect(0,0,600,600); // ctx.fillStyle="rgb(26,26,23)" // ctx.fillRect(280,280,40,40); ctx.fillRect(0, 0, 600, 600); ctx.drawImage(b, 0, 0, 600 * resolution, 600 * resolution); ctx.fillStyle = "rgb(120,80,20)"; ctx.font = "70px Rubik Dirt"; ctx.fillText("Level Select", 300, 100); for(var i = 0; i < 5; i++) { ctx.fillStyle = "rgb(0,0,0)" ctx.fillRect(i * 120 - 3, 295, 6, 320) ctx.fillStyle = "rgb(125, 125, 125)" ctx.font = "460px Rubik Mono One"; ctx.fillText(".", 60 + 120 * i, 303); ctx.fillStyle = "rgb(102, 102, 102)" ctx.font = "400px Rubik Dirt"; ctx.fillText(".", 60 + 120 * i, 294); ctx.fillStyle = "rgb(0,0,0)" ctx.font = "40px Rubik Dirt"; ctx.fillText(i + 1, 60 + 120 * i, 264); } ctx.textAlign = "left" if(mouseX<360&&mouseY<30){ ctx.fillStyle="rgb(247, 183, 247)" if(clicked&&cameraView==="normal"&&clickToggle===1){ cameraView="firstPerson"; clickToggle=0; } if(clicked&&cameraView==="firstPerson"&&clickToggle===1){ cameraView="normal"; clickToggle=0; } }else{ ctx.fillStyle="rgb(207, 143, 207)" } ctx.font = "20px Single Day"; if(cameraView==="normal"){ ctx.fillText("Enable Challenge Mode (First Person Camera)", 10, 20); }else{ ctx.fillText("Disable Challenge Mode (First Person Camera)", 10, 20); } ctx.textAlign = "center" } var leaderboard = [ { name: "Mojo1000", time: "2\' ,28.07\"" }, { name: "Bearkirb", time: "4\' 32.76\"" } ]; function scores() { ctx.fillRect(0, 0, 600, 600); var data = ctx.getImageData(0, 0, 600 / resolution, 600 / resolution); for(var y = 0; y < 600 / resolution; y++) { for(var x = 0; x < 600 / resolution; x++) { var index = (x) * 4 + (y) * (600 / resolution) * 4; var col = 0; var wh = new Vector(x * resolution + Math.floor((camera.x - 300) / resolution) * resolution, y * resolution + Math.floor((camera.y - 300) / resolution) * resolution); col = fbm(wh.x, wh.y) / 2 - 20; //139,69,19 data.data[index + 0] = (139 - col) / 2 data.data[index + 1] = (69 - col) / 2 data.data[index + 2] = (19 - col) / 2 data.data[index + 3] = 255 } } ctx.putImageData(data, 0, 0); ctx2.drawImage(c, 0, 0, 600, 600); // ctx.fillStyle="rgb(255, 255, 255)" // ctx.fillRect(0,0,600,600); // ctx.fillStyle="rgb(26,26,23)" // ctx.fillRect(280,280,40,40); ctx.fillRect(0, 0, 600, 600); ctx.drawImage(b, 0, 0, 600 * resolution, 600 * resolution); ctx.fillStyle = "rgb(201, 136, 201)" ctx.font = "28px Single Day"; for(var i = 0; i < leaderboard.length; i++) { ctx.textAlign = "center" ctx.fillText((leaderboard[i].name) + ": " + (leaderboard[i].time), 300, 50 + i * 40); ctx.textAlign = "left" ctx.fillText("#" + (i + 1), 50, 50 + i * 40); ctx.textAlign = "center" } } var frameCount2 = 0; var level1Time = 0; var level2Time = 0; var level3Time = 0; var level4Time = 0; var level5Time = 0; var scene = "menu"; var totalSceneSwitch = "menu" var transitionToggle = 0; var sceneSwitchToggle = 1; var transitionRunning = 0; function draw() { var pretime = performance.now(); if(totalSceneSwitch === "menu") { menu(); } else if(totalSceneSwitch === "level1") { runLevel1(); if(cameraView === "firstPerson") { ctx.save(); ctx.translate(300, 300); ctx.rotate((-player[0].bikeAngle) + 3.1415 / 2); ctx.scale(1.41, 1.41); ctx.translate(-300, -300) ctx.drawImage(c, 0, 0, 600, 600); ctx.restore(); } } else if(totalSceneSwitch === "levelEnd") { levelEnd(); } else if(totalSceneSwitch === "levels") { levelSelect(); } else if(totalSceneSwitch === "leaderboard") { scores(); } if(mouseX > 545 && mouseY < 25) { if(clicked) { scene = "menu"; } ctx.fillStyle = "rgb(231, 166, 231)" } else { ctx.fillStyle = "rgb(201, 136, 201)" } ctx.textAlign = "right" ctx.font = "20px Single Day"; ctx.fillText("Home", 590, 20); ctx.textAlign = "center" if(totalSceneSwitch !== scene) { if(sceneSwitchToggle === 1) { transitionToggle = 1; sceneSwitchToggle = 0; transitionRunning = 1; } } if(transitionRunning === 1) { transition(); } fps = Math.round(1000 / (performance.now() - pretime)) window.requestAnimationFrame(draw); } draw(); //<script> </script> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMvtrtOWCAw
Votes	168
Spin-Offs	58
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Bearkirb314🐻❄️
Author Name	BearKirb314
Author ID	kaid_375460112550893828689953
Author Profile Access	PUBLIC

Archive Data

Added	1 years ago, 1734464231423
Updated	10 months ago, 1739364510301
Source Deleted	unknown