Mi lehet ebben a javascript kódban a hiba?
Hello otthon hobbi programzásal foglalkozok és most épp egy otthello játékot szeretnék megírni a tabla mar megvan csinalva de a fő jatekmenet kidolgozavasal már problémába utkoztem hiába csinálom meg a tutorial( https://www.youtube.com/watch?v=XseyfdrHmoY&t=1s) alapján a kodot nekem valamiért sehogy se akarja átvaltani a felso ikonokat feketere(videoban kb 14:00nal) mi lehet baj mit csinátam rosszul?
a kód pedig
<html>
<script>
//View
//Model
//Controller
var blackBackground;
var gap=5;
var cellWidth=65;
var discLayer;
var turn=1;
var discs=[
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,2,1,0,0,0],
[0,0,0,1,2,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0]
]
window.onload=function()
{
blackBackground=document.getElementById("blackBackground");
discLayer=document.getElementById("discLayer");
blackBackground.style.width=cellWidth*8+(gap*9);
blackBackground.style.height=cellWidth*8+(gap*9);
drawGreenSquares();
drawDiscs();
}
function drawGreenSquares()
{
for(var row=0; row<8;row++)
{
for(var column=0; column<8;column++)
{
var greenSquare=document.createElement("div");
greenSquare.style.position="absolute";
greenSquare.style.width=cellWidth;
greenSquare.style.height=cellWidth;
greenSquare.style.backgroundColor="green";
greenSquare.style.left=(cellWidth+gap)*column+gap;
greenSquare.style.top=(cellWidth+gap)*row+gap;
greenSquare.setAttribute("onclick","clickedSquare("+row+","+column+")");
blackBackground.appendChild(greenSquare);
}}}
function clickedSquare(row,column)
{
if (discs[row][column]!=0) {
return;
}
if (canClickSpot()==true) {
var affectedDiscs=getAffectedDiscs();
flipDiscs(affectedDiscs);
discs[row][column]=turn;
if(turn==1)turn=2;
else turn=1;
drawDiscs();
}
}
function canClickSpot(row,column){
var affectedDiscs=getAffectedDiscs(row,column);
if (affectedDiscs.length==0){return false;}
else{ return true;}
}
function getAffectedDiscs(row,column){
var affectedDiscs=[];
//to the right
var couldBeAffected=[];
var columnIterator=column;
while(columnIterator<7){
columnIterator+=1;
var valueAtspot=discs[row][columnIterator];
if (valueAtspot==0 ||valueAtspot==turn) {
if (valueAtspot==turn) {
affectedDiscs=affectedDiscs.concat(couldBeAffected);
}
break;
}
else{
var discLocation={row:row,column:columnIterator};
couldBeAffected.push(discLocation);
}
}
return affectedDiscs;
}
function flipDiscs(affectedDiscs){
for (var i = 0;i<affectedDiscs.length;i++) {
var spot=affectedDiscs[i];
if (discs[spot.row][spot.column]==1) {
discs[spot.row][spot.column]=2;
}else{
discs[spot.row][spot.column]=1;
}
}
}
function drawDiscs(){
discLayer.innerHTML= "";
for(var row=0; row<8;row++)
{
for(var column=0; column<8;column++)
{
var value=discs[row][column];
if(value==0){
}else{
var disc=document.createElement("div");
disc.style.position="absolute";
disc.style.width=cellWidth;
disc.style.height=cellWidth;
disc.style.borderRadius="50%";
disc.style.left=(cellWidth+gap)*column+gap;
disc.style.top=(cellWidth+gap)*row+gap;
if(value==1){
disc.style.backgroundColor="black";
}
if(value==2){
disc.style.backgroundColor="white";
}
discLayer.appendChild(disc);
}
}
}
}
</script>
<div id="blackBackground" style="position:absolute;left:0;top:0;background-color:black;height:500;width:500;"></div>
<div id="discLayer"></div>
</html>
válasza:Na de, hogy még másolni sem tudsz az elég szégyen.
Nem adsz át sor-oszlopot a canClickSpot functionnek.
if(canClickSpot(row,column)() == true) van a kódjában.
És az alatta lévő getAffectedDiscs -nek sem.
válasza:A másik probléma (azon kívül, hogy nem jól másolsz),
hogy nem tudsz debuggolni egyáltalán.
2db console.log kellett, hogy rájöjjek vakon az ismeretlen kódban, mi a gebasz.
Simán írasd ki ilyenkor a változóidat ott ahol szerinted baj van, nézd meg az értéküket, ha jó akkor menj tovább, ha rossz akkor nézd kövesd vissza hogyan milyen értékek kerülnek bele (jelen esetben NEM kerülnek bele).
még mindig nem jó a disc már megjelennik de vmiert még mindig nem vált át a szín
<html>
<script>
//View
//Model
//Controller
var blackBackground;
var gap=5;
var cellWidth=65;
var discLayer;
var turn=1;
var discs=[
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,2,1,0,0,0],
[0,0,0,1,2,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0]
]
window.onload=function()
{
blackBackground=document.getElementById("blackBackground");
discLayer=document.getElementById("discLayer");
blackBackground.style.width=cellWidth*8+(gap*9);
blackBackground.style.height=cellWidth*8+(gap*9);
drawGreenSquares();
drawDiscs();
}
function drawGreenSquares()
{
for(var row=0; row<8;row++)
{
for(var column=0; column<8;column++)
{
var greenSquare=document.createElement("div");
greenSquare.style.position="absolute";
greenSquare.style.width=cellWidth;
greenSquare.style.height=cellWidth;
greenSquare.style.backgroundColor="green";
greenSquare.style.left=(cellWidth+gap)*column+gap;
greenSquare.style.top=(cellWidth+gap)*row+gap;
greenSquare.setAttribute("onclick","clickedSquare("+row+","+column+")");
blackBackground.appendChild(greenSquare);
}}}
function clickedSquare(row,column)
{
if (discs[row][column]!=0) {
return;
}
if (canClickSpot(row,column)==true) {
var affectedDiscs=getAffectedDiscs();
flipDiscs(affectedDiscs);
discs[row][column]=turn;
if(turn==1)turn=2;
else turn=1;
drawDiscs();
}
}
function canClickSpot(row,column){
var affectedDiscs=getAffectedDiscs(row,column);
if (affectedDiscs.length==0){return false;}
else{ return true;}
}
function getAffectedDiscs(row,column){
var affectedDiscs=[];
//to the right
var couldBeAffected=[];
var columnIterator=column;
while(columnIterator<8){
columnIterator+=1;
var valueAtspot=discs[row][columnIterator];
if (valueAtspot==0 ||valueAtspot==turn) {
if (valueAtspot==turn) {
affectedDiscs=affectedDiscs.concat(couldBeAffected);
}
break;
}
else{
var discLocation={row:row,column:columnIterator};
couldBeAffected.push(discLocation);
}
}
return affectedDiscs;
}
function flipDiscs(affectedDiscs){
for (var i = 0;i<affectedDiscs.length;i++) {
var spot=affectedDiscs[i];
if (discs[spot.row][spot.column]==1) {
discs[spot.row][spot.column]=2;
}else{
discs[spot.row][spot.column]=1;
}
}
}
function drawDiscs(){
discLayer.innerHTML= "";
for(var row=0; row<8;row++)
{
for(var column=0; column<8;column++)
{
var value=discs[row][column];
if(value==0){
}else{
var disc=document.createElement("div");
disc.style.position="absolute";
disc.style.width=cellWidth;
disc.style.height=cellWidth;
disc.style.borderRadius="50%";
disc.style.left=(cellWidth+gap)*column+gap;
disc.style.top=(cellWidth+gap)*row+gap;
if(value==1){
disc.style.backgroundColor="black";
}
if(value==2){
disc.style.backgroundColor="white";
}
discLayer.appendChild(disc);
}
}
}
}
</script>
<div id="blackBackground" style="position:absolute;left:0;top:0;background-color:black;height:500;width:500;"></div>
<div id="discLayer"></div>
</html>
válasza:Azért, mert az én válaszomat se tudod másolni.
Két sort idézve:
"Nem adsz át sor-oszlopot a canClickSpot functionnek."
"És az alatta lévő getAffectedDiscs -nek sem."
válasza:Van egy csomó jó IDE, de ez JS-ben nem hiba (főleg nem szintaktikai).
JS szerint teljesen jó a kódod hiszen ez történik:
- a function paraméterek opcionálisak
- undefined-et kap mindkettő, mert nem adtál át semmit
- undefined < 8 az false, tehát while ciklusba már nem lépett be velük
- returnol egy üres tömböt
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!