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 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; } } 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()); 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);

game mechanics