let canvas = document.getElementById("myCanvas"); let context = canvas.getContext("2d"); function distance(obj1,obj2){ let dist2 = Math.pow(obj1.x - obj2.x,2) + Math.pow(obj1.y - obj2.y,2); let dist = Math.pow(dist2,1/2); return dist; } function difference(obj,array){ let distances = []; for(let k=0; k this.Y + this.h){ this.vy = -this.vy*0; this.y = this.Y + this.h; } if(this.x < this.X){ this.vx = -this.vx*0; this.x = this.X; } if(this.x > this.X + 1*this.w/3 && this.x < this.X + (3/2)*this.w/3 && this.y === this.Y){ this.vx = -this.vx*0; this.x = this.X + 1*this.w/3; } if(this.x < this.X + 2*this.w/3 && this.x > this.X + (3/2)*this.w/3 && this.y === this.Y){ this.vx = -this.vx*0; this.x = this.X + 2*this.w/3; } if(this.x > this.X + this.w){ this.vx = -this.vx*0; this.x = this.X + this.w; } } render(){ context.save(); context.beginPath(); context.rect(this.X,this.Y,this.w/3,this.h); //context.fillStyle = "red"; //context.fill(); context.strokeStyle = this.color3; context.lineWidth = 5; context.stroke(); context.restore(); context.save(); context.beginPath(); context.rect(this.X + 2*this.w/3,this.Y,this.w/3,this.h); //context.fillStyle = "red"; //context.fill(); context.strokeStyle = this.color3; context.lineWidth = 5; context.stroke(); context.restore(); context.save(); context.beginPath(); context.moveTo(this.X + 1*this.w/3,this.Y + this.h); context.lineTo(this.X + 2*this.w/3,this.Y + this.h) //context.fillStyle = "red"; //context.fill(); context.strokeStyle = this.color3; context.lineWidth = 5; context.stroke(); context.restore(); let d = distances(this,nodes); for(let i=0; i this.Y + this.h){ this.vy = -this.vy*0; this.y = this.Y + this.h; } if(this.x < this.X){ this.vx = -this.vx*0; this.x = this.X; } if(this.x > this.X + this.w){ this.vx = -this.vx*0; this.x = this.X + this.w; } } render(){ context.save(); context.beginPath(); context.rect(this.X,this.Y,this.w,this.h); //context.fillStyle = "red"; //context.fill(); context.strokeStyle = this.color3; context.lineWidth = 5; context.stroke(); context.restore(); let d = distances(this,nodes); for(let i=0; i collision(this,obj))){ this.flag = true; } if(this.flag){ this.t += this.vt; } if(this.t > 200 || this.t < 0){ this.vt = -this.vt; } if(this.t < 0){ this.flag = false; this.t = 0; } } render(){ context.save(); context.beginPath(); context.rect(this.x -this.w/2 -this.t,this.y -this.h/2 -this.t,this.w +2*this.t,this.h +2*this.t); context.stroke(); context.restore(); } } class GongCount { constructor(x,y,t,flag,w,h){ this.x = x; this.y = y; this.t = t; this.flag = flag; this.w = w; this.h = h; } update(){ let data = nodes; //var indexs = []; data.forEach((value,index) => { if (collision(this,value) && counter[index] === 0) { counter[index] = 1; this.flag += 1; } if (!collision(this,value)) { counter[index] = 0; } }) console.log(this.flag); } render(){ context.save(); context.beginPath(); context.rect(this.x -this.w/2 -this.t,this.y -this.h/2 -this.t,this.w +2*this.t,this.h +2*this.t); context.stroke(); context.restore(); context.save(); context.font = '20pt Arial'; context.fillText(this.flag,this.x-10,this.y+10); context.restore(); } } class Node { constructor(x,y,vx,vy,color1,color2,R,px,py,fx,fy,rad){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.R = R; this.px = px; this.py = py; this.fx = fx; this.fy = fy; this.rad = rad; this.color1 = color1; this.color2 = color2; } update(){ this.x += this.vx; this.y += this.vy; let d = distances(this,lattice); for(let i=0; i 800 || this.x < 0){ this.vx = -this.vx; } if(this.y > 800 || this.y < 0){ this.vy = -this.vy; } } render(){ let d = distances(this,lattice); for(let i=0; i obj.update()); pulleys.forEach((obj) => obj.render()); lattice.forEach((obj) => obj.update()); lattice.forEach((obj) => obj.render()); nodes.forEach((obj) => obj.update()); nodes.forEach((obj) => obj.render()); block.forEach((obj) => obj.update()); block.forEach((obj) => obj.render()); gong.forEach((obj) => obj.update()); gong.forEach((obj) => obj.render()); window.requestAnimationFrame(loop); } window.requestAnimationFrame(loop);