Strona 1 z 1

JavaScript pogubiłem się we własnym kodzie

PostNapisane: czwartek, 20 sierpnia 2020, 12:12
przez Szczurk
Siema

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

Re: JavaScript pogubiłem się we własnym kodzie

PostNapisane: czwartek, 15 lipca 2021, 21:02
przez Żaneta95
Powiem Ci kolego za dużo zapętlania tutaj, dlatego program Ci się rozjeżdża...
____________________
hotele gorzów