(()=>{ var asimg; var parts=[]; var offset=10; function setup(){ asimg = document.getElementsByTagName('img')[0]; } function draw(skip){ if([35,23,74,35,92].indexOf(Date.now()%100)>=0&&parts.length<100){ let v=(Math.random()>.5) let sc=Math.random()+.5; let s=100*sc; let x=v?((Math.random()>.5)?-s:cw+s):Math.random()*cw; let y=!v?((Math.random()>.5)?-s:ch+s):Math.random()*ch; let atr=new Sprite(x,y,Math.random(),100,rint(2,9),Math.random()*(2*Math.PI),{name:'circle'},asimg); atr.scale(sc); parts.push(atr); } collide(cw,ch,parts,(a,b)=>{ //parts.splice(parts.indexOf(a),1); //parts.splice(parts.indexOf(b),1); }); for(let a of parts){ a.draw(ctx,skip); if(a.x<-a.w-offset||a.y<-a.h-offset||a.x>cw+a.w+offset||a.y>ch+a.h+offset){ parts.splice(parts.indexOf(a),1); } } } function rint(a,b){ if(b==undefined){ return Math.floor(Math.random()*a); }else{ return Math.floor(Math.random()*(b-a))+a; } } //==================================================== var canvas; var ctx; var targetfps; var intv; var start; var past; var cw; var ch; var drawfps = true; var plog = {x:0}; var l; var log = new Proxy(plog, { set: function(obj,prop,value){ obj[prop]=value; l.innerHTML = Math.floor(obj.x); return true; } }) window.onload = function(){ canvas = document.getElementsByTagName('canvas')[0]; ctx = canvas.getContext('2d'); cw = canvas.width; ch = canvas.height; targetfps= 60; setup(); post_setup(); x=cw/2; l=document.getElementById('l'); } function post_setup(){ intv = 1000/targetfps; window.frate = intv; start = past = Date.now(); animate(); } function animate(){ let now = Date.now(); let delta = now - past; if(delta > intv){ past = now; let frameskip = 0; if(delta/intv < intv) frameskip = (delta/intv); ctx.clearRect(0,0,cw,ch); if(frameskip)log.x=frameskip draw(frameskip); } if(drawfps){ ctx.save(); ctx.fillStyle = 'white'; ctx.fillText("fps: "+(1000/(now-this._past)),20,20); this._past = now; ctx.restore(); } requestAnimationFrame(animate); } })(); class Sprite{ constructor(x,y,av,lv,srot,rot,shape,img){ this.x=x; this.y=y; this.av=av/(1000/60); this.lv=parseFloat(lv); this.srot=srot; this.rot=rot; this.img=img; this.w=100; this.h=100; this.shape=shape; switch(shape.name){ case 'box': this.collider = new SAT.Box(new SAT.Vector(x+this.w,y),this.w,this.h); break; case 'circle': this.collider = new SAT.Circle(new SAT.Vector(x+this.w,y),this.w/2); break; } } scale(s){ this.w*=s; this.h*=s; this.collider.w=this.w; this.collider.h=this.h; } draw(ctx,skip){ skip++; ctx.save(); this.srot+=(this.av*skip); let dv=this.lv*(frate/1000.0); this.x+=dv*skip*Math.cos(this.rot); this.y+=dv*skip*Math.sin(this.rot); this.collider.pos = new SAT.Vector(this.x+this.w,this.y); ctx.fillStyle = "red"; ctx.beginPath(); ctx.translate(this.x-(this.w/2), this.y-(this.h/2)); ctx.rotate(this.srot*.1); //ctx.rect(-(this.w/2),-(this.h/2),this.w,this.h); ctx.closePath(); ctx.fill(); ctx.drawImage(this.img,-(this.w/2),-(this.h/2),this.w,this.h); ctx.restore(); } } function collide(dw,dh,sprites,cb){ let w = dw/2; let h = dh/2; let sides = { tl:{x:0,y:0,w:w,h:h}, tr:{x:w,y:0,w:dw,h:h}, bl:{x:0,y:h,w:w,h:dh}, br:{x:w,y:h,w:dw,h:dh} }; let collider = {tl:[],tr:[],bl:[],br:[]}; for(let sprite of sprites){ let top = sprite.y; let left = sprite.x; let bottom = sprite.y+sprite.h; let right = sprite.x+sprite.w; if(topsides.tr.x) collider.tr.push(sprite) if(top>sides.bl.y && leftsides.br.y && left>sides.br.x) collider.tr.push(sprite); } for(let c of Object.keys(collider)){ for(let i=0;i

passing asteroids