Buongiorno a tutti!
Sono uno studente di ingegneria, ho implementato una mezza scacchiera per la dama in jQuery. Ora che sono quasi a fine progetto e gli esami incombono vengo a scoprire che il progetto deve essere presentato in javascript puro che io non conosco a pieno. Qualcuno è in grado di darmi una mano per convertire il codice che ho buttato giù fino ad ora?
Logica di generazione della scacchiera e delle pedine (già convertita in Javascript e trascritta per completezza)
Pedina mangiabile o non mangiabile.codice:var Turno=1; function creaScacchiera() { var row=1; for (i=0;i<32;i++){ var newdiv = document.createElement('div'); newdiv.innerHTML += i; newdiv.setAttribute('id', i); newdiv.setAttribute("class","casella"); newdiv.className += " "+'row'+row; if (i%4==3) {++row;} if (i%8==0) { newdiv.className += " capo"; } if (i%8==7) { newdiv.className += " capo_dx"; } if (i<12) { newdiv.className += " occupato"; newdiv.innerHTML +='<div class="pedina bianchi" id="p'+i+'" onClick="cliccaPedina()"></div>' } else if (i>19) { newdiv.className += " occupato"; newdiv.innerHTML +='<div class="pedina neri" id="p'+i+'"></div>' } var schacchiera = document.getElementById('container'); schacchiera.appendChild(newdiv); } } creaScacchiera(); /* for (i=0;i<32;i++){ $('#container').append('<div class="casella" id="'+i+'">'+i+'</div>'); if (i%8==0) { $('#'+i+'').addClass('capo'); } if (i<12) { $('#'+i+'').append('<div class="pedina bianchi" id="p'+i+'"></div>').addClass('occupato'); } else if (i>19) { $('#'+i+'').append('<div class="pedina neri" id="p'+i+'"></div>').addClass('occupato'); } } */
Logica di riconoscimento della pedina selezionata ed illuminazione delle destinazioni possibili.codice:function checkMangiabile(elemento,pedina) { var idc = Number($('#'+elemento+'').attr('id')); // idc = id della casella potenzialmente mangiabiel. var riga = ($('#'+elemento+'').attr('class')).substr(11,1); var capo = ($('#'+elemento+'').attr('class')).substr(13,4); var mangiante = Number($('#p'+pedina+'').parent().attr('id')); // Id casella della pedina mangiante if (pedina <12) //OVVERO BIANCA { if($('#'+elemento+' > div').hasClass('neri')) { if (Number(riga)%2==1) // Se riga dispari { { $('#'+(idc+(idc-mangiante-1))+'').not('.occupato').addClass('possible'); } } else // se pari { $('#'+(idc+(idc-mangiante+1))+'').not('.occupato').addClass('possible'); } } } else //OVVERO NERA { if($('#'+elemento+' > div').hasClass('bianchi')) { if (Number(riga)%2==1) { { $('#'+(idc+(idc-mangiante+1))+'').not('.occupato').addClass('possible'); } } else { $('#'+(idc+(idc-mangiante-1))+'').not('.occupato').addClass('possible'); } } } //Bisogna Verificare se nei dintorni vi sono pedine avversarie mangiabili, a quel punto bisogna marcare la tabella di destinazione come 'possibile'; } function nuovoTurno() { document.getElementById('info').innerHTML = "Turno n° "+ ++Turno; }
Logica di spostamento delle pedine:codice:$(".pedina").click(function () { $(".casella").removeClass('clicked'); // $(".casella").removeClass('mangiabile'); superflua $(this).parent().addClass('clicked'); var idc = Number($(this).parent().attr('id')); // Idc = id della casella. Casting esplicito a valore numerico (per avitare erronea concatenazione 14+4 = 144) $(".casella").removeClass('possible'); var pedina = ($(this).attr('id')).substring(1); // Prendo id pedina. var riga = ($(this).parent().attr('class')).substr(11,1); var capo = ($(this).parent().attr('class')).substr(13,4); if (pedina<12) { if(Turno%2==1) { if (Number(riga)%2==1) { if (capo=="capo") // Se sono ad un estremo { $('#'+(idc+4)+'').not('.occupato').addClass('possible'); // Metto occupato se l'id della casella +4 è non occupato. if ($('#'+(idc+4)+'').hasClass('occupato')) { checkMangiabile((idc+4),pedina); } } else { $('#'+(idc+4)+', #'+(idc+3)+'').not('.occupato').addClass('possible'); if($('#'+(idc+4)+'').hasClass('occupato')) { checkMangiabile((idc+4),pedina); } if($('#'+(idc+3)+'').hasClass('occupato')) { checkMangiabile((idc+3),pedina); } } } else // Riga pari { if (capo=="capo") { $('#'+(idc+4)+'').not('.occupato').addClass('possible'); if ($('#'+(idc+4)+'').hasClass('occupato')) { checkMangiabile((idc+4),pedina); } } else{ $('#'+(idc+5)+', #'+(idc+4)+'').not('.occupato').addClass('possible'); if($('#'+(idc+5)+'').hasClass('occupato')) { checkMangiabile((idc+5),pedina); } if($('#'+(idc+4)+'').hasClass('occupato')) { checkMangiabile((idc+4),pedina); } } } } } if (pedina>19) { if(Turno%2==0) { if (Number(riga)%2==0) { if (capo=="capo") { $('#'+(idc-4)+'').not('.occupato').addClass('possible'); if ($('#'+(idc-4)+'').hasClass('occupato')) { checkMangiabile((idc-4),pedina); } } else { $('#'+(idc-4)+', #'+(idc-3)+'').not('.occupato').addClass('possible'); if($('#'+(idc-4)+'').hasClass('occupato')) { checkMangiabile((idc-4),pedina); } if($('#'+(idc-3)+'').hasClass('occupato')) { checkMangiabile((idc-3),pedina); } } } else { if (capo=="capo") { $('#'+(idc-4)+'').not('.occupato').addClass('possible'); if ($('#'+(idc-4)+'').hasClass('occupato')) { checkMangiabile((idc-4),pedina); } } else{ $('#'+(idc-5)+', #'+(idc-4)+'').not('.occupato').addClass('possible'); if($('#'+(idc-5)+'').hasClass('occupato')) { checkMangiabile((idc-5),pedina); } if($('#'+(idc-4)+'').hasClass('occupato')) { checkMangiabile((idc-4),pedina); } } } } } });
Grazie in anticipo.codice:$(".possible").live("click",function () { $('.casella').removeClass('possible'); $('.casella').removeClass('mangiabile'); $('.clicked div').appendTo(this); // Sposta la pedina da un div all'altro. $('.clicked').removeClass('occupato'); $('.clicked').removeClass('clicked'); $(this).addClass('occupato'); nuovoTurno(); if(Turno%2==1) { document.getElementById('info_game').innerHTML = "Tocca al Bianco"; } else { document.getElementById('info_game').innerHTML = "Tocca al Nero"; } });
Mattia
