Viewing Program

Program Data

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

Title	Stormy Ascent [GAME]
ID	5532820141686784
Created	5 months ago, 1722088348391
Updated	5 months ago, 1722292524606
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Stormy Ascent [GAME]</title> <style> #gl-canvas { display: none; overflow:hidden; } #tex { display: none; overflow:hidden; } #atlas { display: none; overflow:hidden; } #b { display: none; overflow:hidden; } img{ display: none; } canvas{ width:600px; } { overflow:hidden; margin:0px; } </style> </head> <body> <canvas id = 'canvas' width = '1200' height = '1200'></canvas> <canvas id = 'gl-canvas' width = '1200' height = '1200'></canvas> <canvas id = 'tex' width = '600' height = '600'></canvas> <canvas id = 'atlas' width = '1200' height = '1200'></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=Baskervville+SC&family=Nanum+Myeongjo&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Runic&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400..900&family=Noto+Sans+Runic&display=swap" rel="stylesheet"> <script src = "https://cdn.jsdelivr.net/gh/Bearkirb/gameMidis/index.js" id="asdf"></script> <script id = 'vertex-shader' type = 'glsl'>#version 300 es in vec2 aPosition; out vec2 pos; void main() { pos = aPosition; gl_Position = vec4(aPosition, 0, 1); } </script> <script id = 'fragment-shader' type = 'glsl'>#version 300 es precision mediump sampler2D; uniform sampler2D iChannel0; precision mediump float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float clicked; uniform float iTime; out vec4 fragColor; vec2 Rotate(vec2 uv,float ang){ return vec2(uv.xcos(ang)-uv.ysin(ang),uv.xsin(ang)+uv.ycos(ang)); } vec2 crt(vec2 coord, float bend){ // put in symmetrical coords coord = (coord - 0.5) 2.0; coord = 1.1; // deform coords coord=Rotate(coord,bendpow(length(coord),2.0)); // transform back to 0.0 - 1.0 space coord = (coord / 2.2) + 0.5; return coord; } vec4 textur(vec2 uv){ vec2 ruv=uv; return texture(iChannel0,ruv); } float random (in vec2 _st) { return fract(sin(dot(_st.xy, vec2(12.9898,78.233)))* 43758.5453123); } vec4 photoshop_desaturate(vec3 color, float factor) { vec3 lum = vec3(0.299, 0.587, 0.114); vec3 gray = vec3(dot(lum, color)); return vec4(mix(color, gray, factor), 1.0); } void main() { vec2 fragCoord = gl_FragCoord.xy; vec2 iMouse = vec2(drawx,drawy); vec2 iResolution = vec2(1200.0,1200.0); vec2 res = iResolution.xy; vec2 uv=(fragCoord/res); uv.y=1.0-uv.y; fragColor.rgb = textur(uv).rgb; vec3 magxz = (textur(uv-vec2(0.0001,0.0)).xyz-textur(uv+vec2(0.0001,0.0)).xyz); vec3 magyz = (textur(uv-vec2(0.0,0.0001)).xyz-textur(uv+vec2(0.0,0.0001)).xyz); float magx = magxz.x+magxz.y+magxz.z; float magy = magyz.x+magyz.y+magyz.z; vec3 norm = vec3(-magx,-magy,0.03); float norms=-dot(normalize(norm),normalize(vec3((uv.x-0.5)0.5,(uv.y-0.5)0.5,-0.3))); fragColor=(norms/0.58+0.026); vec3 sum=vec3(0.0); norms=norms; norms=norms; norms=norms; norms=norms; norms=norms; norms=norms; norms=norms; fragColor.rgb+=normslength(fragColor.rgb)/2.0; float dis=pow(distance(uv8.0,vec2(0.58.0,0.58.0)),2.0)/20.0; fragColor/=dis+0.8; fragColor.a=1.0; fragColor.rgb=mix(fragColor.rgb,((fragColor.rgb+1.0)/2.0)vec3(0.05,0.06,0.3),pow(distance(uv8.0,vec2(0.58.0,0.58.0)),2.0)/200.0+0.3); vec3 som=vec3(0.0); float accum=0.0; for(float x=0.0;x<=3.141525.0;x+=1.0){ vec3 he = textur(uv-vec2(sin(xrandom(vec2(x)5.0))(x/3000.0)-drawx(x/500.0)clicked,cos(xrandom(vec2(x/2.0)10.0))(x/3000.0)-drawy(x/500.0)clicked)).rgb; accum++; som+=he; if(length(he)>=0.9){ fragColor.rgb+=he/(60.0)+0.001; } } fragColor.rgb+=(som/accum)clicked; fragColor.rgb+=vec3((random(uv2.0+sin(iTime))-0.5)/15.0); fragColor.rgb=1.3; } </script> <script type = 'module'> //SETUP CODE{ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d',{preserveDrawingBuffer:true}); var mouseX=0,pmouseX=0,mouseY=0,pmouseY=0,clicked=false,key={}; var keys = []; var clickToggle=false; var canClick=true; var start=false; window.addEventListener('mousedown', event => { clicked = true; if(canClick){ clickToggle=true; canClick=false; } }); window.addEventListener('mouseup', event => { clicked = false; canClick=true; }); 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; }); window.addEventListener("keydown", function(e) { if(["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(e.code) > -1) { e.preventDefault(); } }, false); window.addEventListener("keydown", (event) => { keys[event.key] = true; }); window.addEventListener("keyup", (event) => { delete keys[event.key]; }); function createShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(shader)); } return shader; } function createProgram(gl, vs, fs) { const program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); return program; } const glCanvas = document.getElementById('gl-canvas'), gl = glCanvas.getContext('webgl2'); const vertexSource = document.getElementById('vertex-shader').textContent, fragmentSource = document.getElementById('fragment-shader').textContent; const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource), fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource); const program = createProgram(gl, vertexShader, fragmentShader); const aPosition = gl.getAttribLocation(program, 'aPosition') const drawx = gl.getUniformLocation(program, "drawx"); const drawy = gl.getUniformLocation(program, "drawy"); const iTime = gl.getUniformLocation(program, "iTime"); const cli = gl.getUniformLocation(program, "clicked"); const iChannel0 = gl.getUniformLocation(program,"iChannel0"); let texture0 = gl.createTexture(); const positions = new Float32Array([-1, -1, -1, 3, 3, -1]); var mousex=300; var mousey=300; var now; var then = performance.now(); var fps = 50; var delta; var frameCount=0; var interval = 1000 / fps; for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } const posBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer); gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); gl.viewport(0, 0, 1200, 1200); gl.clearColor(0, 0, 0, 1); gl.useProgram(program); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture0); gl.uniform1i(iChannel0, 0); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); //} //HELPER/MATH FUNCTIONS{ function clamp(x,a,b){ return Math.max(Math.min(x,b),a); } var rectRect = function(x1,y1,w1,h1,x2,y2,w2,h2){ return(x1 + w1 > x2 && y1 + h1 > y2 && x1 < x2 + w2 && y1 < y2 + h2); }; 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 random() { return Math.random() - 0.5 } function random2() { var ou=Math.random() - 0.5 ou=2.0; return (ouou)Math.sign(ou); } function sig(x){ var e1=-1Math.sqrt(1-Math.pow(xsqrt3,2))+1 var e2=Math.sqrt(1-Math.pow(xsqrt3-sqrt3,2)) return(x>=0?(x<0.5?e1:(x<=1?e2:1)):0); } function slerp(a, b, t) { return a+(b-a)sig(t); } function lerp(a,b,t){ return a+(b-a)t; } //} //GAME CLASSES{ var songs=[songSidePath,songDungeonTheme,songStoreRoom,songCredits,sideBossTheme, songDanse]; var songNum=5; function map(a, b, c, d, e) { return d + (e - d) * (a - b) / (c - b); } var note = (function() { var context = new (window.webkitAudioContext \|\| window.AudioContext)(); function round2(a, b) { return Math.round(a * b) / b; } function findFrequency(n) { n-=Math.random()(songs[songNum].variance); var k = 12; var b = Math.floor(n); var v = map(n, b, b + 1, b - Math.floor(b / k) k, (b + 1) - Math.floor((b + 1) / k) * k) + Math.floor(n / k) * 12; return Math.pow(1.0594, v + 3) * 220; } return function(pitch, power, duration) { power/=18.0; var pi=findFrequency(pitch); if(songs[songNum].smooth){ power=2.0; pi=1.0; power=(pi+800); if(pi<100){ power+=0.15; } }else{ // power=(pi+800); if(pi<100){ power+=0.15; } } power/=1.0; duration+=songs[songNum].echo[0]; var osc = context.createOscillator(); var node = context.createGain(); osc.frequency.value = pi; power = map(osc.frequency.value, 262, 698, power, power * 0.5); node.gain.value = 0; node.gain.linearRampToValueAtTime(power, context.currentTime + 0.001); node.gain.linearRampToValueAtTime(0, context.currentTime + durationsongs[songNum].echo[1] + 0.05); osc.connect(node).connect(context.destination); //osc.setPeriodicWave(context.createPeriodicWave(r, i)); if(!songs[songNum].smooth){ if(pi<100){ osc.type = "triangle"; }else{ osc.type = "square"; } }else{ osc.type = "triangle"; } osc.start(0); osc.stop(context.currentTime + durationsongs[songNum].echo[1] + 0.10); return [osc, node]; }; })(); var playing=false; document.onmousedown = function(e) { playing = true; } function mrCol(x, y, w, h) { return mouseX >= x && mouseY >= y && mouseX <= x + w && mouseY <= y + h; } function mod(a,n) { if(a>0){ return a%n }else{ return ((a % n) + n) % n; } }; var frameCount = 0; for(var i = 0; i < songs[songNum].notes.length; i += 1) { if(songs[songNum].notes[i][0] >= time) { songs[songNum].notes[i][4] = 0; } } var time=0; var Noise=function(){function d(a){a.audioSource&&(clearTimeout(c),a.audioSource.stop())}if(true){var b=new (window.AudioContext\|\|window.webkitAudioContext),c;return{play:function(a){d(a);a.audioSource=b.createBufferSource();a.gainNode=b.createGain();a.audioSource.connect(a.gainNode);a.gainNode.connect(b.destination);a.canFade=!0;for(var c=2b.sampleRate,f=b.createBuffer(1,c,b.sampleRate),g=f.getChannelData(0),e=1;e<c;e++)g[e]=clamp(g[e-1]+0.25Math.random()-0.125,-1.0,1.0);a.audioSource.buffer=f;a.volume=0<=a.volume?a.volume:.5;a.fadeIn=a.fadeIn?0<=a.fadeIn?a.fadeIn:.5:.5;a.gainNode.gain.setValueAtTime(0,b.currentTime);a.gainNode.gain.linearRampToValueAtTime(a.volume/4,b.currentTime+a.fadeIn/2);a.gainNode.gain.linearRampToValueAtTime(a.volume,b.currentTime+a.fadeIn);a.audioSource.loop=!0;a.audioSource.start()},stop:d,fade:function(a){a.fadeOut=a.fadeOut?0<=a.fadeOut?a.fadeOut:.5:.5;a.canFade?(a.gainNode.gain.linearRampToValueAtTime(0,b.currentTime+a.fadeOut),a.canFade=!1,c=setTimeout(function(){d(a)},1E3a.fadeOut)):d(a)}}}}(); var noise = { volume : .2, // 0.5 is default, may be omitted fadeIn : 0.1, // 0 is default, may be omitted fadeOut : 0.2, // 0 is default, may be omitted }; var glyphs="ᚨᛚᛚᚨᛁᛗᚨᚾᚾᚨᚠᚱᛖᛁᚺᚨᛚᛋᛃᚨᚺᛋᚨᛗᚨᛚᛖᛁᚲᛟᛁᚾᚹᚨᛁᚱᚦᛁᛞᚨᛁ"; var particles = []; class Particle { constructor(x, y, xv, yv, s, type, r, g, b, a, life) { this.x = x; this.y = y; this.px=x; this.py=y; this.sx=x; this.sy=y; this.xv = xv; this.yv = yv; this.bias=(Math.random()-0.5)/6; this.size = s; this.tsize=s; this.type=type; this.opacity=1; this.rand=Math.random(); this.life = life ((Math.random() + 1) / 2) this.tex=false; if(Math.random()>0.9&&type === "gas"){ this.tex=true; } this.ogLife=this.life; this.airResistance = 0.98; if(type === "gas") { this.gravity = -0.1; this.airResistance = 0.9; } else { this.gravity = 0.5 } this.color = [r, g, b, a] this.color[0]+=random()30; this.color[1]+=random()30; this.color[2]+=random()30; } update() { this.size=this.tsizeMath.min(this.life/this.ogLife2,1.0); this.x += this.xv; this.y += this.yv; this.sx += Math.abs(this.xv); this.sy += Math.abs(this.yv); this.yv += this.gravity; this.xv = this.airResistance; this.yv = this.airResistance; this.opacity=(this.color[3]) if(this.type==="gas"){ this.xv=0.99; this.xv+=Math.sin(frameCount/10.0+this.rand10.0)/12.0; this.xv+=0.1-+this.bias; } this.xv-=0.2+this.bias; this.life--; } draw() { ctx.fillStyle = "rgb(" + (this.color[0]-(200-200Math.min(this.life/this.ogLife2,1.0))) + "," + (this.color[1]-(200-200Math.min(this.life/this.ogLife2,1.0))) + "," + (this.color[2]-(200-200Math.min(this.life/this.ogLife2,1.0))) + "," + (this.color[3]) + ")" ctx.strokeStyle = "rgb(" + (this.color[0]-(200-200Math.min(this.life/this.ogLife2,1.0))) + "," + (this.color[1]-(200-200Math.min(this.life/this.ogLife2,1.0))) + "," + (this.color[2]-(200-200Math.min(this.life/this.ogLife2,1.0))) + "," + (this.color[3]) + ")" if(this.type=="gas"){ ctx.fillRect(this.x,this.y,this.size,this.size); }else{ ctx.lineWidth=2.5; ctx.beginPath(); ctx.moveTo(this.x,this.y); ctx.lineTo(this.px,this.py); ctx.stroke(); } this.px=this.x; this.py=this.y } } class Vector { constructor(x, y, z=0) { this.x = x; this.y = y; this.z=z; } subtract(v) { var ve = new Vector(this.x, this.y, this.z); ve.x -= v.x; ve.y -= v.y; ve.z -= v.z; return ve; } add(v) { var ve = new Vector(this.x, this.y, this.z); ve.x += v.x; ve.y += v.y; ve.z += v.z; return ve; } divide(n) { var ve = new Vector(this.x, this.y, this.z); ve.x /= n; ve.y /= n; ve.z /= n; return ve; } magnitude() { return Math.sqrt(this.x this.x + this.y * this.y + this.z * this.z); } dot(v) { return this.x * v.x + this.y * v.y + this.z * v.z; } scale(n) { var ve = new Vector(this.x, this.y, this.z); ve.x = n; ve.y = n; ve.z = n; return ve; } normalize() { var ve = new Vector(this.x, this.y, this.z); 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; } } class fancyBox{ constructor(x,y,w,h,o,t){ this.x=x; this.y=y; this.w=w; this.h=h; this.o=o; this.t=t if(t===0){ this.f=1.0; }else if(t===1){ this.f=0.6; } } draw(){ ctx.strokeStyle="rgb(138, 125, 30)" ctx.fillStyle="rgb(0,0,0,"+this.o+")" ctx.lineWidth=4; ctx.fillRect(this.x,this.y,this.w,this.h); ctx.strokeRect(this.x,this.y,this.w,this.h); ctx.lineWidth=2; ctx.strokeRect(this.x-4,this.y-4,this.w+8,this.h+8); ctx.fillStyle="rgb(138, 125, 30)" if(this.t===0){ ctx.beginPath(); ctx.moveTo(this.x,this.y); ctx.ellipse(this.x+2,this.y+2,this.w/10,this.h/10,0,0,Math.PI/2); ctx.fill(); ctx.beginPath(); ctx.moveTo(this.x+this.w,this.y); ctx.ellipse(this.x-2+this.w,this.y+2,this.w/10,this.h/10,0,Math.PI/2,Math.PI/2+Math.PI/2); ctx.fill(); ctx.moveTo(this.x+this.w,this.y+this.h); ctx.ellipse(this.x-2+this.w,this.y-2+this.h,this.w/10,this.h/10,0,Math.PI/2+Math.PI/2,Math.PI/2+Math.PI/2+Math.PI/2); ctx.fill(); ctx.fill(); ctx.moveTo(this.x,this.y+this.h); ctx.ellipse(this.x+2,this.y-2+this.h,this.w/10,this.h/10,0,Math.PI/2+Math.PI/2+Math.PI/2,Math.PI/2+Math.PI/2+Math.PI/2+Math.PI/2); ctx.fill(); } ctx.beginPath(); ctx.moveTo(this.x+5this.f,this.y-7this.f); ctx.quadraticCurveTo(this.x-10this.f,this.y-5this.f,this.x-10this.f,this.y-10this.f); ctx.quadraticCurveTo(this.x-5this.f,this.y-10this.f,this.x-7this.f,this.y+5this.f); ctx.stroke(); ctx.beginPath(); ctx.moveTo(this.x-5this.f+this.w,this.y-7this.f); ctx.quadraticCurveTo(this.x+10this.f+this.w,this.y-5this.f,this.x+10this.f+this.w,this.y-10this.f); ctx.quadraticCurveTo(this.x+5this.f+this.w,this.y-10this.f,this.x+7this.f+this.w,this.y+5this.f); ctx.stroke(); ctx.beginPath(); ctx.moveTo(this.x-5this.f+this.w,this.y+7this.f+this.h); ctx.quadraticCurveTo(this.x+10this.f+this.w,this.y+5this.f+this.h,this.x+10this.f+this.w,this.y+10this.f+this.h); ctx.quadraticCurveTo(this.x+5this.f+this.w,this.y+10this.f+this.h,this.x+7this.f+this.w,this.y-5this.f+this.h); ctx.stroke(); ctx.beginPath(); ctx.moveTo(this.x+5this.f,this.y+7this.f+this.h); ctx.quadraticCurveTo(this.x-10this.f,this.y+5this.f+this.h,this.x-10this.f,this.y+10this.f+this.h); ctx.quadraticCurveTo(this.x-5this.f,this.y+10this.f+this.h,this.x-7this.f,this.y-5this.f+this.h); ctx.stroke(); } } class bodyPart{ constructor(x,y,cx,cy,r){ this.x=x; this.y=y; this.centerx=cx; this.centery=cy; this.r=r; this.truer=r; this.nodex=0; this.nodey=0; this.stiffness=0.3; this.damping=0.1; this.movementSpeed=0.0 } drawDefaultPlayerHead(){ ctx.fillStyle="rgb(160,160,160)" ctx.lineWidth=2.0; ctx.strokeStyle="rgb(100,100,100)" this.movementSpeed=lerp(this.movementSpeed,(this.r-this.truer)this.stiffness,this.damping); this.truer+=this.movementSpeed/2.0; this.centerx=-this.x-7; this.centery=-this.y-14; this.truer+=((mouseY-300)/600)/10; if(!(this.animation=="slide")){ this.truer+=player.xv/200player.facing; } ctx.save(); ctx.translate(-this.centerx,-this.centery); ctx.rotate(this.truer); ctx.translate(this.centerx,this.centery); ctx.beginPath(); ctx.ellipse(this.x+7,this.y+7,7,7,0,Math.PI,Math.PI2); ctx.lineTo(this.x+12,this.y+8) ctx.lineTo(this.x+12,this.y+11); ctx.lineTo(this.x+14,this.y+12); ctx.lineTo(this.x+13,this.y+16); ctx.lineTo(this.x+12,this.y+17); ctx.lineTo(this.x+6,this.y+17); ctx.lineTo(this.x+7,this.y+10); ctx.lineTo(this.x+4,this.y+12); // ctx.lineTo(this.x,this.y+13) ctx.stroke(); ctx.fill(); ctx.restore(); } drawDefaultPlayerTorso(){ ctx.fillStyle="rgb(160,160,160)" ctx.lineWidth=2.0; ctx.strokeStyle="rgb(160,160,160)" this.movementSpeed=lerp(this.movementSpeed,(this.r-this.truer)this.stiffness,this.damping); this.truer+=this.movementSpeed/2.0; this.truer+=player.xv/200player.facing; ctx.save(); ctx.translate(-this.centerx,-this.centery); ctx.rotate(this.truer); ctx.translate(this.centerx,this.centery); ctx.beginPath(); ctx.moveTo(this.x+10,this.y-2); ctx.lineTo(this.x+7,this.y+3); ctx.lineTo(this.x+7,this.y+10); ctx.lineTo(this.x+10,this.y+20); ctx.lineTo(this.x+9,this.y+30); ctx.stroke(); for(var i=2;i<10;i+=1.5){ ctx.beginPath(); ctx.moveTo(this.x+5+i/2,this.y+i2); ctx.quadraticCurveTo(this.x+14+i/2,this.y+i2+5,this.x+17+i/2-((i-4)(i-4))/6,this.y+i2); ctx.stroke(); } // ctx.fill(); this.nodex=this.centerx+Math.sin(-this.truer)16; this.nodey=this.centery+Math.cos(-this.truer)16-19; ctx.restore(); } drawdefaultPlayerLimb(l){ ctx.fillStyle="rgb(160,160,160)" ctx.lineWidth=2.0; ctx.strokeStyle="rgb(100,100,100)" this.movementSpeed=lerp(this.movementSpeed,(this.r-this.truer)this.stiffness,this.damping); this.truer+=this.movementSpeed/2.0; this.truer=1.0+(player.yv/400)player.facing ctx.save(); this.centerx=this.x+3; this.centery=this.y; ctx.translate(this.centerx,this.centery); ctx.rotate(this.truer); ctx.translate(-this.centerx,-this.centery); ctx.strokeRect(this.x+2,this.y+2,2,l-4); ctx.beginPath(); ctx.ellipse(this.x+2,this.y+2,1.5,1.5,0,0,Math.PI2) ctx.ellipse(this.x+4,this.y+2,1.5,1.5,0,0,Math.PI2) ctx.ellipse(this.x+2,this.y-2+l,1.5,1.5,0,0,Math.PI2); ctx.ellipse(this.x+4,this.y-2+l,1.5,1.5,0,0,Math.PI2); ctx.stroke(); ctx.fill(); ctx.fillRect(this.x+2,this.y+2,2,l-4); this.nodex=this.centerx+Math.sin(-this.truer)l; this.nodey=this.centery+Math.cos(-this.truer)l; ctx.restore(); } } class Player{ constructor(x,y){ this.x = x; this.y = y; this.w = 40; this.h = 70; this.facing=1; this.facingl=1; this.px = 0; this.py = 0; this.hitTimer=15; this.xv = 0; this.yv = 0; this.screenX=0; this.groudHitTrigger=false; this.grav = 0.32; this.animation="idle"; this.canJump = false; this.jumpPower = 7.9; this.squatTrigger=false; this.lerpToIdle=0; this.offset=0; this.toffset=0; this.groundHitTimer=0; this.animations=[[0.2,0.15,0.2,-1.0,-1.5,0,0,-1.5,-0.2,-1.2,-1.3,0,0,-1.5],[0.2,0.1,0.5,0.3,-1.5,0.7,1.4,-1.2,-0.5,-1.2,-1.9,-1.3,-0.7,-1.0],[0.2,0.1,-0.5,-1.6,-2.5,-1.6,-0.2,-1.0,-0.5,1.2,-1.9,0.7,1.3,-1.0],[0.0,0.2,0.2,0.4,1.0,-0.9,0.7,-1.2,-0.2,-0.4,-1.1,-0.9,0.1,-1.1],[0.5,-0.1,1.3,2.6,-2.0,-1.2,-0.6,-1.8,-1.4,-2.7,-2.9,0.1,0.9,-0.7],[-0.2,-1.4,-0.1,-1.2,-1.6,-1.1,-0.9,-1.8,-1.4,-2.7,-2.9,-2.0,-0.3,-1.7]]; this.walkCycle=-1; this.frameCount=0; this.pl=true; this.fadeSound=false; this.aminationLerp=0; //this.playerRShoulder=new bodyPart(8,-26,-12,24,-1); this.playerHead=new bodyPart(-7,-40,0,22,-0.2); this.playerTorso=new bodyPart(-10,-26,0,8,-1.4); this.playerLShoulder=new bodyPart(-3,-26,0,24,-0.1); this.playerLArm=new bodyPart(-3,-26,0,24,-1.2); this.playerLHand=new bodyPart(-3,-26,0,24,-1.6); this.playerLThigh=new bodyPart(-3,-26,0,24,-1.1); this.playerLLeg=new bodyPart(-3,-26,0,24,-0.9); this.playerLFoot=new bodyPart(-3,-26,0,24,-1.8); this.playerRShoulder=new bodyPart(-3,-26,0,24,-1.4); this.playerRArm=new bodyPart(-3,-26,0,24,-2.7); this.playerRHand=new bodyPart(-3,-26,0,24,-2.9); this.playerRThigh=new bodyPart(-3,-26,0,24,-2.0); this.playerRLeg=new bodyPart(-3,-26,0,24,-0.3); this.playerRFoot=new bodyPart(-3,-26,0,24,-1.7); } goToAnimation(b){ var ls=0.8; this.playerHead.r=this.animations[b][0]; this.playerTorso.r=this.animations[b][1]; this.playerLShoulder.r=this.animations[b][2]; this.playerLArm.r=this.animations[b][3]; this.playerLHand.r=this.animations[b][4]; this.playerLThigh.r=this.animations[b][5]; this.playerLLeg.r=this.animations[b][6]; this.playerLFoot.r=this.animations[b][7]; this.playerRShoulder.r=this.animations[b][8]; this.playerRArm.r=this.animations[b][9]; this.playerRHand.r=this.animations[b][10]; this.playerRThigh.r=this.animations[b][11]; this.playerRLeg.r=this.animations[b][12]; this.playerRFoot.r=this.animations[b][13]; } lerpToStill(){ this.playerHead.r=0.9; this.playerTorso.r=0.9; this.playerLShoulder.r=0.9; this.playerLArm.r=0.9; this.playerLHand.r=0.9; this.playerLThigh.r=0.9; this.playerLLeg.r=0.9; //this.playerLFoot.r=0.9; this.playerRShoulder.r=0.9; this.playerRArm.r=0.9; this.playerRHand.r=0.9; this.playerRThigh.r=0.9; this.playerRLeg.r=0.9; //this.playerRFoot.r=0.9; } draw() { this.frameCount++ this.screenX=camera.x-player.x; this.toffset=lerp(this.toffset,this.offset,0.1); if(this.animation=="walk"){ if(this.frameCount%8==0){ this.walkCycle++; } if(this.walkCycle>4){ this.walkCycle=1; } if(this.walkCycle<1){ this.walkCycle=4; } } this.animationLerp=(this.frameCount%8)/10; this.facingl-=(this.facingl-this.facing)/4; ctx.fillStyle="rgb(0,205,0)" // ctx.fillRect(this.x,this.y+70,this.w,-this.h); if(this.xv>1.5){ this.facing=1 } if(this.xv<-1.5){ this.facing=-1 } ctx.save(); if(this.facing==-1){ ctx.scale(-1,1); ctx.translate(-(this.x+this.w/2)2,0); } ctx.translate(this.x+this.w/2,this.y+this.h/2); // this.playerRArm.drawdefaultPlayerLimb(); this.offset=0; if(this.animation=="walk"\|\|this.animation=="dash"){ if(this.walkCycle==1){ this.goToAnimation(1); } if(this.walkCycle==2){ this.goToAnimation(0); } if(this.walkCycle==3){ this.goToAnimation(2); } if(this.walkCycle==4){ this.goToAnimation(0); } }else if(this.animation=="jump"){ this.goToAnimation(3); }else if(this.animation=="fall"){ this.goToAnimation(4); }else if(this.animation=="slide"){ this.offset=30; this.goToAnimation(5); }else{ this.lerpToStill(); } if(this.animation=="slide"){ this.damping=0.2; }else{ this.damping=0.1; } ctx.save(); ctx.translate(0,this.toffset); this.playerRShoulder.x=-this.playerTorso.nodex-3; this.playerRShoulder.y=-this.playerTorso.nodey-20; this.playerRShoulder.drawdefaultPlayerLimb(15); this.playerRArm.x=this.playerRShoulder.nodex-3; this.playerRArm.y=this.playerRShoulder.nodey; this.playerRArm.drawdefaultPlayerLimb(15); this.playerRHand.x=this.playerRArm.nodex-3; this.playerRHand.y=this.playerRArm.nodey; this.playerRHand.drawdefaultPlayerLimb(6); this.playerRThigh.x=this.playerTorso.nodex-3; this.playerRThigh.y=this.playerTorso.nodey; this.playerRThigh.drawdefaultPlayerLimb(12); this.playerRLeg.x=this.playerRThigh.nodex-3; this.playerRLeg.y=this.playerRThigh.nodey; this.playerRLeg.drawdefaultPlayerLimb(18); this.playerRFoot.x=this.playerRLeg.nodex-3; this.playerRFoot.y=this.playerRLeg.nodey; this.playerRFoot.drawdefaultPlayerLimb(8); this.playerHead.x=-this.playerTorso.nodex-7; this.playerHead.y=-this.playerTorso.nodey-36; this.playerHead.drawDefaultPlayerHead(); this.playerTorso.drawDefaultPlayerTorso(); this.playerLShoulder.x=-this.playerTorso.nodex-3; this.playerLShoulder.y=-this.playerTorso.nodey-20; this.playerLShoulder.drawdefaultPlayerLimb(15); this.playerLArm.x=this.playerLShoulder.nodex-3; this.playerLArm.y=this.playerLShoulder.nodey; this.playerLArm.drawdefaultPlayerLimb(15); this.playerLHand.x=this.playerLArm.nodex-3; this.playerLHand.y=this.playerLArm.nodey; this.playerLHand.drawdefaultPlayerLimb(6); this.playerLThigh.x=this.playerTorso.nodex-3; this.playerLThigh.y=this.playerTorso.nodey; this.playerLThigh.drawdefaultPlayerLimb(12); this.playerLLeg.x=this.playerLThigh.nodex-3; this.playerLLeg.y=this.playerLThigh.nodey; this.playerLLeg.drawdefaultPlayerLimb(18); this.playerLFoot.x=this.playerLLeg.nodex-3; this.playerLFoot.y=this.playerLLeg.nodey; this.playerLFoot.drawdefaultPlayerLimb(8); ctx.restore(); // this.playerTorso.r=frameCount/17.5; // this.playerLThigh.r=frameCount/7.5; ctx.restore(); }; move(){ var lerpSpeed=8; if(Math.abs(this.xv)<0.2){ this.animation="idle"; } this.hitTimer-=0.5; if(this.xv>0){ this.facing=1; } if(Math.abs(this.xv)>1.5&&this.canJump){ this.animation="walk"; } if(this.xv<0){ this.facing=-1; } if(this.yv<-0.1){ this.animation="jump"; this.groudHitTrigger=false; }else{ if(this.groudHitTrigger==false&&this.canJump){ this.groudHitTrigger=true; this.groundHitTimer=0; camera.shakey+=5; } } if(this.yv>0.4){ this.animation="fall"; } if(Math.abs(this.xv)>5.0&&this.canJump&&this.animation!="slide"){ this.animation="dash"; } this.px = this.x; this.py = this.y; this.y += this.yv; this.yv += this.grav; this.x += this.xv; this.xv/=1.21; this.yv/=1.01; console.log(keys); if((keys.a\|\|keys.ArrowLeft)&&!(keys.d\|\|keys.ArrowRight)&&!won){ this.xv += -0.83; } if((keys.d\|\|keys.ArrowRight)&&!(keys.a\|\|keys.ArrowLeft)&&!won){ this.xv += 0.83; } if(keys[" "]&&this.hitTimer<0&&this.canJump&&!won){ this.xv+=35.0this.facing; this.hitTimer=20; Noise.play(noise); this.fadeSound=true; } if(this.hitTimer<15&&!won){ if(this.fadeSound){ Noise.fade(noise); this.fadeSound=false; } } if(keys[" "]&&this.hitTimer<0&&!this.canJump&&!won){ this.xv+=35.0this.facing; this.yv+=2.5; this.hitTimer=20; Noise.play(noise); this.fadeSound=true; } if((keys.w\|\|keys.ArrowUp) && this.canJump&&!won){ this.yv = -this.jumpPower; this.canJump = false; } if (jump&&!won){ this.jumpPower = 22.5; this.yv = -this.jumpPower; this.jumpPower = 20.5; jump = false; } this.canJump = false; } collide(obj){ if(obj.checkColl(this)){ if(this.py <= obj.y - this.h) { this.y = obj.y - this.h; this.canJump = true; this.yv=0; } else if(this.px >= obj.x + obj.w) { this.x = obj.x+obj.w; this.xv = 0; // this.animation="push"; } else if(this.px <= obj.x- this.w) { this.x = obj.x-this.w; this.xv = 0; // this.animation="push"; } else if(this.py >= obj.y + obj.h){ this.y = this.py; this.yv = -this.yv/12; // this.animation="squish"; } } } } var blocks = []; class Block{ constructor(x, y, type, draw){ this.x = x; this.y = y; this.w = 40; this.h = 40; this.type = type; if(draw==false){ this.draw=draw; }else{ this.draw=true; } } checkColl(obj){ if(obj.pl){ return(rectRect(this.x,this.y,this.w,this.h,obj.x,obj.y,obj.w,obj.h)); }else{ return(rectRect(this.x,this.y,this.w,this.h,obj.x,obj.y,obj.w,obj.h)); } }; display(){ switch(this.type){ case 'block': ctx.fillStyle="rgb(190,20,40)" camera.cameraSave(0.95); ctx.drawImage(t,this.x,this.y,this.w, this.h); ctx.restore(); break; case 'portal': ctx.fillStyle="rgb(255,255,255)" camera.cameraSave(1); ctx.beginPath(); ctx.ellipse(this.x+10,this.y+10,this.w,this.h,0,0,Math.PI2); ctx.fill(); ctx.restore(); break; case 'cloud': camera.cameraSave(1); ctx.fillStyle="rgb(125,255,255)" ctx.beginPath(); ctx.ellipse(this.x+20,this.y+20,this.w/2,this.h/2,0,0,Math.PI2); ctx.fill(); ctx.restore(); break; case 'sigil': camera.cameraSave(1); ctx.fillStyle="rgb(180,145,65)" ctx.beginPath(); ctx.ellipse(this.x+10,this.y+10+Math.sin(frameCount/900)10,this.w/4,this.h/4,0,0,Math.PI2); ctx.fill(); ctx.restore(); break; case 'ledge': ctx.fillStyle="rgb(160,20,40)" ctx.fillStyle="rgb(190,20,40)" camera.cameraSave(lerp(1,0.95,clamp(Math.sin((frameCount3.1412)/200)5,0,1))); ctx.drawImage(t,this.x,this.y,this.w, this.h); ctx.fillStyle="rgb(0,0,0,"+(lerp(0.4,0.0,clamp(Math.sin((frameCount3.1412)/200)5,0,1)))+")" ctx.fillRect(this.x,this.y,this.w, this.h); ctx.restore(); break; case 'spike': ctx.fillStyle="rgb(290,20,40)" ctx.fillRect(this.x,this.y,this.w, this.h); break; } } } //} //CANVAS SETUPS{ var data = ctx.getImageData(0, 0, 600, 600); var b = document.getElementById("b") var ctx3 = b.getContext("2d"); var texAtlas = document.getElementById("atlas") var actx = texAtlas.getContext("2d"); var t = document.getElementById("tex") var ctx2 = t.getContext("2d"); //} ctx2.fillStyle="rgb(120,120,120)" ctx2.fillRect(0,0,600,600); ctx2.fillStyle="rgb(40,50,60)" ctx2.fillRect(0,50+20,280,200); ctx2.fillStyle="rgb(80,90,100)" ctx2.fillRect(0,50-20,280,200); ctx2.fillStyle="rgb(60,70,80)" ctx2.fillRect(0,50,280,200); ctx2.fillStyle="rgb(40,50,60)" ctx2.fillRect(320,50+20,280,200); ctx2.fillStyle="rgb(80,90,100)" ctx2.fillRect(320,50-20,280,200); ctx2.fillStyle="rgb(60,70,80)" ctx2.fillRect(320,50,280,200); ctx2.fillStyle="rgb(40,50,60)" ctx2.fillRect(10,350+20,560,200); ctx2.fillStyle="rgb(80,90,100)" ctx2.fillRect(10,350-20,560,200); ctx2.fillStyle="rgb(60,70,80)" ctx2.fillRect(10,350,560,200); ctx2.fillStyle="rgb(0,0,0,0.03)" for(var i=0;i<800;i++){ ctx2.fillRect(Math.random()600-20,Math.random()600-20,40,40); } ctx3.lineWidth=5; ctx3.strokeStyle="rgb(120,120,120)"; ctx3.fillStyle="rgb(60,70,80)" ctx3.clearRect(0,0,600,600); ctx3.strokeRect(235+5,100,120,300); ctx3.beginPath(); ctx3.arc(300,180,60,0,Math.PI,Math.PI2); ctx3.lineTo(0,180); ctx3.lineTo(0,0); ctx3.lineTo(600,0); ctx3.lineTo(600,180); ctx3.fill(); ctx3.stroke(); for(var x=0;x<600;x+=60){ for(var y=0;y<600;y+=60){ if(x<200\|\|x>300\|\|y<100\|\|y>300){ ctx3.drawImage(t,x,y,60,60); } }} //STUFF THAT IF I DELETE IT STOPS WORKING FOR SOME REASON{ var camlx=0; var camly=0; var playerx=0; var playery=0; var deaths = 0; var jump = false; var deathTime = 60; var dead = false; var clicked; //} class Camera{ constructor(x,y,z){ this.x=x; this.y=y; this.rx=x; this.ry=y; this.xv=0; this.yv=0; this.z=z; this.cameraShakex=0; this.cameraShakey=0; this.shakey=0; this.stiffness=0.15; this.damping=0.14; // this.movementSpeed=lerp(this.movementSpeed,(this.r-this.truer)this.stiffness,this.damping); // this.truer+=this.movementSpeed/2.0; } update(){ this.cameraShakex+=Math.random()-0.5; this.cameraShakey+=Math.random()-0.5; this.cameraShakex=0.92; this.cameraShakey=0.92; this.shakey=0.95; this.xv=lerp(this.xv,(this.x-this.rx)this.stiffness,this.damping); this.rx+=this.xv; this.yv=lerp(this.yv,(this.y-this.ry)this.stiffness,this.damping); this.ry+=this.yv; if(!won){ this.x=Math.min(Math.max(this.x,340),6003-300+40); } } cameraSave(z){ ctx.save(); if((z-this.z)>0){ ctx.translate(300,300); ctx.scale(1/(z-this.z),1/(z-this.z)); ctx.translate(-this.rx-this.cameraShakexthis.shakey,-this.ry-this.cameraShakeythis.shakey); }else{ ctx.translate(3000,3000); } } cameraRestore(){ ctx.restore(); } } var camera = new Camera(0,0,1); var player = new Player(200, 200); var level = 0; var levels = [ [ 'bbbbbbbdddddddddddddllllllldddddddddddddbbbbbbb', 'b.....b.................................w.....b', 'b.....b.................................w.....b', 'b.....b.........ldddd.....ddddd.e.ddddd.w..y..b', 'b.....b................d...............dw.....b', 'b.....b........l........................bdddddb', 'b.....b....d............................b.....b', 'b.....b.........dd......................b.....b', 'b.....bl........dd......................b.....b', 'b.....b...e.....dd......................b.....b', 'b.....b......d..........................b.....b', 'b.....b............................d....b.....b', 'b.....b........llll..d...l.....l........b.....b', 'b.....b..................l.....l......d.b.....b', 'b.....b..................l.....l........b.....b', 'b.....b..................l.....l.....l..b.....b', 'b.....b...............d.....e.....e.....b.....b', 'b.....b.................................b.....b', 'b.....b..............l..................b.....b', 'b.....b..............e..................b.....b', 'b.....b.................................b.....b', 'b.....b..............d..................b.....b', 'b.....b.........d.......................b.....b', 'b.....b.....d...........................b.....b', 'b.....b..d..............................b.....b', 'b.....b.................................b.....b', 'b.....bdddddddddd........dddddddddddddddb.....b', 'b.....b.................................b.....b', 'b.....b...........l.....................b.....b', 'b.....b..............l...........e......b.....b', 'b.....b..................dd.d.d.........b.....b', 'b.....b.................................b.....b', 'b.....b.............................d...b.....b', 'b.....b.................d...........d.l.b.....b', 'b.....b.................................b.....b', 'b.....b........................dd......lb.....b', 'b.....b.............d..............ddd..b.....b', 'b.....b..................dd.............b.....b', 'b.....b...........d.....................b.....b', 'b.....b.................................b.....b', 'b.....b.............l...d...............b.....b', 'b.....b.................................b.....b', 'b.....b....................d............b.....b', 'b.....b...l.....d.......................b.....b', 'b.....b...............d.d...............b.....b', 'b.....bd................................b.....b', 'b.....b.................................b.....b', 'b.....b...l.............................b.....b', 'b.....b.................................b.....b', 'b.....bd................................b.....b', 'b.....b....d............................b.....b', 'b.....b.........d.......................b.....b', 'b.....b.................................b.....b', 'b.....b.............d...................b.....b', 'b.....b.....P....d......................b.....b', 'b.....b.................................b.....b', 'b.....b....bbb..........................b.....b', 'b.....b....bbb..........................b.....b', 'b.....b...bbbbb.........................b.....b', 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' ] ]; //Draw the Levels var drawLevel = function(){ blocks = []; for(var i = 0; i < levels[level].length;i++){ for(var j = 0; j < levels[level][i].length;j++){ switch(levels[level][i][j]){ case 'b': blocks.push(new Block(j40,i40,'block',false)); break; case 'd': blocks.push(new Block(j40,i40,'block',true)); break; case 'y': blocks.push(new Block(j40,i40,'sigil',true)); break; case 'P': player.x = j40; player.y = i40; break; case '@': blocks.push(new Block(j40,i40,'portal')); break; case 'w': blocks.push(new Block(j40,i40,'disable')); break; case 'l': blocks.push(new Block(j40,i40,'ledge')); break; case 'v': blocks.push(new Block(j40,i40,'spike')); break; case 'e': blocks.push(new Block(j40,i40,'cloud')); break; } } } }; drawLevel(); //The Scenes var won=false; var winTime=0; var winTime2=0; function drawGame(){ ctx.fillStyle="rgb(255,255,255)" camlx+=(player.x-camlx)/9; camly+=(player.y-camly)/9; playerx=player.x; playery=player.y; if(player.y-1520>-evilHeight){ dead=true; } if (dead){ deathTime--; if (deathTime <= 0){ evilHeight=-850; evilStart=false; drawLevel(); deathTime = 60; dead = false; } } for(var i = 0; i < blocks.length; i ++){ if(blocks[i].draw){ blocks[i].display(); } if(blocks[i].type === 'block'\|\|blocks[i].type === 'ledge'){ if(blocks[i].type === 'block'){ player.collide(blocks[i]); }else if(blocks[i].type === 'ledge'){ if(frameCount%200<100){ player.collide(blocks[i]); } } } if(blocks[i].checkColl(player)){ switch(blocks[i].type){ case 'portal': level++; drawLevel(); break; case 'spike': drawLevel(); break; case 'cloud': player.canJump = true; break; case 'sigil': won=true; player.xv=0.8; player.yv=0.8; break; case 'disable': evilStart=false; break; } } } camera.cameraSave(1); if (!dead){ player.draw(); player.move(); } ctx.restore(); ctx.fillStyle="rgb(0,0,0)" if (player.y > 3000){ drawLevel(); } } function ramp(a,b,t){ return lerp(a,b,(tt-t)4+1); } function drawMeter(x,y,w,r,g,b,p){ var uniqueVariableName=new fancyBox(x,y,w,20,0.2,1); uniqueVariableName.draw(); ctx.fillStyle="rgb("+(r/3.0)+","+(g/3.0)+","+(b/3.0)+",0.6)" ctx.fillRect(x+0.5,y+0.5,w-1,20-1); for(var i=0;i<8;i++){ var ii=8-i ctx.fillStyle="rgb("+(r/((iiii)/70.0+1.0))+","+(g/((iiii)/70.0+1.0))+","+(b/((iiii)/70.0+1.0))+")" ctx.fillRect(x,y+i1.0,wp,20-i2); } } var dash=1.0; //Texture{ var resolution = 3; 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 x = 0; x < 1; x+=.2) { for(var y = 0; y < 1; y+=.2) { pts.push({ x: x200+(Math.random() * 40-20), y: y200+(Math.random() 40-20) }) } } 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), 0.1); } } } dist = 255-(dist * 8 ); noiseText[y][x] = dist; } } //} function fbm(x, y) { var f = (noiseText[mod(Math.floor(x/3),199) ][mod(Math.floor(y/3),199)+1]) f += (noiseText[mod(Math.floor((x/3)2),199) ][mod(Math.floor((y/3)2),199)+1])/2 f += (noiseText[mod(Math.floor((x/3)4),199) ][mod(Math.floor((y/3)4),199)+1])/4 f += (noiseText[mod(Math.floor((x/3)8),199) ][mod(Math.floor((y/3)8),199)+1])/8 f += (noiseText[mod(Math.floor((x/3)16),199) ][mod(Math.floor((y/3)16),199)+1])/16 return f/4-50; } var frameCount = 0; //} var px=300; var py=0 function fbm2(x, y) { var f = (noiseText[mod(Math.floor(x/3),199) ][mod(Math.floor(y/3),199)+1]) f += (noiseText[mod(Math.floor((x/3)2),199) ][mod(Math.floor((y/3)2),199)+1])/2 f += (noiseText[mod(Math.floor((x/3)4),199) ][mod(Math.floor((y/3)4),199)+1])/4 f += (noiseText[mod(Math.floor((x/3)8),199) ][mod(Math.floor((y/3)8),199)+1])/8 f += (noiseText[mod(Math.floor((x/3)16),199) ][mod(Math.floor((y/3)16),200)+1])/16 return (f/4-50-y5)/2; } var lns=[]; class Lightning{ constructor(x,y,b,t,o){ this.x=x; this.y=y; this.ogx=x; this.ogy=y; this.base=b; this.life=t; this.oglife=t; if(o){ this.oglife=o; } this.bias=Math.random()-0.5; } update(){ ctx.strokeStyle="rgb(185,155,255,"+(1.0-(this.oglife-this.life)/this.oglife)+")"; ctx.beginPath(); if(this.base){ ctx.lineWidth=3; this.life-=0.5; this.x=this.ogx; this.y=this.ogy; for(var i=0;i<100;i++){ var dif={x: fbm2(this.x, this.y)-fbm2(this.x-1, this.y),y: fbm2(this.x, this.y)-fbm2(this.x, this.y-1)}; if(this.y>this.ogy+600){ break; } if(Math.abs(dif.x)<3&&Math.abs(dif.y)<3&&Math.random()>0.95&&this.life>14){ lns.push(new Lightning(this.x+Math.random(),this.y+Math.random(),false,this.life,this.oglife)); } this.x+=dif.x5+this.bias4; this.y-=dif.y2; var sx=30/(Math.abs(dif.x)+10.5); var sy=30/(Math.abs(dif.x)+10.5); ctx.lineTo(this.x,this.y); } }else{ ctx.lineWidth=1; this.life-=0.5; this.x=this.ogx; this.y=this.ogy; for(var i=0;i<100;i++){ var dif={x: fbm2(this.x, this.y)-fbm2(this.x-1, this.y),y: fbm2(this.x, this.y)-fbm2(this.x, this.y-1)}; if(this.y>this.ogy+600){ break; } this.x+=dif.x4+this.bias4; this.y-=dif.y; var sx=20/(Math.abs(dif.x)+10.5); var sy=20/(Math.abs(dif.x)+10.5); ctx.lineTo(this.x,this.y); } } ctx.stroke(); } } function playMusic(){ if(playing) { time += songs[songNum].bpm / 60 / fps; for(var i = 0; i < songs[songNum].notes.length; i += 1) { if(!songs[songNum].notes[i][4] && time > songs[songNum].notes[i][0]) { songs[songNum].notes[i][4] = 1; note(songs[songNum].notes[i][1], songs[songNum].notes[i][3], songs[songNum].notes[i][2]); } } if(songs[songNum].notes[songs[songNum].notes.length-1][0]-time<0){ time=0; for(var i = 0; i < songs[songNum].notes.length; i += 1) { songs[songNum].notes[i][4] = 0; } } } } function updateGL(){ gl.clear(gl.COLOR_BUFFER_BIT); gl.uniform1f(drawx, player.xv/10); gl.uniform1f(drawy, player.yv/10); gl.uniform1f(iTime, frameCount); if(player.hitTimer>10){ gl.uniform1f(cli, ramp(1,0,(20-player.hitTimer)/10)); }else{ gl.uniform1f(cli, 0); } } function circ(x){ x=x1; x-=1.0; return Math.sqrt(1.0-(xx)); } var lightOverlay=0; var evilHeight=-850; function drawBackground(){ ctx.fillStyle="rgb(40,0,0)" ctx.fillRect(0,0,600,600); camera.cameraSave(1); if(Math.random()>0.99){ lns.push(new Lightning(camera.rx+Math.random()200+200-300,camera.ry-300,true,15)); lightOverlay+=Math.random()0.2+0.2; } lightOverlay=0.92; for(var i=0;i<lns.length;i++){ lns[i].update(); if(lns[i].life<0){ lns=[]; } } for(var x=-1;x<4;x++){ for(var y=-2;y<4;y++){ ctx.drawImage(b,280-20+x400,1160+20-y400,400,400); ctx.fillStyle="rgb(0,0,0,0.4)"; ctx.fillRect(280-20+x400,1160+20-y400,400,400); } } ctx.restore(); drawGame(); if(player.x<650){ for(var x=0;x<=6;x+=0.2){ for(var y=-2;y<4;y++){ camera.cameraSave(1-circ(p/12)/4); var p=6-x; ctx.drawImage(b,0+p48,0,60circ(p/12),600,155-20+circ(0.5-p/12)175,1160+20-y400,-(60/1.5)circ(p/12),400); ctx.fillStyle="rgb(0,0,0,"+(lerp(0.4,0.0,p/6))+")" ctx.fillRect(155-20+circ(0.5-p/12)175,1160+20-y400,-(50/1.5)circ(p/12),400); ctx.drawImage(b,0+p48,0,60circ(p/12),600,155-20-circ(0.5-p/12)175,1160+20-y400,(60/1.5)circ(p/12),400); ctx.fillRect(155-20-circ(0.5-p/12)175,1160+20-y400,(50/1.5)circ(p/12),400); ctx.restore(); } } } if(player.x>1250){ for(var x=0;x<=6;x+=0.2){ for(var y=-2;y<4;y++){ camera.cameraSave(1-circ(p/12)/4); var p=6-x; ctx.drawImage(b,0+p48,0,60circ(p/12),600,1765-20+circ(0.5-p/12)175,1160+20-y400,-(60/1.5)circ(p/12),400); ctx.fillStyle="rgb(0,0,0,"+(lerp(0.4,0.0,p/6))+")" ctx.fillRect(1765-20+circ(0.5-p/12)175,1160+20-y400,-(50/1.5)circ(p/12),400); ctx.drawImage(b,0+p48,0,60circ(p/12),600,1765-20-circ(0.5-p/12)175,1160+20-y400,(60/1.5)circ(p/12),400); ctx.fillRect(1765-20-circ(0.5-p/12)175,1160+20-y400,(50/1.5)circ(p/12),400); ctx.restore(); } } } ctx.fillStyle="rgb(50,50,50)" camera.cameraSave(0.95); ctx.fillRect(400,1520+800,200,40); ctx.fillStyle="rgb(55,55,55)" ctx.fillRect(460,1460-1+800,80,62); ctx.fillStyle="rgb(60,60,60)" ctx.fillRect(440,1460-1+800,120,6); ctx.beginPath(); ctx.moveTo(460-20,1460+800); ctx.lineTo(460+40,1440+800); ctx.lineTo(460+100,1460+800); ctx.font="20px Baskervville"; ctx.fill(); ctx.fillStyle="rgb(30,30,30)" ctx.lineWidth=2; ctx.strokeStyle="rgb(20,20,20)" ctx.strokeText("Oh",488,1485+800); ctx.strokeText("Noes",480,1505+800); ctx.fillText("Oh",488,1485+800); ctx.fillText("Noes",480,1505+800); for(var i=1;i<4;i++){ ctx.fillRect(488+i300,1490+800,20,80); ctx.fillRect(488-20+i300,1490+20+800,60,18); } ctx.fillStyle="rgb(51, 32, 3)" ctx.fillRect(0,1560+200+800,2200,-200); ctx.fillStyle="rgb(255,30,30,0.2)" for(var i=0;i<10;i++){ ctx.fillRect(0,2560+200,2200,-1200-evilHeight-i5); } ctx.restore(); ctx.strokeStyle="rgb(255, 221, 185)" ctx.lineWidth=1.7; if(won){ winTime=lerp(winTime,1,0.05); for(var i=0;i<100;i++){ camera.cameraSave(1+Math.sin(i2.14+frameCount/27)/10); ctx.beginPath(); ctx.moveTo(player.x+player.w/2+Math.cos(i/8.56+frameCount/26)25winTime,player.y+player.h/2+Math.sin(i/7.02+frameCount/24)25winTime); var j=i+1; ctx.lineTo(player.x+player.w/2+Math.cos(j/8.56+frameCount/26)25winTime,player.y+player.h/2+Math.sin(j/7.02+frameCount/24)25winTime); ctx.stroke(); ctx.restore(); } } for(var i=0;i<3;i++){ particles.push(new Particle(camera.rx-300+Math.random()1200, camera.ry-400, random2() * 1, random2() * 2, 4, "gs", 105, 105, 155, 0.8, 350+random2()200)); } for(var i=0;i<8;i++){ particles.push(new Particle(camera.rx-300+Math.random()1200, (1560+200)+(-200-evilHeight)-10, random2() * 1, random2() * 2, 4, "gas", 250, 10, 15, 0.5, 35+random2()100)); } ctx.fillStyle="rgb(245,245,255,"+(lightOverlay)+")" ctx.fillRect(0,0,600,600); } function updateParticles(x){ if(x){ for(var i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); if(particles[i].life < 0) { particles.splice(i, 1); } } }else{ for(var i = 0; i < particles.length; i++) { particles[i].update(); camera.cameraSave(1) if(particles[i].x-300<player.x&&particles[i].x+300>player.x&&particles[i].y-400<player.y&&particles[i].y+400>player.y){ particles[i].draw(); } ctx.restore(); if(particles[i].life < 0) { particles.splice(i, 1); } } } } var zlerp=0; function updateCamera(){ if(won){ camera.z=winTime2; camera.x=lerp(camera.x,player.x+player.w/2,0.1); camera.y=lerp(camera.y,player.y+player.h/2,0.1); }else{ camera.x=player.x+player.w/2; camera.y=player.y+player.h/2-100; camera.z=0.0; } camera.update(); } var readHow=false; class Button{ constructor(x,y,w,h,p){ this.x=x; this.y=y; this.w=w; this.h=h; this.pointer=p; this.i=0; this.hover=1; } update(){ if(mouseX>this.x&&mouseX<this.x+this.w&&mouseY>this.y&&mouseY<this.y+this.h){ if(this.i>0&&!readHow){ ctx.font="30px Nanum Myeongjo"; ctx.fillStyle="rgb(0,0,180)" ctx.fillText("Read HOW first!",mouseX-80,mouseY) } this.i--; if(clicked){ if(this.pointer==0){ if(readHow){ lns.push(new Lightning(300,0,true,20)); scene=this.pointer; }else{ this.i=50; } }else{ lns.push(new Lightning(300,0,true,20)); scene=this.pointer; } } this.hover=lerp(this.hover,1,0.1); }else{ this.hover=lerp(this.hover,0,0.1); } } draw(){ var mov=(1-this.hover)12; ctx.fillStyle="rgb(110,110,110)" ctx.fillRect(this.x+1,this.y+1,this.w-2,this.h-2); ctx.fillStyle="rgb(130,130,130)" ctx.beginPath(); ctx.moveTo(this.x,this.y); ctx.lineTo(this.x+this.w,this.y); ctx.lineTo(this.x+this.w-mov,this.y+mov); ctx.lineTo(this.x+mov,this.y+mov); ctx.fill(); ctx.fillStyle="rgb(100,100,100)" ctx.beginPath(); ctx.moveTo(this.x,this.y); ctx.lineTo(this.x,this.y+this.h); ctx.lineTo(this.x+mov,this.y+this.h-mov); ctx.lineTo(this.x+mov,this.y+mov); ctx.fill(); ctx.beginPath(); ctx.moveTo(this.x+this.w,this.y); ctx.lineTo(this.x+this.w,this.y+this.h); ctx.lineTo(this.x-mov+this.w,this.y+this.h-mov); ctx.lineTo(this.x-mov+this.w,this.y+mov); ctx.fill(); ctx.fillStyle="rgb(90,90,90)" ctx.beginPath(); ctx.moveTo(this.x,this.y+this.h); ctx.lineTo(this.x+this.w,this.y+this.h); ctx.lineTo(this.x+this.w-mov,this.y+this.h-mov); ctx.lineTo(this.x+mov,this.y+this.h-mov); ctx.fill(); } } var evilStart=false; function updateGame(){ if(player.y<2150&&evilHeight<-55){ evilStart=true; } if(evilStart){ evilHeight+=0.5; } } function gameScene(){ updateGL(); updateGame(); updateCamera(); drawBackground(); if(won){ if(winTime2<0.9){ winTime2=lerp(winTime2,1,0.005); } ctx.fillStyle="rgb(0,0,0,"+(winTime21.2)+")" ctx.fillRect(0,0,600,600); // ctx.fillStyle="rgb(180,145,65)" ctx.fillStyle="rgb(180,145,65,"+(winTime21.2)+")" ctx.font="70px Cinzel Decorative"; ctx.fillText("You Live",150,340); } updateParticles(); if (dead){ ctx.fillStyle="rgb(0,0,0,"+((60-deathTime)/60)+")" ctx.fillRect(0,0,600,600); } } var playButton=new Button(200,280,200,150,0); var howButton=new Button(20,295,160,120,2); var aboutButton=new Button(420,295,160,120,3); function menuScene(){ ctx.fillStyle="rgb(80,80,80)" ctx.fillRect(0,0,600,600); ctx.font="100px Cinzel Decorative"; if(keys.x){ ctx.fillStyle="rgb(135,135,135)" ctx.lineWidth=14; ctx.strokeStyle="rgb(135,135,135)" ctx.strokeText("Stormy",50,120); ctx.strokeText("Ascent",160,220); ctx.lineWidth=10; ctx.strokeStyle="rgb(120,60,60)" ctx.strokeText("Stormy",50,120); ctx.strokeText("Ascent",160,220); ctx.fillText("Stormy",50,120); ctx.fillText("Ascent",160,220); }else{ ctx.fillStyle="rgb(120,120,120)" ctx.lineWidth=14; ctx.strokeStyle="rgb(120,120,120)" ctx.strokeText("Stormy",50,120); ctx.strokeText("Ascent",160,220); ctx.lineWidth=6; ctx.strokeStyle="rgb(120,60,60)" ctx.strokeText("Stormy",50,120); ctx.strokeText("Ascent",160,220); ctx.fillText("Stormy",50,120); ctx.fillText("Ascent",160,220); } playButton.draw(); howButton.draw(); aboutButton.draw(); playButton.update(); howButton.update(); aboutButton.update(); ctx.font="60px Nanum Myeongjo"; ctx.fillStyle="rgb(60,50,50)" ctx.lineWidth=playButton.hover4; ctx.strokeStyle="rgb(200,50,50)" ctx.strokeText("PLAY",225,375); ctx.fillText("PLAY",225,375); ctx.font="40px Nanum Myeongjo"; ctx.lineWidth=howButton.hover4; ctx.strokeText("HOW",45,370); ctx.fillText("HOW",45,370); ctx.font="30px Nanum Myeongjo"; ctx.lineWidth=aboutButton.hover4; ctx.strokeText("ABOUT",445,368); ctx.fillText("ABOUT",445,368); if(!keys.x){ ctx.font="30px Cinzel"; ctx.fillStyle="rgb(100,200,200)" ctx.lineWidth=9; ctx.strokeStyle="rgb(10,10,10)" ctx.strokeText("Subscribe? (click)",20,580); ctx.lineWidth=2; ctx.strokeStyle="rgb(100,200,200)" ctx.strokeText("Subscribe? (click)",20,580); ctx.fillText("Subscribe? (click)",20,580); if(mouseX<260&&mouseY>555&&clickToggle){ open("https://www.khanacademy.org/computer-programming/bearkirb-subpage/6113592068325376", "_blank"); } ctx.fillStyle="rgb(100,200,200)" ctx.lineWidth=9; ctx.strokeStyle="rgb(10,10,10)" ctx.strokeText("Delag Toggle (click)",20,530); ctx.lineWidth=2; ctx.strokeStyle="rgb(100,200,200)" ctx.strokeText("Delag Toggle (click)",20,530); ctx.fillText("Delag Toggle (click)",20,530); if(mouseX<330&&mouseY>505&&mouseY<545&&clickToggle){ if(settings.webgl){ settings.webgl=false; }else{ settings.webgl=true; } } } for(var i=0;i<8;i++){ particles.push(new Particle(Math.random()1000,0, random2() * 1, random2() * 2, 4, "gs", 115, 135, 205, 0.5, 350+random2()*200)); } updateParticles(1); for(var i=0;i<lns.length;i++){ lns[i].update(); if(lns[i].life<0){ lns.splice(i,1); } } } var homeButton=new Button(10,10,120,60,1); function howScene(){ readHow=true; ctx.fillStyle="rgb(30,30,30)" ctx.fillRect(0,0,600,600); homeButton.draw(); homeButton.update(); ctx.fillStyle="rgb(30,180,180)" ctx.font="20px Nanum Myeongjo"; ctx.fillText("HOME",35,47); ctx.font="40px Nanum Myeongjo"; ctx.fillText("HOW TO PLAY:",150,80); ctx.font="25px Nanum Myeongjo"; ctx.fillText("You are a skeleton, awoken from your grave by a",20,140); ctx.fillText("lighting strike. Unfortunately, a horde of demons",20,180); ctx.fillText("were released as well. Use the WASD keys to move",20,220); ctx.fillText("and space to dash. Find the spell to banish the",20,260); ctx.fillText("demons, located at the top of the rightmost tower.",20,300); ctx.fillText("You may see some glowing Spirit Orbs that you",20,340); ctx.fillText("can jump on to help your ascent. Beware of bricks",20,380); ctx.fillText("that shift in and out of the wall. Be ready, because",20,420); ctx.fillText("as soon as you start your climb, the demons will",20,460); ctx.fillText("chase you!",20,500); for(var i=0;i<lns.length;i++){ lns[i].update(); if(lns[i].life<0){ lns.splice(i,1); } } } function aboutScene(){ ctx.fillStyle="rgb(30,30,30)" ctx.fillRect(0,0,600,600); homeButton.draw(); homeButton.update(); ctx.fillStyle="rgb(30,180,180)" ctx.font="20px Nanum Myeongjo"; ctx.fillText("HOME",35,47); ctx.font="60px Nanum Myeongjo"; ctx.fillText("ABOUT",195,80); ctx.font="20px Nanum Myeongjo"; ctx.fillText("LORE: You were a necromancer. Like any castle wizard, you",20,140); ctx.fillText("would perform tasks for the King for funding. With this",20,170); ctx.fillText("funding, you would be able to experiment and perfect your",20,200); ctx.fillText("craft along with an apprentice. Old age catches up to anyone",20,230); ctx.fillText("however, and you have been buried for years. Before your",20,260); ctx.fillText("inevitable death, you found an experimental spell that",20,290); ctx.fillText("could bring you back from the grave given enough energy.",20,320); ctx.fillText("Now, a lightning strike has saved you. It did not only bring",20,350); ctx.fillText("you back, dozens of demons were released that are looking",20,380); ctx.fillText("for you. Up in your old study, you apprentice has found a",20,410); ctx.fillText("sigil to banish the demons. If you could only get there.",20,440); for(var i=0;i<lns.length;i++){ lns[i].update(); if(lns[i].life<0){ lns.splice(i,1); } } } var scenes=[gameScene,menuScene,howScene,aboutScene]; var scene=1; var settings={webgl:true}; function render() { window.requestAnimationFrame(render); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); interval = 1000 / fps start=true; frameCount+=1.0; ctx.save(); ctx.scale(2,2); scenes[scene](); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); ctx.restore(); if(settings.webgl){ gl.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas, 0, 0); } // playMusic(); pmouseX=mouseX pmouseY=mouseY; clickToggle=false; } } render(); </script> <script src='https://cdn.jsdelivr.net/gh/Bearkirb/gameMidis@0f619485d790a43f87a5e5e50ccb463f5e5e4a79/index.js'></script> <script src='https://cdn.jsdelivr.net/gh/Bearkirb/gameMidis@4bfd829f7b8c16a9778a9c48c715f9db1f8a55b5/index2.js'></script> <script></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJuZoYLqCQw
Votes	96
Spin-Offs	11
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	3 months ago, 1726338203560
Updated	3 months ago, 1726338203560
Source Deleted	unknown