An dieser Stelle möchte ich ein einfaches 4-Gewinnt Spiel vorstellen, dass ich als Basis für eine andere Webanwendung benötige. Dieses “Abfallprodukt” ist viel zu interessant, um es einfach zu löschen. Also kann man hier zu zweit ein wenig Spaß haben. Eine KI habe ich allerdings nicht implementiert. Wer möchte kann dies gerne selbst erstellen und mir den Code schicken. In diesem Fall würde ich die KI hier veröffentlichen:

Link zum Testspiel

Der JavaScript-Bereich in der Seite sieht folgendermaßen aus:

<script>
window.onload = function()
{
 var p1 = '#0000ff', p2 = '#ff0000', color = p1, gameOver = false;

 function attach(element, type, fn)
 {
   if(element.addEventListener)
   {
     element.addEventListener(type, fn, false);
   }
   else if(element.attachEvent)
   {
     element.attachEvent('on' + type, fn);
   }
 }

 function check4End(x,y)
 {
   var i, n, m, counter,
        checkColor = document.getElementById(x+'_'+y).getAttribute('title');

   function checkCounter(c)
   {
     if(c >= 4)
     {
       document.getElementById('infotext').innerHTML = '&nbsp;&nbsp;hat gewonnen';
       gameOver = true;
     }
   }

   //horizontal -----------------------
   counter = 0;
   for(i=0;i<7;i++)
   {
     if(document.getElementById(i+'_'+y).getAttribute('title') === checkColor)
     {
       counter++;
     }
     else
     {
       counter = 0;
     }

     checkCounter(counter);
   }

   //vertikal -----------------------
   counter = 0;
   for(i=0;i<6;i++)
   {
     if(document.getElementById(x+'_'+i).getAttribute('title') === checkColor)
     {
       counter++;
     }
     else
     {
       counter = 0;
     }

     checkCounter(counter);
   }

   //diagonal 1 -----------------------
   counter = 0;
   n = x;
   m = y;

   while(n>0 && m>0)
   {
     n--;
     m--;
   }

   for(i=0;i<6;i++)
   {
     if(document.getElementById(n+'_'+m))
     {
       if(document.getElementById(n+'_'+m).getAttribute('title') === checkColor)
       {
         counter++;
       }
       else
       {
         counter = 0;
       }

       checkCounter(counter);

       n++;
       m++;
     }
     else
     {
       break;
     }
   }

   //diagonal 2 -----------------------
   counter = 0;
   n = x;
   m = y;

   while(n>0 && m<5)
   {
     n--;
     m++;
   }

   for(i=0;i<6;i++)
   {
     if(document.getElementById(n+'_'+m))
     {
       if(document.getElementById(n+'_'+m).getAttribute('title') === checkColor)
       {
         counter++;
       }
       else
       {
         counter = 0;
       }

       checkCounter(counter);

       n++;
       m--;
     }
     else
     {
       break;
     }
   }

 }

 function init()
 {
   var n, el = document.getElementsByTagName('body')[0];

   document.getElementById('info').style.backgroundColor = color;

   for(n=0;n<el.childNodes.length;n++)
   {
     if(el.childNodes[n])
     {
       attach(el.childNodes[n], 'click', function() {

         if(gameOver === false)
         {
           var i, col = this.getAttribute('class').replace('col','');

           for(i=5;i>=0;i--)
           {
             if(document.getElementById(col+'_'+i).getAttribute('title') === '')
             {
               document.getElementById(col+'_'+i).style.backgroundColor = color;
               document.getElementById(col+'_'+i).setAttribute('title',color);
               if(color === p1)
               {
                 color = p2;
               }
               else
               {
                 color = p1;
               }
               break;
             }
           }

           check4End(col,i);

           if(gameOver === false)
           {
             document.getElementById('info').style.backgroundColor = color;
           }
         }

     });
   }
 }
}

init();
};
</script>

Die Styles sind relativ simpel und sollten so aufgebaut sein:

<style>
  .box
  {
    width:20px;
    height:20px;
    border:1px solid #000;
    margin:1px;
    float:left;
  }
  .clear
  {
    clear:both;
  }
</style>

Im Prinzip gibt es innerhalb des “window.load” nur drei Funktionen: die Hilfsfunktion “Attach”, mit der man neue Events anlegt, die Funktion “Check4End”, welche testet, ob ein Spiel zuende ist und die Funktion “init”, die alle Events setzt und somit das Spiel initial startet.
“Check4End” muss horizontal, vertikal und diagonal prüfen, ob eine Farbe vier in einer Reihe hat. Das ist auch schon die aufwändigste Funktion des ganzen Spiels, weil sie alle vorhandenen Reihen durchlaufen muss. Allerdings habe ich den Test auf die Reihe/Spalte der aktuellen Position beschränkt, damit etwas Geschwindigkeit eingespart werden kann.

Der BODY-Bereich hat folgenden Aufbau:

<div id="0_0" title=""></div>
<div id="1_0" title=""></div>
<div id="2_0" title=""></div>
<div id="3_0" title=""></div>
<div id="4_0" title=""></div>
<div id="5_0" title=""></div>
<div id="6_0" title=""></div>
<div></div>
<div id="0_1" title=""></div>
<div id="1_1" title=""></div>
<div id="2_1" title=""></div>
<div id="3_1" title=""></div>
<div id="4_1" title=""></div>
<div id="5_1" title=""></div>
<div id="6_1" title=""></div>
<div></div>
<div id="0_2" title=""></div>
<div id="1_2" title=""></div>
<div id="2_2" title=""></div>
<div id="3_2" title=""></div>
<div id="4_2" title=""></div>
<div id="5_2" title=""></div>
<div id="6_2" title=""></div>
<div></div>
<div id="0_3" title=""></div>
<div id="1_3" title=""></div>
<div id="2_3" title=""></div>
<div id="3_3" title=""></div>
<div id="4_3" title=""></div>
<div id="5_3" title=""></div>
<div id="6_3" title=""></div>
<div></div>
<div id="0_4" title=""></div>
<div id="1_4" title=""></div>
<div id="2_4" title=""></div>
<div id="3_4" title=""></div>
<div id="4_4" title=""></div>
<div id="5_4" title=""></div>
<div id="6_4" title=""></div>
<div></div>
<div id="0_5" title=""></div>
<div id="1_5" title=""></div>
<div id="2_5" title=""></div>
<div id="3_5" title=""></div>
<div id="4_5" title=""></div>
<div id="5_5" title=""></div>
<div id="6_5" title=""></div>
<div></div>
<br />
<div id="info"></div>
<span id="infotext">&nbsp;&nbsp;ist am Zug</span>

Die Felder habe ich alle von Hand angelegt, könnten aber auch in einer späteren Version dynamisch angelegt und mit Click-Event versehen werden. So könnte man auch dem Spieler eine Auswahl der Spielfeldgröße ermöglichen.