Viewing Program

Program Data

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

Title	Desmos: THE GAME [Beta]
ID	6288584194310144
Created	10 months ago, 1709611587051
Updated	10 months ago, 1709649363095
Code	<!DOCTYPE html> <!-- Concept: Desmos, the game. Intro scene with "desmos the game" and logos and stuff. Fades to black, fades to a new desmos graph page. The equations area will have sliders that act as buttons with "play" and all that stuff. The graph area will have the same "desmos the game" logo. Story: You can walk to the right and see the npc "i" a neglected symbol left at the bottom of the screen. You can interact and get the dialogue/lore "Hey, you're new here! Welcome to the Graph. A lot of unused symbols are left here when deleted from equations, so we just get to chillax down here. It's kinda lonely though... Anayways, I cant help but notice that you're an x, one of the most important symbols in math! How did you get down here?" An undetermined amount of wandering on graphs later... New npc: "g" Explains lore of e being an evil symbol and letting fame and attention turn it into a beast. It was seen wandering and gathering an army of numbers and characters to stage a revolt against desmos, looking to break free and gain power over the whole internet. "g" gives you a weapon, a vector launcher. just a gun, shaped like an arrow, shoots arrows. Later npc gives you polar pew pew (shaped like a theta) that still shoots arrows. Middle gameplay, parkour and gameplay. You will jump around and do a classic parkour game, you can shoot at enemies. simple moving enemy: lowercase sigma. Enemy that can move through walls:Z (imaginary number) Boss fight: you eventually make it up to the equation spot (you move far to the right and eventually end up right above where you started before falling due to "e") camera pans to the left, beyond the normal confines of desmos. e is standing on a podium, numbers worshipping him. He magically swipes all the graph stuff to the side with cool particles and such, leaving only a y=-6 ground plane. Bossfight begins. Aight I want to work now, bossfight concept later. --> <html> <title>Desmos: THE GAME [Beta]</title> <canvas id = "m" width = '600' height = '600'></canvas> <canvas id = "b" width = '600' height = '600'></canvas> <img id="mouseImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Cursor_for_android.png/640px-Cursor_for_android.png"> <style> { margin:0px; overflow:hidden; width:600px; height:600px; } </style> <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=Bebas+Neue&family=Lora:ital,wght@0,400..700;1,400..700&family=Macondo&family=Noto+Sans+Math&family=Quicksand:wght@700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <script type="module"> for(let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } var mouseX = 0, pmouseX = 0, mouseY = 0, pmouseY = 0, clicked = false, keys = {}; 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); var clickToggle=false; var canClick=true; window.addEventListener('mousedown', event => { clicked = true; if(canClick){ clickToggle=true; canClick=false; } }); window.addEventListener('mouseup', event => { clicked = false; canClick=true; }); window.addEventListener("keydown", (event) => { keys[event.key] = true; }); window.addEventListener("keyup", (event) => { delete keys[event.key]; }); var c = document.getElementById("m") var ctx = c.getContext("2d"); var fps=60; var camera={x:mouseX,y:mouseY,zoom:1,z:1} function return3D(type, s){ if(type=="x"){ var w=((s-camera.x)/600)camera.zoomcamera.z; if(Math.abs(w)<1){ if(w<0){ w=-1; }else{ w=1; } } return w; }else if(type=="y"){ var w=((s-camera.y)/600)camera.zoomcamera.z; if(Math.abs(w)<1){ if(w<0){ w=-1; }else{ w=1; } } return w; } } function return3D2(type, s){ if(type=="x"){ var w=((s-camera.x)/600)camera.zoomcamera.z; return w; }else if(type=="y"){ var w=((s-camera.y)/600)camera.zoomcamera.z; return w; } } var frameCount=0; var c1Time=0; var l1Time=0; var sqrt3=Math.sqrt(3) 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; } var mouseImg = document.getElementById("mouseImage"); var mousePos={x:340,y:390}; var camlx=0; var camly=0; var playerx=0; var playery=0; var deaths = 0; var jump = false; var deathTime = 20; var dead = false; var camX = 200; var clicked; //Keys var keys = []; var bullets=[]; class bullet{ constructor(x,y,xv,yv,g){ this.x=x; this.y=y; this.xv=xv; this.yv=yv; this.g=g; this.dead=false; this.killCounter=60; this.kill=false; } update(){ if(this.dead){ this.killCounter--; if(this.killCounter<0){ this.kill=true; } }else{ this.x+=this.xv; this.y+=this.yv; for(var i = 0; i < enemies.length; i++) { if(distance(enemies[i].x+8,enemies[i].y,this.x,this.y)<12) { this.dead=true; if(enemies[i].c=="𝑧"){ if(this.g){ enemies.splice(i, 1); } }else{ enemies.splice(i, 1); } } } } } draw(){ ctx.save(); ctx.translate(-camlx2.75+this.x2.75,-camly2.75+this.y2.75); ctx.beginPath(); ctx.ellipse(315,280,8,8,0,0,Math.PI2); ctx.fill(); ctx.fillStyle="rgb(250,126,26)" ctx.restore(); } } //Player var Player = function(x,y){ this.x = x; this.y = y; this.w = 18; this.h = 18; this.facing=1; this.facingl=1; this.px = 0; this.py = 0; this.hitTimer=20; this.xv = 0; this.yv = 0; this.grav = 0.32; this.animation="idle"; this.canJump = false; this.jumpPower = 7.6; this.health=3; this.damaging=false; this.damageCooldown=20; this.d2=0; this.hasVector=false; this.gunCooldown=15; }; Player.prototype.draw = function() { ctx.save(); ctx.translate((this.x-camlx)3,(this.y-camly)3); this.facingl-=(this.facingl-this.facing)/4; ctx.font="86px Noto Sans Math" ctx.fillStyle="rgb(0,0,0)"; ctx.fillText("𝑥",327,295); if(this.hasVector){ ctx.translate(22,-30); drawVector2(mouseX-320,mouseY-270,this.gunCooldown/50+1); ctx.translate(-22,30); if(this.gunCooldown>0){ this.gunCooldown--; } if(this.gunCooldown<=0&&clickToggle){ this.gunCooldown=15; var dx=mouseX-315; var dy=mouseY-280; var dist=Math.sqrt(dxdx+dydy); dx/=dist; dy/=dist; bullets.push(new bullet(this.x,this.y,dx3,dy3)); } } ctx.restore(); if(this.damaging){ this.damageCooldown++; }else{ this.d2++; if(this.d2>20){ this.damageCooldown=20; } } if(this.damageCooldown>20&&this.damaging){ this.health--; this.damageCooldown=0; this.damaging=false; this.d2=0; } if(this.health<1){ dead=true; } ctx.fillStyle="rgb(255,0,0)" for(var i=0;i<this.health;i++){ ctx.fillRect(500+i35,10,20,20); } }; Player.prototype.move = function(){ 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.animation="walk"; } if(this.xv<0){ this.facing=-1; } if(this.yv<-0.1){ this.animation="jump"; } if(this.yv>0.5){ this.animation="fall"; if(keys.s\|\|keys.ArrowDown){ this.animation="dive"; } } this.px = this.x; this.py = this.y; this.y += this.yv; this.yv += this.grav; this.x += this.xv; this.xv/=1.31; this.yv/=1.01; if((keys.a\|\|keys.ArrowLeft)&&!(keys.s\|\|keys.ArrowDown)&&!(keys.d\|\|keys.ArrowRight)){ this.xv += -0.93; } if((keys.d\|\|keys.ArrowRight)&&!(keys.s\|\|keys.ArrowDown)&&!(keys.a\|\|keys.ArrowLeft)){ this.xv += 0.93; } if((keys.a\|\|keys.ArrowLeft)&&(keys.s\|\|keys.ArrowDown)&&!(keys.d\|\|keys.ArrowRight)){ this.xv=1.302 } if(keys.s\|\|keys.ArrowDown){ this.yv+=0.5; } if(!(keys.s\|\|keys.ArrowDown)&&keys[" "]&&this.hitTimer<0){ this.xv+=15.0this.facing; this.hitTimer=20; } if((keys.d\|\|keys.ArrowRight)&&(keys.s\|\|keys.ArrowDown)&&!(keys.a\|\|keys.ArrowLeft)){ this.xv=1.302 } if((keys.w\|\|keys.ArrowUp) && this.canJump){ this.yv = -this.jumpPower; this.canJump = false; } if (jump){ this.jumpPower = 8.5; this.yv = -this.jumpPower; this.jumpPower = 7.5; jump = false; } this.canJump = false; }; var player = new Player(2, 2); Player.prototype.collide = function(obj){ if(player.x<0){ this.xv=0; this.x=0; } 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"; if(obj.type==="ledge"&&this.y-obj.y<0){ this.animation="hang"; this.yv=0; this.y-=0.1; this.xv=0; this.canJump=true; } } else if(this.px <= obj.x- this.w) { this.x = obj.x-this.w; this.xv = 0; this.animation="push"; if(obj.type==="ledge"&&this.y-obj.y<0){ this.animation="hang"; this.yv=0; this.y-=0.1; this.xv=0; this.canJump=true; } } else if(this.py >= obj.y + obj.h){ this.y = this.py; this.yv = -this.yv/12; this.animation="squish"; } } }; //Blocks var rectRect = function(x1,y1,w1,h1,x2,y2,w2,h2){ return(x1 + w1 > x2 && y1 + h1 > y2 && x1 < x2 + w2 && y1 < y2 + h2); }; var blocks = []; var Block = function(x, y, type, i){ this.x = x; this.y = y; this.w = 20; this.h = 20; this.type = type; this.info=i; }; Block.prototype.checkColl = function(obj){ return(rectRect(this.x,this.y,this.w,this.h,obj.x,obj.y,obj.w,obj.h)); }; Block.prototype.display = function() { ctx.save(); ctx.fillStyle="rgb(255, 255, 255)" ctx.translate(300,300); ctx.scale(camera.zoom(1-(camera.z/150))/1.75,camera.zoom(1-camera.z/150)/1.75); ctx.translate(-camera.x2+300,-camera.y2+500); // ctx.translate(140,50) switch(this.type){ case 'block': ctx.fillStyle="rgb(190,20,40)" ctx.fillRect(this.x,this.y,this.w, this.h); break; case 'portal': ctx.fillStyle="rgb(255,255,255)" ctx.beginPath(); ctx.ellipse(this.x+10,this.y+10,this.w,this.h,0,0,Math.PI2); ctx.fill(); break; case 'ledge': ctx.fillStyle="rgb(190,20,40)" ctx.fillRect(this.x,this.y,this.w, this.h); break; case 'spike': ctx.fillStyle="rgb(290,20,40)" ctx.fillRect(this.x,this.y,this.w, this.h); break; } ctx.restore(); }; //The Levels function distance(x1,y1,x2,y2){ return Math.sqrt(((x1-x2)(x1-x2))+((y1-y2)(y1-y2))); } function drawVector2(x,y,i){ ctx.save(); ctx.lineWidth=10; ctx.lineCap="butt"; ctx.strokeStyle="rgb(60,60,60)" ctx.translate(300,300); if(i<0){ ctx.scale(1.8+Math.sin(frameCount/20)/7,1.8+Math.sin(frameCount/20)/7); }else{ ctx.scale(i,i); } ctx.translate(-300,-300) var mo=Math.sqrt(xx+yy); x=x/mo; y=y/mo; ctx.lineWidth=10; ctx.beginPath(); ctx.moveTo(300,300); ctx.lineTo(300+x(40),300+y(40)); ctx.stroke(); for(var i=0;i<10;i++){ ctx.lineWidth=20-i2; ctx.beginPath(); ctx.moveTo(300+x(40),300+y(40)); ctx.lineTo(300+x(40+i2),300+y(40+i2)); ctx.stroke(); } ctx.restore(); return {x:x,y:y}; } function drawVector(x,y){ ctx.lineWidth=3; ctx.lineCap="butt"; ctx.strokeStyle="rgb(20,20,20)" var mo=Math.sqrt(xx+yy); x=x/mo; y=y/mo; for(var i=0;i<10;i++){ ctx.beginPath(); ctx.moveTo(300,300); ctx.lineWidth=5-i/2; ctx.lineTo(300+x(30+i4),300+y(30+i4)); ctx.stroke(); } } var rands=[]; for(var i=0;i<500;i++){ rands.push(Math.random()) } class npc{ constructor(x,y,character,dialogue){ this.x=x; this.y=y this.c=character; this.d=dialogue; this.dc=0; } draw(){ ctx.save(); ctx.translate(-camlx2.75+this.x2.75,-camly2.75+this.y2.75); this.facingl-=(this.facingl-this.facing)/4; ctx.font="86px Noto Sans Math" ctx.fillStyle="rgb(0,0,0)"; ctx.fillText(this.c,327,295); if(distance(player.x-5,player.y,this.x,this.y)<20){ player.yv=0; if(player.y>this.y){ player.y=this.y+2; }else{ player.y=this.y-12; } player.xv/=1.3; if(this.dc+1<this.d.length){ ctx.fillStyle="rgb(48, 97, 60)" ctx.fillRect(220,100,200,100); ctx.fillStyle="rgb(135, 135, 135)" ctx.beginPath(); ctx.moveTo(220,100); ctx.lineTo(220+200,100); ctx.lineTo(220+200+10,100-10); ctx.lineTo(220-10,100-10); ctx.fill(); ctx.fillStyle="rgb(105, 105, 105)" ctx.beginPath(); ctx.moveTo(220+200,100); ctx.lineTo(220+200+10,100-10); ctx.lineTo(220+200+10,100+100+10); ctx.lineTo(220+200,100+100); ctx.fill(); ctx.fillStyle="rgb(135, 135, 135)" ctx.beginPath(); ctx.moveTo(220+200+10,100+100+10); ctx.lineTo(220+200,100+100); ctx.lineTo(220,100+100); ctx.lineTo(220-10,100+100+10); ctx.fill(); ctx.fillStyle="rgb(171, 171, 171)" ctx.beginPath(); ctx.moveTo(220,100+100); ctx.lineTo(220-10,100+100+10); ctx.lineTo(220-10,100-10); ctx.lineTo(220,100); ctx.fill(); ctx.font="15px Lora"; ctx.fillText(this.d[this.dc],318,141); ctx.fillText(this.d[this.dc+1],318,159); ctx.font="10px Macondo"; ctx.fillText("Click to continue",318,194); if(clickToggle){ this.dc+=2; } }else{ if(!player.hasVector&&this.c=="𝑔"){ if(clickToggle){ player.hasVector=true; } ctx.save(); //{ ctx.translate(-camlx2.75+this.x2.75,-camly2.75+this.y2.75); ctx.scale(2,2); ctx.translate(-(-camlx2.75+this.x2.75)-170,-(-camly2.75+this.y2.75)); ctx.fillStyle="rgb(48, 97, 60)" ctx.fillRect(220,100,200,100); ctx.fillStyle="rgb(135, 135, 135)" ctx.beginPath(); ctx.moveTo(220,100); ctx.lineTo(220+200,100); ctx.lineTo(220+200+10,100-10); ctx.lineTo(220-10,100-10); ctx.fill(); ctx.fillStyle="rgb(105, 105, 105)" ctx.beginPath(); ctx.moveTo(220+200,100); ctx.lineTo(220+200+10,100-10); ctx.lineTo(220+200+10,100+100+10); ctx.lineTo(220+200,100+100); ctx.fill(); ctx.fillStyle="rgb(135, 135, 135)" ctx.beginPath(); ctx.moveTo(220+200+10,100+100+10); ctx.lineTo(220+200,100+100); ctx.lineTo(220,100+100); ctx.lineTo(220-10,100+100+10); ctx.fill(); ctx.fillStyle="rgb(171, 171, 171)" ctx.beginPath(); ctx.moveTo(220,100+100); ctx.lineTo(220-10,100+100+10); ctx.lineTo(220-10,100-10); ctx.lineTo(220,100); ctx.fill(); //} ctx.font="10px Macondo"; ctx.fillText("Click to continue",318,194); ctx.fillText("VECTOR LAUNCHER",318,114); ctx.translate(20,-140); ctx.fillStyle="rgb(212, 201, 42,0.1)" for(var i=0;i<50;i++){ var ang=rands[i]100+frameCount/80; ctx.beginPath(); ctx.moveTo(300,300) ctx.lineTo(300+Math.cos(ang)600,300+Math.sin(ang)600) ctx.lineTo(300+Math.cos(ang+0.3)600,300+Math.sin(ang+0.3)600) ctx.fill(); } ctx.translate(-50,0); drawVector2(1,-0.1,-1); ctx.restore(); } } }else{ this.dc=0; } ctx.restore(); } } class enemy{ constructor(x,y,type,b1,b2){ this.x=x; this.y=y if(type==="sigma"){ this.c="σ"; this.dir=1; this.b1=this.x+b120; this.b2=this.x+b220; }else if(type==="imaginary"){ this.c="𝑧"; this.b1=Math.abs(b165); this.goto={x:this.x,y:this.y}; } this.dead=false; } draw(){ if(!this.dead){ ctx.save(); if(distance(player.x-5,player.y,this.x,this.y)<10){ player.xv+=(0.8((player.x-5)-this.x)); player.yv+=(0.8((player.y)-this.y)); player.damaging=true; } if(this.c==="σ"){ ctx.translate(-camlx2.75+this.x2.75,-camly2.75+this.y2.75); ctx.scale(-this.dir,1); ctx.translate(-(-camlx2.75+this.x2.75)-(327(this.dir+1)),-(-camly2.75+this.y2.75)); ctx.translate(-camlx2.75+this.x2.75,-camly2.75+this.y2.75); this.x+=this.dir/1; if(this.x<this.b1\|\|this.x>this.b2){ this.dir=-1; } }else{ ctx.translate(-camlx2.75+this.x2.75,-camly2.75+this.y2.75); } ctx.font="86px Noto Sans Math" ctx.fillStyle="rgb(0,0,0)"; ctx.fillText(this.c,327,295); if(this.c==="𝑧"){ ctx.fillStyle="rgb(255,0,0,0.2)" ctx.beginPath(); ctx.ellipse(327,295,this.b1,this.b1,0,0,Math.PI2); ctx.fill(); this.x-=(this.x-this.goto.x)/20; this.y-=(this.y-this.goto.y)/20; if(frameCount%100===1){ if(distance(player.x-5,player.y,this.x,this.y)<this.b1/2-10){ this.goto.x=player.x; this.goto.y=player.y; } } } ctx.restore(); } } } var level = 0; var npcs=[]; var enemies=[]; var levels = [ [ '...........................................................................................................................', '...........................................................................................................................', '...........................................................................................................................', '...........................................................................................................................', '...........................................................................................................................', '..............................................................................bbbbbbbb.....................................', '............................................................................bbb......b.....................................', '................................................................bbbbbbbbbbbb.........b.....................................', '......................................................bbbbbbbbbbb...b............v...b.....................................', '...............................................bbbbbbbbb....b...b..bbb..b....bbbbbbb.b.....................................', '..............................................b...v.........b...b...bb....s.bb.......b.....................................', '..............................................b...........b...s...b.b........b......bbbb...................................', '..............................................bb....l....bbbbbbbbbb.bb.......b.....s...b...................................', '..............................................b.....v......b......b...b.v...bbbb...s...b...................................', '..............................................b............b......b...bbb.......b...s...b..................................', '..............................................b...........lbb.b..zb.....v......b...s...b...................................', '..............................................bb...........b..b...bv....v.....2b...s...b...................................', '..............................................b.....v......b.bb...bb...b....bbb...s...b....................................', '........b.....................................bbbbbbb......b..bbb....bb....bb......s...b...................................', '........bb.............................bbbbbbbbbbbbbbbl....bb.b..bbbb.......b..............................................', '...bbbbbbbb...................................b.....b......b.......bb.......b..............................................', '........bb................................................bb.......bb...z...b..............................................', '........b.................................................bb.......bb......bb..............................................', '.P...............................................1....bbbbbb....s......s...bb....3.........................................', 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' ] ]; //Draw the Levels var drawLevel = function(){ blocks = []; enemies=[]; npcs=[]; 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(j20,i20,'block',{x:j,y:i})); break; case 'P': player.x = j20; player.y = i20; break; case '@': blocks.push(new Block(j20,i20,'portal',{x:j,y:i})); break; case 'l': blocks.push(new Block(j20,i20,'ledge',{x:j,y:i})); break; case 'v': blocks.push(new Block(j20,i20,'spike',{x:j,y:i})); break; case '1': npcs.push(new npc(j20,i20,"𝑖",["Hey, you're","new here!","Welcome to the edge","of the Graph."," A lot of unused","symbols are left here","when equations are","deleted by the USER.","We just kinda get to","chillax down here.", "It's kinda","lonely though...","Anyways, I cant help but","notice you're an X,","one of the most","used math symbols!", "You shouldn't be","down here.","Oh, by the way,","Space to Dash","You will","need it."])); break; case '2': npcs.push(new npc(j20,i20,"𝑔",["Oh, hey!","Our new symbol!","I have already heard","about you from i.","Word travels","fast here.","In only a few minutes, ","you have already","made it as far","as I ever got.","This maze is","very daunting.","I feel great","things in you,","You might be","able to escape."," "," ","About","\"e\"?","e is one of","the most famous","symbols in math.","e turned evil","from all the fame","and glory.","You must stop him,","he plans to break","out of DESMOS","and take over","the internet.","e was here only","a few days ago, ","gathering an army","of symbols.","Well, I only","hope that you can","stop him,","save DESMOS","and all that jazz.","Here, take this","weapon.","I never got much","use out of it.","Aim it at","the SIGMAS","It will destroy","them, but not","those floating","imaginary Z's.","Good","Luck!"])); break; case '3': npcs.push(new npc(j20,i20,"👍",["Hey! If","Youre here,","You must have made","it past all those","scary","enemies!","Well, this game is","Only in it's","beta stages,","and is currently","being worked on","right now!","Let the devs know","what you think","and what to add","in the T&T.","That's the end,","for know.","Go subscibe for","a notificatoin when","the full game","is released :)"])); break; case 's': enemies.push(new enemy(j20,i20,"sigma",-3,3)); break; case 'z': enemies.push(new enemy(j20,i20,"imaginary",3)); break; } } } }; drawLevel(); //The Scenes var camlx2; var camly2; class dust{ constructor(x,y,z){ this.x=x; this.y=y; this.z=z; this.c=Math.round(Math.random()10); this.r=(Math.random()-0.5)8; } draw(){ if(-camlx(2.75+this.z)+this.x(2.75+this.z)<600&&-camlx(2.75+this.z)+this.x(2.75+this.z)>0){ ctx.save(); var dx=-camlx(2.75+this.z)+this.x(2.75+this.z) var dy=(-camly(2.75+this.z)+(this.y+performance.now()/100)(2.75+this.z))%600-10 ctx.translate(dx,dy); ctx.rotate(this.r); ctx.translate(-dx,-dy) this.facingl-=(this.facingl-this.facing)/4; ctx.font=(26+this.z10)+"px Lora" ctx.fillStyle="rgb(255, 255, 255,0.5)"; ctx.fillText(this.c,dx,dy); ctx.restore(); } } } var dusts=[]; for(var i=0;i<100;i++){ dusts.push(new dust(1100+Math.random()1400,0+Math.random()6000,Math.random()4-1)); } function drawGame(){ ctx.fillStyle="rgb(255,255,255)" ctx.fillRect(0,0,600,600); camlx+=(player.x-camlx)/5; camly+=(player.y-camly)/5; camera={x:camlx/2.15+150,y:camly/2.15+273,z:20,zoom:6} drawDesmosTab([0,0,0,0,0]); for(var i = 0; i < dusts.length; i ++){ if(dusts[i].z<1){ dusts[i].draw(); } } drawLevelLines(); for(var i = 0; i < dusts.length; i ++){ if(dusts[i].z>1){ dusts[i].draw(); } } ctx.save(); if (!dead){ player.draw(); player.move(); } for(var i = 0; i < npcs.length; i ++){ npcs[i].draw(); } for(var i = 0; i < enemies.length; i ++){ enemies[i].draw(); } for(var i = 0; i < bullets.length; i ++){ bullets[i].update(); bullets[i].draw(); if(bullets[i].kill){ bullets.splice(i, 1); } } if (dead){ deathTime--; if (deathTime <= 0){ drawLevel(); deathTime = 20; dead = false; camX = 200; player.damaging=false; player.damageCooldown=0; player.health=3; } } for(var i = 0; i < blocks.length; i ++){ // blocks[i].display(); if(blocks[i].type === 'block'\|\|blocks[i].type === 'ledge'){ player.collide(blocks[i]); } if(blocks[i].checkColl(player)){ switch(blocks[i].type){ case 'portal': level++; drawLevel(); break; case 'spike': if(!dead){ player.xv+=(0.3((player.x-5)-blocks[i].x)); player.yv+=(0.3((player.y)-blocks[i].y)); } player.damaging=true; break; } }else{ // player.damaging=false; } } ctx.fillStyle="rgb(0,0,0)" if (player.y > 3000){ drawLevel(); } ctx.restore(); } function drawDesmosLine(x1,y1,x2,y2){ ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2) var dx=return3D2("x",x2); var dy=return3D2("y",y2); ctx.lineTo(x2-dx(camera.z(0.2/camera.zoom)),y2-dy(camera.z(0.2/camera.zoom))) var dx=return3D2("x",x1); var dy=return3D2("y",y1); ctx.lineTo(x1-dx(camera.z(0.2/camera.zoom)),y1-dy(camera.z(0.2/camera.zoom))) ctx.lineTo(x1,y1); ctx.fill(); } function drawDesmosQuad(x1,y1,x2,y2,x3,y3,x4,y4){ ctx.beginPath(); ctx.moveTo(x1-0.1,y1-0.1) ctx.lineTo(x2+0.1,y2-0.1) ctx.lineTo(x3+0.1,y3+0.1) ctx.lineTo(x4-0.1,y4+0.1) ctx.lineTo(x1-0.1,y1-0.1); // ctx.stroke(); ctx.fill(); } var cePos={x:0,y:0,xv:0,yv:0}; var xPos={x:36,y:144,xv:0,yv:0} var ang=0; function lore1(){ l1Time++; ctx.fillStyle="rgb(0, 0, 0)" ctx.fillRect(0,0,600,600); ctx.fillStyle="rgb(200,200,200)" if(l1Time<300){ ctx.font="50px Quicksand" ctx.fillText("Math Class: 1st Block",300,300); } if(l1Time>300&&l1Time<600){ ctx.font="40px Quicksand" ctx.fillText("You are learning about Euler's",300,270); ctx.fillText("number, \"e\"",300,330); } if(l1Time<50){ ctx.fillStyle="rgb(0,0,0,"+(lerp(1,0,l1Time/50))+")" ctx.fillRect(0,0,600,600); }else if(l1Time>250&&l1Time<300){ ctx.fillStyle="rgb(0,0,0,"+(lerp(0,1,(l1Time-250)/50))+")" ctx.fillRect(0,0,600,600); }else if(l1Time>300&&l1Time<350){ ctx.fillStyle="rgb(0,0,0,"+(lerp(1,0,(l1Time-300)/50))+")" ctx.fillRect(0,0,600,600); }else if(l1Time>550&&l1Time<600){ ctx.fillStyle="rgb(0,0,0,"+(lerp(0,1,(l1Time-550)/50))+")" ctx.fillRect(0,0,600,600); }else if(l1Time>600){ scene="cutscene1"; } } function drawE(x,y){ ctx.save(); ctx.translate(x,y); ctx.font="15px Noto Sans Math" ctx.textAlign="center" ctx.fillText("𝑒",30,153) if(c1Time>1000){ ctx.fillStyle="rgb(255,0,0)" ctx.beginPath(); ctx.ellipse(29.0-0.3,148,1.3+0.1,slerp(0,0.5,(c1Time-1000)/30)+0.1,0.2,0,Math.PI2); ctx.fill(); ctx.beginPath(); ctx.ellipse(31.4+0.3,148,1.3+0.1,slerp(0,0.5,(c1Time-1000)/30)+0.1,-0.4,0,Math.PI2); ctx.fill(); } ctx.restore(); } function drawFirstCutscene(){ c1Time++; if(c1Time<800){ camera={x:300,y:300,zoom:1,z:0} }else if(c1Time>800&&c1Time<900){ var tl=(c1Time-800)/100; camera={x:slerp(300,20,tl),y:slerp(300,130,tl),zoom:slerp(1,4,tl),z:slerp(0,20,tl)} } if(c1Time<160){ drawDesmosTab([0,1,0,0,0,0]); }else{ drawDesmosTab([1,0,0,0,0,0]); } drawHorizonLine(); ctx.font="80px Quicksand" ctx.save(); ctx.translate(300,300); ctx.scale(camera.zoom,camera.zoom); ctx.translate(-camera.x,-camera.y); ctx.fillStyle="rgb(0,0,0)" if(c1Time<300&&c1Time>200){ if(c1Time%40<20){ ctx.fillRect(25,140,1,17); } } if(c1Time===1050){ cePos.yv=-2; } if(c1Time>1050&&c1Time<1095){ cePos.yv+=0.1; cePos.x+=cePos.xv; cePos.y+=cePos.yv; } if(c1Time>300){ drawE(cePos.x,cePos.y); if(c1Time%40<20&&c1Time<350){ ctx.fillRect(35,140,1,17); } } if(c1Time>1550){ scene="game"; } if(c1Time>1100){ camera.x-=(camera.x-xPos.x)/10; camera.y-=(camera.y-xPos.y)/10; } if(c1Time>1150&&c1Time<1200){ ctx.lineWidth=1; ctx.strokeStyle="rgb(212, 49, 139)" ctx.beginPath(); ctx.moveTo(29.0-0.3+cePos.x,148+cePos.y); ctx.lineTo(xPos.x-0.4,xPos.y-3); ctx.moveTo(31.4+0.3+cePos.x,148+cePos.y); ctx.lineTo(xPos.x-0.4,xPos.y-3); ctx.stroke(); } if(c1Time===1149){ xPos.xv=5.0/5; xPos.yv=-12.0/5; } if(c1Time>1149){ xPos.x+=xPos.xv; xPos.y+=xPos.yv; xPos.yv+=0.05; ang+=0.2; if(xPos.y>450){ xPos.y=450; xPos.yv=-0.2; xPos.xv=0.9; } if(xPos.y>400){ ang-=0.2; } } ctx.fillStyle="rgb(0,0,0)" if(c1Time>350){ ctx.save(); ctx.translate((xPos.x-0.4),(xPos.y-3)); ctx.rotate(ang); ctx.translate(-(xPos.x-0.4),-(xPos.y-3)); ctx.font="9px Noto Sans Math" ctx.fillText("𝑥",xPos.x,xPos.y); ctx.restore(); if(c1Time%40<20&&c1Time<550){ ctx.fillRect(40,140,1,17); } } if(c1Time>50){ mousePos.x=slerp(340,120,(c1Time-50)/100) mousePos.y=slerp(390,130,(c1Time-50)/100) } if(c1Time<550){ ctx.fillStyle="rgb(0,0,0)"; ctx.fillRect(mousePos.x-1, mousePos.y-10+20, 2, 20); ctx.fillRect(mousePos.x-10, mousePos.y-1+20, 20, 2); } if(c1Time>550&&c1Time<650){ ctx.font="80px Quicksand" ctx.fillText("Bell rings",300,300); } if(c1Time>650&&c1Time<750){ ctx.font="80px Quicksand" ctx.fillText("Shuts Laptop",300,300); } if(c1Time>1400){ ctx.fillStyle="rgb(255,255,255,"+(lerp(0,1,(c1Time-1400)/150))+")" ctx.fillRect(0,0,600,600); } ctx.restore(); ctx.fillStyle="rgb(0,0,0,"+(lerp(1,0,c1Time/50))+")" ctx.fillRect(0,0,600,600); } function drawDesmosTab(lit){ ctx.save(); ctx.fillStyle="rgb(255, 255, 255)" ctx.translate(300,300); ctx.scale(camera.zoom(1-(camera.z/150)),camera.zoom(1-camera.z/150)); ctx.translate(-camera.x,-camera.y); ctx.fillRect(0,0,600,600); var d=-return3D2("y",450); ctx.fillStyle="rgb(0,0,0)" ctx.fillRect(0,0,600,100); ctx.fillRect(0,500,600,100); ctx.fillStyle="rgb(243,243,243)" ctx.fillRect(0,100,150,30); ctx.lineCap = "round"; for(var i=0;i<5;i++){ if(lit[i]===1){ ctx.fillStyle="rgb(106,147,210)" }else{ ctx.fillStyle="rgb(243,243,243)" } ctx.fillRect(0,131+i35,20,34); ctx.fillStyle="rgb(90,90,90)" ctx.font="7px Arial"; ctx.fillText(i+1,4.5,140+i35); if(lit[i]===1\|\|lit[i-1]===1){ ctx.fillStyle="rgb(106,147,210)" }else{ ctx.fillStyle="rgb(203,203,203)" } d=return3D("y",130+i35); ctx.fillRect(0,130+i35,150,d); if(i===4){ d=return3D("y",165+i35); ctx.fillRect(0,165+i35,150,d); } ctx.fillStyle="rgb(243,243,243)" ctx.lineWidth=3. ctx.strokeStyle="rgb(204,204,204)" ctx.beginPath(); ctx.moveTo(145,135+i35); ctx.lineTo(145-10,135+i35+10); ctx.moveTo(145-10,135+i35); ctx.lineTo(145,135+i35+10); ctx.stroke(); } d=0.8; if(camera.x<700){ for(var i=0;i<5;i++){ ctx.fillStyle="rgb(134,134,134,"+((5-i)/5)+")" ctx.fillRect(150+(i/2)d,100,0.5d,400); } ctx.fillStyle="rgb(0,0,0)" d=return3D("x",375); ctx.fillRect(375,100,d,400); d=return3D("y",300); ctx.fillRect(150,300,450,d); for(var i=1;i<12;i++){ d=return3D("x",150+i37.5); ctx.fillRect(150+i37.5,100,d/4,400); } for(var i=1;i<124;i++){ d=return3D("x",150+i37.5/4); ctx.fillRect(150+i37.5/4,100,d/8,400); } for(var i=1;i<14;i++){ d=return3D("y",0+i37.5); ctx.fillRect(150,0+i37.5,450,d/4); } for(var i=1;i<144;i++){ d=return3D("y",0+i37.5/4); ctx.fillRect(150,0+i37.5/4,450,d/8); } } if(camera.x>500&&camera.x<800){ const grd = ctx.createLinearGradient(600,0,700,0); grd.addColorStop(0, "rgb(255,255,255)"); grd.addColorStop(1, "rgb(90,90,90)"); ctx.fillStyle = grd; ctx.fillRect(600,0,100,800); } ctx.fillStyle="rgb(90,90,90)" ctx.fillRect(699.9,0,6000,800); ctx.restore(); } function drawHorizonLine(){ ctx.save(); ctx.translate(300,300); ctx.scale(camera.zoom,camera.zoom); ctx.translate(-camera.x,-camera.y); ctx.lineWidth=0.5; ctx.strokeStyle="rgb(199,68,68)" ctx.fillStyle="rgb(199,68,68)" drawDesmosLine(150,450,600,450); ctx.restore(); } function drawLevelLines(){ ctx.save(); ctx.translate(300,300); ctx.scale(camera.zoom,camera.zoom); ctx.translate(-camera.x,-camera.y); ctx.lineWidth=1; ctx.lineCap="round"; for(var i = 0; i < blocks.length; i ++){ var block={x:0,y:0,w:0,h:0,type:"b"}; block.x=blocks[i].x; block.y=blocks[i].y; block.w=blocks[i].w; block.h=blocks[i].h; block.type=blocks[i].type; if(block.type=="block"\|\|block.type=="ledge"){ block.x/=2.15; block.y/=2.15; block.w/=2.15 block.h/=2.15 block.x+=150 block.y+=264; if(block.x>camera.x-90&&block.x<camera.x+90&&block.y>camera.y-90&&block.y<camera.y+90){ var dx=block.x; var dy=block.y; dx=return3D2("x",dx); dy=return3D2("y",dy); var light=(Math.sqrt(dxdx+dydy)); light=(4); light-=80; if(camera.x>600){ light=Math.min(((camera.x-600)/50)+1,5); light-=Math.max(-(camera.x-600)2,-250); } ctx.strokeStyle="rgb("+(95-light-30)+","+(66-light-30)+","+(166-light-30)+")" ctx.fillStyle="rgb("+(95-light-30)+","+(66-light-30)+","+(166-light-30)+")" var asdf=levels[level][Math.max(blocks[i].info.y-1,0)].charAt(Math.max(blocks[i].info.x,0)) if(!(asdf=="b")){ drawDesmosLine(block.x,block.y,block.x+block.w,block.y); } var asdf=levels[level][Math.min(blocks[i].info.y,levels[level].length-1)].charAt(blocks[i].info.x+1) if(!(asdf=="b")){ drawDesmosLine(block.x+block.w,block.y,block.x+block.w,block.y+block.h); } var asdf=levels[level][Math.min(blocks[i].info.y+1,levels[level].length-1)].charAt(blocks[i].info.x) if(!(asdf=="b")){ drawDesmosLine(block.x+block.w,block.y+block.h,block.x,block.y+block.h); } var asdf=levels[level][Math.min(blocks[i].info.y,levels[level].length-1)].charAt(blocks[i].info.x-1) if(!(asdf=="b")){ drawDesmosLine(block.x,block.y+block.h,block.x,block.y); } }} } for(var i = 0; i < blocks.length; i ++){ var block={x:0,y:0,w:0,h:0,type:"b"}; block.x=blocks[i].x; block.y=blocks[i].y; block.w=blocks[i].w; block.h=blocks[i].h; block.type=blocks[i].type; block.x/=2.15; block.y/=2.15; block.w/=2.15 block.h/=2.15 block.x+=150 block.y+=264; if(block.type=="block"\|\|block.type==="ledge"){ if(block.x>camera.x-90&&block.x<camera.x+90&&block.y>camera.y-90&&block.y<camera.y+90){ var dx=block.x; var dy=block.y; dx=return3D2("x",dx); dy=return3D2("y",dy); var light=(Math.sqrt(dxdx+dydy)); light=(4); light-=80; if(camera.x>600){ light=Math.min(((camera.x-600)/50)+1,5); light-=Math.max(-(camera.x-600)2,-250); } ctx.strokeStyle="rgb("+(250-light-30)+","+(126-light-30)+","+(26-light-30)+")" ctx.fillStyle="rgb("+(22-light-30)+","+(95-light-30)+","+(27-light-30)+")" drawDesmosQuad(block.x,block.y,block.x+block.w,block.y,block.x+block.w,block.y+block.h,block.x,block.y+block.h); } }else if(block.type==="spike"){ ctx.font="15px Noto Sans Math" var k=0; var asdf=levels[level][Math.max(blocks[i].info.y+1,0)].charAt(Math.max(blocks[i].info.x,0)) if((asdf=="b")){ k=Math.PI; } ctx.save(); ctx.translate(block.x+1,block.y+2.3); ctx.rotate(k); ctx.translate(-block.x+1,-block.y+2.3); ctx.fillStyle="rgb(204, 38, 49)" if(k===0){ ctx.fillText("𝛁",block.x+2,block.y+7.0); }else{ ctx.fillText("𝛁",block.x-5,block.y+1.2); } ctx.restore(); } } ctx.restore(); } function drawMenu(){ ctx.save(); ctx.translate(-300,-300); var ar=[0,0,0,0,0]; if(mouseY>130&&mouseY<165&&mouseX<150){ ar[0]=1; if(clicked){ scene="lore1"; } } if(mouseY>130+35&&mouseY<165+35&&mouseX<150){ ar[1]=1; } if(mouseY>130+35+35&&mouseY<165+35+35&&mouseX<150){ ar[2]=1; } drawDesmosTab(ar); ctx.restore(); ctx.font="20px Lora"; ctx.fillText("PLAY",50,154); ctx.fillStyle="rgb(20,129,66)" ctx.beginPath(); ctx.ellipse(375,300,150,150,0,0,Math.PI2); ctx.fill(); ctx.fillStyle="rgb(107, 147, 210)" ctx.lineCap = "round"; ctx.lineWidth=12; ctx.beginPath(); for(var i=-13;i<=13;i++){ ctx.lineTo(i7+375,-ii+370) } ctx.stroke(); ctx.beginPath(); for(var i=-6;i<=6;i+=.2){ ctx.lineTo(i22+375,Math.sin(i)20+320) } ctx.stroke(); ctx.font="60px Quicksand"; ctx.lineWidth=8; ctx.strokeStyle="rgb(255,255,255)" ctx.strokeText("desmos",375,280); ctx.fillText("desmos",375,280); ctx.font="60px Bebas Neue"; ctx.fillStyle="rgb(0,0,0)" ctx.strokeStyle="rgb(190,190,190)" ctx.strokeText("THE GAME",375,410); ctx.fillText("THE GAME",375,410); ctx.strokeStyle="rgb(255, 255, 255)" if(keys.n&keys.m){ ctx.save(); ctx.translate(374,292); ctx.scale(2,2); ctx.rotate(-0.1); ctx.translate(-412,-300); ctx.fillStyle="rgb(233,235,235)" ctx.fillRect(0,0,600,600); ctx.font="20px Lora"; ctx.fillText("PLAY",50,154); ctx.fillStyle="rgb(39, 176, 96)" ctx.beginPath(); ctx.ellipse(375,300,150,150,0,0,Math.PI2); ctx.fill(); ctx.fillStyle="rgb(107, 147, 210)" ctx.lineCap = "round"; ctx.lineWidth=12; ctx.beginPath(); for(var i=-13;i<=13;i++){ ctx.lineTo(i7+375,-ii+370) } ctx.stroke(); ctx.beginPath(); for(var i=-6;i<=6;i+=.2){ ctx.lineTo(i22+375,Math.sin(i)20+320) } ctx.stroke(); ctx.font="60px Quicksand"; ctx.lineWidth=8; ctx.strokeStyle="rgb(255,255,255)" ctx.strokeText("desmos",375,280); ctx.fillText("desmos",375,280); ctx.font="60px Bebas Neue"; ctx.fillStyle="rgb(0,0,0)" ctx.strokeStyle="rgb(190,190,190)" ctx.strokeText("THE GAME",375,410); ctx.fillText("THE GAME",375,410); ctx.strokeStyle="rgb(255, 255, 255)" ctx.restore(); } } ctx.lineJoin = "round"; var scene="menu"; var now; var then = performance.now(); var fps = 60; var delta; var frameCount=0; var interval = 1000 / fps; function draw() { window.requestAnimationFrame(draw); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); ctx.textAlign="center" frameCount++; ctx.fillStyle="rgb(0,0,0)" ctx.fillRect(0,0,600,600); if(scene==="lore1"){ lore1(); }else if(scene==="cutscene1"){ drawFirstCutscene(); }else if(scene==="game"){ drawGame(); }else if(scene==="menu"){ drawMenu(); } clickToggle=false; } } draw(); //<script> </script> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKvY8e2VCww
Votes	147
Spin-Offs	24
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	23 days ago, 1734464232011
Updated	23 days ago, 1734464281027
Source Deleted	unknown