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 collision(obj1, obj2) { let flag; if ( Math.abs(obj1.x - obj2.x) < obj1.w / 2 + obj2.w / 2 && Math.abs(obj1.y - obj2.y) < obj1.h / 2 + obj2.h / 2 ) { flag = false; } else { flag = true; } return flag; } const grass = new Path2D(); grass.moveTo(0,100); grass.lineTo(100,0); grass.lineTo(100,100); grass.lineTo(200,0); grass.lineTo(200,100); grass.closePath(); function draw_picture(path,color,x,y,r){ context.save(); context.fillStyle = color; context.translate(x,y); context.scale(r,r); context.fill(path); context.restore(); } class Coin { constructor(x,y,t,w,h,size){ this.x = x; this.y = y; this.t = t; this.w = w; this.h = h; this.size = size; } update(){ this.t += 1; this.w = this.size*Math.abs(Math.cos(this.t*Math.PI/180)); } render(){ context.save(); context.beginPath(); context.rect(this.x - this.w/2,this.y - this.h/2,this.w,this.h); context.fillStyle = "yellow"; context.fill(); context.restore(); } } class Explosion { constructor(x,y,t,vx,vy,w,h){ this.x = x; this.y = y; this.t = t; this.vx = vx; this.vy = vy; this.w = w; this.h = h; } update(){ this.x += this.vx; this.y += this.vy; if(reflects.some((obj) => !collision(this,obj))){ this.t += 1; } } render(){ context.save(); context.beginPath(); context.fillStyle = "red"; context.ellipse(this.x,this.y,this.w,this.h,0,0,Math.PI*2); context.fill(); context.restore(); context.save(); context.beginPath(); context.fillStyle = "red"; context.ellipse(this.x + this.t,this.y,10,10,0,0,Math.PI*2); context.fill(); context.restore(); } } class Reflected_Light { constructor(x,y,X,Y,t){ this.x = x; this.y = y; this.t = t; this.X = X; this.Y = Y; } update(){ this.t += 0.5; if(this.t > 20){ this.t = 0; let x = 100*Math.random(); let y = 100*Math.random(); this.x = this.X - 50 + x; this.y = this.Y - 50 + y; } } render(){ context.save(); context.beginPath(); context.moveTo(this.x,this.y); context.lineTo(this.x + this.t,this.y); context.strokeStyle = "skyblue"; context.lineWidth = 10; context.stroke(); context.restore(); context.save(); context.beginPath(); context.moveTo(this.x,this.y); context.lineTo(this.x - this.t,this.y); context.strokeStyle = "skyblue"; context.lineWidth = 10; context.stroke(); context.restore(); context.save(); context.beginPath(); context.moveTo(this.x,this.y); context.lineTo(this.x ,this.y - this.t); context.strokeStyle = "skyblue"; context.lineWidth = 10; context.stroke(); context.restore(); context.save(); context.beginPath(); context.moveTo(this.x,this.y); context.lineTo(this.x ,this.y + this.t); context.strokeStyle = "skyblue"; context.lineWidth = 10; context.stroke(); context.restore(); } } class Circle { constructor(x,y,vx,vy){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; } update(){ this.x += this.vx; this.y += this.vy; if(this.x > 800 || this.x < 0){ this.vx = -this.vx; } if(this.y > 800 || this.y < 0){ this.vy = -this.vy; } } render(){ context.save(); context.beginPath(); context.fillStyle = "white"; context.arc(this.x,this.y,50,0,Math.PI*2); context.fill(); context.restore(); } } class Pole { constructor(x,y,vx,vy){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; } update(){ this.x += this.vx; this.y += this.vy; if(this.x > 800 || this.x < 0){ this.vx = -this.vx; } if(this.y > 800 || this.y < 0){ this.vy = -this.vy; } } render(){ context.save(); context.beginPath(); context.fillStyle = "white"; context.rect(this.x,this.y,5,800); context.fill(); context.restore(); } } class Eye { constructor(x,y,vx,vy,t,vt,R,color,eye,eyelid,counter,open,close,half,index){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.t = t; this.vt = vt; this.R = R; this.color = color; this.eye = eye; this.eyelid = eyelid; this.counter = counter; this.open = open; this.close = close; this.half = half; this.index = index; this.flag = []; } update(){ this.x += this.vx; this.y += this.vy; this.t += this.vt; this.vy += 0.5; //Collision detection for(let i=0; i this.R*2){ this.flag[i] = 0; } } if(this.t > 50 || this.t < -50){ this.vt = -this.vt; } if(this.x > 800 || this.x < 0){ this.x += -this.vx; this.vx = -this.vx*(0.5); } if(this.y > 800 /*|| this.y < 0*/){ this.y += -this.vy; this.vy = -this.vy*(0.5); } if(this.t > 50 || this.t < -50){ this.counter = (1+this.counter)%5; } for(let i=0; i<4; i++){ if(this.counter === this.open[i]){ this.eye = true; this.eyelid = false; } if(this.counter === this.close[i]){ this.eye = false; this.eyelid = false; } if(this.counter === this.half[i]){ this.eye = true; this.eyelid = true; } } } render(){ /* context.save(); context.translate(this.x,this.y); context.rotate(this.t*Math.PI*2/360) context.beginPath(); context.fillStyle = "yellow"; context.moveTo(0,-100); context.lineTo(20,0); context.lineTo(-20,0); context.closePath(); context.fill(); context.restore(); */ context.save(); context.beginPath(); context.fillStyle = this.color; context.arc(this.x,this.y,this.R,0,Math.PI*2); context.fill(); context.restore(); /* if(this.vx > 0){ context.save(); context.beginPath(); context.fillStyle = "yellow"; context.arc(this.x,this.y,this.R,0,Math.PI*2); context.fill(); context.restore(); } */ if(this.eye){ context.save(); context.beginPath(); context.fillStyle = "white"; context.arc(this.x,this.y,this.R*(3/4),0,Math.PI*2); context.fill(); context.restore(); context.save(); context.beginPath(); context.fillStyle = "black"; context.arc(this.x,this.y,this.R*(1/4),0,Math.PI*2); context.fill(); context.restore(); } if(this.eyelid){ context.save(); context.beginPath(); context.fillStyle = this.color; context.arc(this.x,this.y,this.R,Math.PI,Math.PI*2); context.fill(); context.restore(); } } } let objects = []; class Reflect { constructor(x,y,w,h,vx,vy){ this.x = x; this.y = y; this.w = w; this.h = h; this.vx = vx; this.vy = vy; } update(obj){ if(this.x this.y && obj.y < this.y + this.h){ if(Math.abs(obj.x - this.x)<10 ||Math.abs(obj.x -this.x -this.w)<10){ let relative_vel = obj.vx - this.vx; obj.x += -relative_vel + this.vx; obj.vx = -relative_vel*(0.5) + this.vx; } if(Math.abs(obj.y - this.y)<10 || Math.abs(obj.y - this.y -this.h)<10){ let relative_vel = obj.vy - this.vy; obj.y += -relative_vel + this.vy; obj.vy = -relative_vel*(0.5) + this.vy; } } } update_2(){ this.x += this.vx; this.y += this.vy; if(this.x > 800 || this.x < 0){ this.vx = -this.vx; } if(this.y > 800 || this.y < 0){ this.vy = -this.vy; } } render(){ context.save(); context.beginPath(); context.rect(this.x,this.y,this.w,this.h); context.fillStyle = "blue"; context.fill(); context.restore(); } } class Reflect_2 { constructor(x,y,w,h,vx,vy){ this.x = x; this.y = y; this.w = w; this.h = h; this.vx = vx; this.vy = vy; } update(obj){ if(this.x this.y && obj.y < this.y + this.h){ if(Math.abs(obj.x - this.x)<10 ||Math.abs(obj.x -this.x -this.w)<10){ let relative_vel = obj.vx - this.vx; obj.x += -relative_vel + this.vx; obj.vx = -relative_vel*(0.5) + this.vx; } if(Math.abs(obj.y - this.y)<10 || Math.abs(obj.y - this.y -this.h)<10){ let relative_vel = obj.vy - this.vy; obj.y += -relative_vel + this.vy; obj.vy = -relative_vel*(0.5) + this.vy; } } } update_2(){ this.x += this.vx; this.y += this.vy; } render(){ context.save(); context.beginPath(); context.rect(this.x,this.y,this.w,this.h); context.fillStyle = "blue"; context.fill(); context.restore(); } } //objects.push(new Eye(0,500,0.5,0.5,0,1,10,"red",true,true,0,[0],[4,2],[1,3],0)); function multi_array(n){ let array = []; for(let i=0; i 0) { ctx.lineWidth = strokeWidth; ctx.strokeStyle = strokeColor; ctx.stroke(); } ctx.restore(); return canvas; }; function stick(obj1,obj2){ obj2.vx = obj1.vx; obj2.vy = obj1.vy; } let stars = []; for(let i=0; i<10; i++){ let vx = 1-2*Math.random(); let vy = 1-2*Math.random(); stars.push(new Star(400,400,vx,vy,10,10)); } function putStars(X,Y){ for(let i=0; i<10; i++){ let vx = 1-2*Math.random(); let vy = 1-2*Math.random(); stars.push(new Star(X,Y,vx,vy,10,10)); } } function loop(){ context.fillRect(0,0,800,800); objects.forEach((obj) => obj.update()); objects.forEach((obj) => obj.render()); stars.forEach((obj) => obj.update()); stars.forEach((obj) => obj.render(context)); window.requestAnimationFrame(loop); } window.requestAnimationFrame(loop); function puteye(x,y,vx,vy){ objects.push(new Eye(x,y,vx,vy,0,1,10,"orange",true,true,0,[0],[4,2],[1,3],objects.length)); } /* function puteye_2(){ puteye(350,160,0.5,0.5); } setInterval(puteye_2,1000); */ document.getElementById( "myCanvas" ).addEventListener( "click", function( event ) { var clickX = event.pageX ; var clickY = event.pageY ; // 要素の位置を取得 var clientRect = this.getBoundingClientRect() ; var positionX = clientRect.left + window.pageXOffset ; var positionY = clientRect.top + window.pageYOffset ; // 要素内におけるクリック位置を計算 var x = clickX - positionX ; var y = clickY - positionY ; let ratio = canvas.clientWidth/800; putStars(x/ratio,y/ratio); //puteye(x/ratio,y/ratio,0.5,0.5); console.log(canvas.clientWidth); console.log(x); console.log(y); }); document.addEventListener( "keydown", function( event ) { /* if(event.key === "ArrowRight"){ objects[0].vx = 1; } if(event.key === "ArrowLeft"){ objects[0].vx = -1; } if(event.key === "ArrowUp"){ objects[0].vy = -10; } if(event.key === "ArrowDown"){ } if(event.key === " "){ } */ });