Właśnie skończyłem kurs javascript i tak dla ćwiczeń piszę sobie różne rzeczy na telefonie(safari). Napisałem sobie układ słoneczny i na końcu chciałem podświetlić słońce, ale razem z BLUR-em podświetla się również opis następnej planety (merkury). Nie mam pojęcia dlaczego i jak to naprawić. Proszę o pomoc
Będę wdzięczny również za wszelkie uwagi dotyczące poprawy kodu i nawyków pisania. Z góry dziękuje. Wklejam kod poniżej:
JavaScript
window.onload=function(e){
var c=document.getElementById("c");
var ctx = c.getContext("2d");
var skalaR = 27853.6;
//var skalaR = 15000;
var skalaD = 1657142.86;
var skalaV = 1184;
var boardW = c.getAttribute("width");
var boardH = c.getAttribute("height");
var boardSrX = boardW/2;
var boardSrY = boardH/2;
function planeta(x,y,r,src,color,sunDist,vx,vy,txt,border,sBlur,sColor,sX,sY)
{
this.x=x;
this.y=y;
this.r=r;
this.src=src;
this.color=color;
this.sunDist=sunDist;
this.vx=vx;
this.vy=vy;
this.txt=txt;
this.border=border;
this.sBlur=sBlur;
this.sColor=sColor;
this.sX=sX;
this.sY=sY;
this.distPx = this.sunDist/skalaD;
this.rad =function(ang){return Math.PI/180*ang;}
this.draw=function()
{
ctx.beginPath();
ctx.fillStyle="black";
if(this.txt=="Ziemia"){ctx.fillStyle="blue";}
ctx.font="20px arial";
ctx.fillText(this.txt,this.x+this.r+5,this.y-this.r-5);
ctx.closePath();
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
var img = new Image();
img.src=this.src;
var pat = ctx.createPattern(img,"repeat");
ctx.fillStyle=pat;
ctx.fill();
ctx.strokeStyle=this.border;
ctx.shadowBlur=this.sBlur;
ctx.shadowColor=this.sColor;
ctx.shadowOffsetX=this.sX;
ctx.shadowOffsetY=this.sY;
ctx.closePath();
ctx.stroke();
ctx.fill();
//ctx.beginPath();
//ctx.fillStyle="black";
//if(this.txt=="Ziemia"){ctx.fillStyle="blue";}
//ctx.font="20px arial";
//ctx.fillText(this.txt,this.x+this.r+5,this.y-this.r-5);
//ctx.closePath();
}
var x=0;
var y=0;
var range=this.distPx;
this.move=function()
{
this.x=boardSrX+Math.cos(x)*range;
this.y=boardSrY+Math.sin(y)*range;
x+=this.vx;
y+=this.vy;
if(this.x<=0){this.x=0;};
if(this.x>=boardW)
{this.x=boardW;
ctx.fillText(this.txt,this.x-this.r-80,this.y-this.r-5);
ctx.fill();
};
};
}
var slonce = new planeta(boardSrX,boardSrY,696340/skalaR,"img/20200819120121.png","yellow",0,0,0,"Słońce","orange",40,"yellow",0,0);
var merkury = new planeta(boardSrX,boardSrY-58000000/skalaD,2439.7/skalaR,"","black",58000000,47.36/skalaV,47.36/skalaV,"Merkury","black","","","","");
var wenus = new planeta(boardSrX,boardSrY-108000000/skalaD,6051.8/skalaR,"","black",108000000,35.020/skalaV,35.020/skalaV,"Wenus","black","","","","");
var ziemia = new planeta(boardSrX,boardSrY-150000000/skalaD,6371.008/skalaR,"","black",150000000,29.8/skalaV,29.8/skalaV,"Ziemia","black","","","","");
var mars = new planeta(boardSrX,boardSrY-230000000/skalaD,3389.5/skalaR,"","black",230000000,24.07/skalaV,24.07/skalaV,"Mars","black","","","","");
var jowisz = new planeta(boardSrX,boardSrY-778000000/skalaD,69911/skalaR,"","black",778000000,13.06/skalaV,13.06/skalaV,"Jowisz","black","","","","");
var saturn = new planeta(boardSrX,boardSrY-1400000000/skalaD,58232/skalaR,"","black",1400000000,9.68/skalaV,9.68/skalaV,"Saturn","black","","","","");
var uran = new planeta(boardSrX,boardSrY-2871000000/skalaD,25362/skalaR,"","black",2871000000,6.8/skalaV,6.8/skalaV,"Uran","black","","","","");
var neptun = new planeta(boardSrX,boardSrY-4496600000/skalaD,24622/skalaR,"","black",4496600000,5.43/skalaV,5.43/skalaV,"Neptun","black","","","","");
function clearBoard(){
ctx.clearRect(0,0,boardW,boardH);
}
function update (){
clearBoard();
slonce.draw();
merkury.draw();
merkury.move();
wenus.draw();
wenus.move();
ziemia.draw();
ziemia.move();
mars.draw();
mars.move();
jowisz.draw();
jowisz.move();
saturn.draw();
saturn.move();
uran.draw();
uran.move();
neptun.draw();
neptun.move();
}
setInterval(update,1000/60);
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>ukladSloneczny</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="c" width="364" height="6000">
</canvas>
<div id="test"></div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
#c{
background-color:rgb(230,230,230);
margin:5px;
}