<!DOCTYPE html>
<html>

<head>

<title>Malomfoci</title>
<script>
if (navigator.userAgent.indexOf('Gecko/')!=-1) {
alert('A Gecko-alapú böngészők nem támogatottak.\nHasználj Chrome-ot, IE-t, Operát vagy Safarit, csak ne Firefoxot!');
window.location='http://lmgtfy.com/?q=Free+Browser+Download%20-Firefox';
}
var jon1='k'; //kek/piros jatekos
var jon2=''; //melyik babu lep
var tiltott=0;
//tárolja a következő lépő játékost
var helyek=new Array(22);
//a fontos objektumok címkehelyét tárolják
//0-7: kék kő 8-15: piros kő 16-18: kék bábu 19-21: piros bábu
function gyujt() {
for (i=0;i<8;i++) {

helyek[i]=i+1;

}

for (i=8;i<16;i++) {

helyek[i]=i+9;

}

helyek[16]=9;

helyek[17]=12;

helyek[18]=14;

helyek[19]=11;

helyek[20]=13;

helyek[21]=16;

}

function remove(id)
{
return (elem=document.getElementById(id)).parentNode.removeChild(elem);

}
//az objektum nevéből a helyek tömbben való helyét adja vissza
function nevhellye(objnev) {
var alap, lehet=new Array('kk','pk','kb','pb');
for (var i=0;i<4;i++) if (objnev.indexOf(lehet[i])!=-1) {
alap=lehet[i];
break;
}
var szam=parseInt(objnev.replace(alap,''));
switch (alap)
{
    case 'kk':
        return szam-1;
        break;
    case 'pk':
        return szam+7;
        break;
    case 'kb':
        return szam+15;
        break;
    case 'pb':
        return szam+18;
        break;

}
}
//a hely számából objektumot állít elő
function helyobjma(szam) {
var index=helyek.indexOf(szam);
return szambolnev(index);
}
//a kapott indexből előállítja az objektum nevét
function szambolnev(index) {
var nev;
if (index<8) nev='kk'+(index+1);
if (index>7 && index<16) nev='pk'+(index-7);
if (index>15 && index<19) nev='kb'+(index-15);
if (index>18) nev='pb'+(index-18);
return nev;
}
function mozog(mivel,merre) {
if (jon2.length!=3 && mivel[1]=='b') {
alert('Minden bábu áll, követ kell használni.');
return;
}
if (mivel!=jon2 && jon2.length==3) {
alert('A mozdított bábuval kell lépni.');
return;
}
if (mivel[1]=='k' && mivel[0]!=jon1) {
alert('Nem te jössz.');
return;
}
var honnan=helyek[nevhellye(mivel)];
try {
var hova=eval('szomszedok(honnan).'+merre);
if (hova==tiltott) {
alert('Erről mozdult a bábu; ide nem léphetsz.');
return;
}
if (typeof hova!=='number') {
alert('Rossz irány.');
return;
}
}
catch (ex) {
alert('Rossz irány.');
return;
}
if (mivel[1]=='k' && String(helyobjma(hova))[1]=='k' && helyobjma(hova)!='kk0') {
alert('Foglalt mező.');
return;
}
// TENYLEGES MOZGAS KISZAMITASA
if (mivel[1]=='b') {
var lehuz=[String(document.getElementById(mivel).style.left),String(document.getElementById(mivel).style.top)];
for (var i=0;i<=1;i++) lehuz[i]=parseInt(lehuz[i].replace('px',''));
document.getElementById(mivel).style.left=String(lehuz[0]-20)+'px';
document.getElementById(mivel).style.top=String(lehuz[1]+20)+'px';
}
if (Math.abs(honnan-hova)==8) {
var valt=eval('parseInt(String(document.getElementById(mivel).style.'+((String('rightleft').indexOf(merre)!=-1)?('left'):('top'))+').replace(\'px\',\'\'))');
eval('document.getElementById(mivel).style.'+((String('rightleft').indexOf(merre)!=-1)?('left'):('top'))+'=\''+String(valt+((String('downright').indexOf(merre)!=-1)?(86):(-86)))+'px\';');
}
else 
switch (Math.floor((honnan-1)/8)) {
case 0:
var valt=eval('parseInt(String(document.getElementById(mivel).style.'+((String('rightleft').indexOf(merre)!=-1)?('left'):('top'))+').replace(\'px\',\'\'))');
eval('document.getElementById(mivel).style.'+((String('rightleft').indexOf(merre)!=-1)?('left'):('top'))+'=\''+String(valt+((String('downright').indexOf(merre)!=-1)?(252):(-252)))+'px\';');
break;
case 1:
var valt=eval('parseInt(String(document.getElementById(mivel).style.'+((String('rightleft').indexOf(merre)!=-1)?('left'):('top'))+').replace(\'px\',\'\'))');
eval('document.getElementById(mivel).style.'+((String('rightleft').indexOf(merre)!=-1)?('left'):('top'))+'=\''+String(valt+((String('downright').indexOf(merre)!=-1)?(166):(-166)))+'px\';');
break;
case 2:
var valt=eval('parseInt(String(document.getElementById(mivel).style.'+((String('rightleft').indexOf(merre)!=-1)?('left'):('top'))+').replace(\'px\',\'\'))');
eval('document.getElementById(mivel).style.'+((String('rightleft').indexOf(merre)!=-1)?('left'):('top'))+'=\''+String(valt+((String('downright').indexOf(merre)!=-1)?(80):(-80)))+'px\';');
}
// MOZGAS VEGE
var mire=helyobjma(hova);
if (mire!='kk0') {
if (mire[1]=='k') {
remove(mire);
helyek[nevhellye(mire)]=0;
helyek[nevhellye(mivel)]=hova;
if (malom() && ((jon1=='k' && Number(document.getElementById('pont1').innerHTML)>Number(document.getElementById('pont2').innerHTML)) || (jon1=='p' && Number(document.getElementById('pont2').innerHTML)>Number(document.getElementById('pont1').innerHTML)))) {
localStorage.setItem(((jon1=='p')?('piros'):('kek')),(typeof localStorage.getItem((jon1=='p')?'piros':'kek')==='string')?(String(parseInt(localStorage.getItem((jon1=='p')?'piros':'kek'))+1)):'1');
var ujat=confirm(((jon1=='p')?('Piros'):('Kék'))+' játékos győzött!\nÚj játék?');
if (ujat==true) document.location.reload(true);
else window.location='about:blank';
}
document.getElementById('pont'+((mire[0]=='k')?('2'):('1'))).innerHTML=String(Number(document.getElementById('pont'+((mire[0]=='k')?('2'):('1'))).innerHTML)+1);
if (document.getElementById('pont'+((mire[0]=='k')?'2':'1')).innerHTML=='8') {
localStorage.setItem(((mire[0]=='k')?('piros'):('kek')),(typeof localStorage.getItem((mire[0]=='k')?'piros':'kek')==='string')?(String(parseInt(localStorage.getItem((mire[0]=='k')?'piros':'kek'))+1)):'1');
var ujat=confirm(((mire[0]=='k')?('Piros'):('Kék'))+' játékos győzött!\nÚj játék?');
if (ujat==true) document.location.reload(true);
else window.location='about:blank';
}
}
else {
var felhuz=[String(document.getElementById(mire).style.left),String(document.getElementById(mire).style.top)];
for (var i=0;i<=1;i++) felhuz[i]=parseInt(felhuz[i].replace('px',''));
document.getElementById(mire).style.left=String(felhuz[0]+20)+'px';
document.getElementById(mire).style.top=String(felhuz[1]-20)+'px';
jon2=mire;
tiltott=honnan;
document.getElementById('pontos').innerHTML=((jon2[0]=='k')?'kék':'piros')+' játékos a &quot;felemelt(mozdított)&quot; bábuval';
}
}
if (mire[1]!='k' || mire=='kk0') helyek[nevhellye(mivel)]=hova;
if (mivel[1]=='b') nemmozd=nemmozd.replace(mivel[0],'');
if (mire[1]!='k' || mire=='kk0') if (malom() && ((jon1=='k' && Number(document.getElementById('pont1').innerHTML)>Number(document.getElementById('pont2').innerHTML)) || (jon1=='p' && Number(document.getElementById('pont2').innerHTML)>Number(document.getElementById('pont1').innerHTML)))) {
localStorage.setItem(((jon1=='p')?('piros'):('kek')),(typeof localStorage.getItem((jon1=='p')?'piros':'kek')==='string')?(String(parseInt(localStorage.getItem((jon1=='p')?'piros':'kek'))+1)):'1');
var ujat=confirm(((jon1=='p')?('Piros'):('Kék'))+' játékos győzött!\nÚj játék?');
if (ujat==true) document.location.reload(true);
else window.location='about:blank';
} 
if (mire[1]=='k') {
jon1=(jon1=='k')?'p':'k';
jon2='';
tiltott=0;
nemmozd='pk';
document.getElementById('pontos').innerHTML=((jon1[0]=='k')?'kék':'piros')+' játékos valamelyik kövével';
}
}
if(!Array.indexOf) {
    Array.prototype.indexOf = function(obj) {
        for(var i=0; i<this.length; i++) {
            if(this[i]==obj) {
                return i;
            }
        }
        return -1;
    }
}
var irany='';
var kezdo=new TD(0,0);
var nemmozd='pk';
function TD(bal,fonn) {
this.bal=bal;
this.fonn=fonn;
}
function elobeall(obj) {
kezdo.bal=obj.clientX;
kezdo.fonn=obj.clientY;
}
function allit(obj) {
with (obj) {
if (clientX==0 && clientY==0) return;
}
irany='updownrightleft';
irany=irany.replace((Math.abs(kezdo.bal-obj.clientX)>=Math.abs(kezdo.fonn-obj.clientY))?('updown'):('rightleft'),'');
irany=irany.replace((irany=='rightleft')?((kezdo.bal>obj.clientX)?('right'):('left')):((kezdo.fonn>obj.clientY)?('down'):('up')),'');
}
function szomszedok(hely) {
var sz=new Object;
if ([0,3].indexOf(hely%8)==-1 && [5,20].indexOf(hely)==-1) sz.right=([1,2,6,7].indexOf(hely%8)!=-1)?(hely+1):((hely%8==4)?(hely+8):(hely-8));
if ([1,6].indexOf(hely%8)==-1 && [4,21].indexOf(hely)==-1) sz.left=([0,2,3,7].indexOf(hely%8)!=-1)?(hely-1):((hely%8==4)?(hely-8):(hely+8));
if ([1,3].indexOf(hely%8)==-1 && [2,23].indexOf(hely)==-1) sz.up=([0,4].indexOf(hely%8)!=-1)?(hely-3):(([5,6].indexOf(hely%8)!=-1)?(hely-2):((hely%8==2)?(hely-8):(hely+8)));
if ([0,6].indexOf(hely%8)==-1 && [7,18].indexOf(hely)==-1) sz.down=([1,5].indexOf(hely%8)!=-1)?(hely+3):(([3,4].indexOf(hely%8)!=-1)?(hely+2):((hely%8==2)?(hely+8):(hely-8)));
return sz;
}
function malom(){
var szin;
var vizsgalt=new Array;
var opciok=new Array;
var irany;
fo:
for (var i=1;i<=24;i++) {
vizsgalt[0]=helyobjma(i);
if (vizsgalt[0][1]!='b') continue;
szin=vizsgalt[0][0];
if (nemmozd.indexOf(szin)!=-1) continue;
opciok[0]=szomszedok(i);
for (at in opciok[0]) {
if (eval('opciok[0].'+at)<i) continue;
vizsgalt[1]=helyobjma(eval('opciok[0].'+at));
if (vizsgalt[1][1]!='b') continue;
if (vizsgalt[1][0]!=szin) continue;
opciok[1]=szomszedok(eval('opciok[0].'+at));
vizsgalt[2]=helyobjma(eval('opciok[1].'+at));
if (vizsgalt[2][0]==szin && vizsgalt[2][1]=='b') return true;
}
}
return false;
}
</script>
</head>

<body onload="gyujt();">
<div>
<div style="display:inline-block; height:600px; width:600px; background-image:url('mtabla.png'); background-size:100%; position:relative;">

<img id="kk1" src="mko.png" alt="KĂ©k_kĹ‘" style="position:absolute; left:26px; top:26px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="kk2" src="mko.png" alt="KĂ©k_kĹ‘" style="position:absolute; left:278px; top:26px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="kk3" src="mko.png" alt="KĂ©k_kĹ‘" style="position:absolute; left:530px; top:26px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="kk4" src="mko.png" alt="KĂ©k_kĹ‘" style="position:absolute; left:26px; top:278px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="kk5" src="mko.png" alt="KĂ©k_kĹ‘" style="position:absolute; left:530px; top:278px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="kk6" src="mko.png" alt="KĂ©k_kĹ‘" style="position:absolute; left:26px; top:530px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="kk7" src="mko.png" alt="KĂ©k_kĹ‘" style="position:absolute; left:278px; top:530px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="kk8" src="mko.png" alt="KĂ©k_kĹ‘" style="position:absolute; left:530px; top:530px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="pk1" src="mko2.png" alt="Piros_kĹ‘" style="position:absolute; left:198px; top:198px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="pk2" src="mko2.png" alt="Piros_kĹ‘" style="position:absolute; left:278px; top:198px;"ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="pk3" src="mko2.png" alt="Piros_kĹ‘" style="position:absolute; left:358px; top:198px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="pk4" src="mko2.png" alt="Piros_kĹ‘" style="position:absolute; left:198px; top:278px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="pk5" src="mko2.png" alt="Piros_kĹ‘" style="position:absolute; left:358px; top:278px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="pk6" src="mko2.png" alt="Piros_kĹ‘" style="position:absolute; left:198px; top:358px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="pk7" src="mko2.png" alt="Piros_kĹ‘" style="position:absolute; left:278px; top:358px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="pk8" src="mko2.png" alt="Piros_kĹ‘" style="position:absolute; left:358px; top:358px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="kb1" src="mbabu.png" alt="KĂ©k_bĂˇbu" style="position:absolute; left:121px; top:100px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="pb1" src="mbabu2.png" alt="Piros_bĂˇbu" style="position:absolute; left:453px; top:100px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="kb2" src="mbabu.png" alt="KĂ©k_bĂˇbu" style="position:absolute; left:121px; top:266px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="pb2" src="mbabu2.png" alt="Piros_bĂˇbu" style="position:absolute; left:453px; top:266px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="kb3" src="mbabu.png" alt="KĂ©k_bĂˇbu" style="position:absolute; left:121px; top:432px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

<img id="pb3" src="mbabu2.png" alt="Piros_bĂˇbu" style="position:absolute; left:453px; top:432px;" ondragstart="elobeall(event)" ondrag="allit(event)" ondragend="mozog(this.id,irany)">

</div>
<div style="display:inline-block; position:absolute; top:50px; left:650px; font-size:26px; width:400px; word-wrap:break-word;">Lép: <span id="pontos">kék játékos valamelyik kövével</span>.</div>
<table style="height:150px; width:150px; display:inline-table; position:absolute; top:50px; left:1100px;" border="1">
<tbody>
<tr>
<th colspan="2">
Pontok
</th>
</tr>
<tr>
<td>
Kék
</td>
<td>
Piros
</td>
</tr>
<tr>
<td id="pont1">
0
</td>
<td id="pont2">
0
</td>
</tr>
<tr>
<th colspan="2">
Győzelmek
</th>
</tr>
<tr>
<td>
Kék
</td>
<td>
Piros
</td>
</tr>
<tr>
<td id="win1">
<script type="text/javascript">
document.write((typeof localStorage.getItem('kek')==='string')?localStorage.getItem('kek'):'0');
</script>
</td>
<td id="win2">
<script type="text/javascript">
document.write((typeof localStorage.getItem('piros')==='string')?localStorage.getItem('piros'):'0');
</script>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Győzelmek nullázása" onclick="localStorage.setItem('piros','0'); localStorage.setItem('kek','0'); document.getElementById('win1').innerText='0'; document.getElementById('win2').innerText='0';" />
</td>
</tr>
</tbody>
</table>
</div>
<style type="text/css">
img[src='mko2.png'], img[src='mko.png'] {
height:44px;
width:44px;
}
img[src='mbabu.png'], img[src='mbabu2.png'] {
height:50px;
width:27px;
}
table td, table th {
text-align:center;
font-size:30px;
}
</style>
</body>

</html>