Mit Hilfe des Perlenspiel-Frameworks lassen sich einfach Spiele in Javascript programmieren.

Im folgenden Video zeige ich, wie man den Klassiker „Vier Gewinnt“ damit umsetzen kann. Weiter unten findet ihr den Quelltext zu diesem Spiel. Das fertige Spiel, könnt ihr online spielen.

game.js

"use strict"
 
var aktuellerSpieler; // 1 oder 2 
var spielBeendet;
 
// All of the functions below MUST exist, or the engine will complain!
 
// PS.init( system, options )
// Initializes the game
// This function should normally begin with a call to PS.gridSize( x, y )
// where x and y are the desired initial dimensions of the grid
// [system] = an object containing engine and platform information; see documentation for details
// [options] = an object with optional parameters; see documentation for details
PS.init = function( system, options )
{
    "use strict";
 
    PS.gridSize( 7, 6 );
 
    PS.statusText("Vier Gewinnt (Marco Bakera)");
    aktuellerSpieler = 1;
    spielBeendet = false;
};
 
function spielerWechseln()
{
    if(spielBeendet)
    {                        
        return;
    }
 
    if(aktuellerSpieler == 1)
    {
        aktuellerSpieler = 2;
    }
    else
    {
        aktuellerSpieler = 1;
    }          
    PS.statusText("Spieler am Zug: " + aktuellerSpieler);
}
 
// PS.touch ( x, y, data, options )
// Called when the mouse button is clicked on a bead, or when a bead is touched
// It doesn't have to do anything
// [x] = zero-based x-position of the bead on the grid
// [y] = zero-based y-position of the bead on the grid
// [data] = the data value associated with this bead, 0 if none has been set
// [options] = an object with optional parameters; see documentation for details
PS.touch = function( x, y, data, options ) 
{
    "use strict";                               
 
    if(spielBeendet)
    {      
        PS.audioPlay("fx_uhoh");    
        return;
    }
 
    PS.audioPlay( "fx_click" );
    var erfolg = einwerfen(x);
    if(!erfolg)
    {        
        PS.audioPlay("fx_uhoh");
        return;
    }
 
    gewinnPruefen();
    spielerWechseln();      
};
 
function einwerfen(spalte)
{
    for(var y=5; y>=0; y--)
    {
        if(feldFrei(spalte, y))
        {                                          
            PS.color(spalte, y, aktuelleFarbe());
            return true;
        }
    }
    return false;
}
 
function feldFrei(x, y)
{
    return PS.color(x,y) == PS.COLOR_WHITE;
}
 
function aktuelleFarbe()
{
    if(aktuellerSpieler == 1)
    {
        return PS.COLOR_RED;
    }
    else
    {
        return PS.COLOR_YELLOW;
    }
}
 
function gewinnPruefenAlleRichtungen()
{
    for(var x=0; x<=6; x++)
    {
        for(var y=0; y<=5; y++)
        {
            var vierGefunden = suche4InAlleRichtungen(x, y);
            if( vierGefunden)
            {
                return true;
            }
        }
    }
    return false;
}
 
function suche4InAlleRichtungen(x, y)
{
    var waagerechtRechts = 0;   // -
    var senkrechtUnten = 0;     // |
    var diagonalAufwaerts = 0;  // /
    var diagonalAbwaerts = 0;   // \
 
    for(var i=0; i<=3; i++)
    {
        if(eigenerStein(x + i, y))
        {
            waagerechtRechts++;
        }                      
        if(eigenerStein(x, y + i))
        {
            senkrechtUnten++;
        }                         
        if(eigenerStein(x + i, y - i))
        {
            diagonalAufwaerts++;
        }             
        if(eigenerStein(x + i, y + i))
        {
            diagonalAbwaerts++;
        }
    }
 
    if(waagerechtRechts == 4 || senkrechtUnten == 4 ||
        diagonalAufwaerts == 4 || diagonalAbwaerts == 4)
    {
        return true;
    }
    else
    {
        return false;
    }
}
 
function eigenerStein(x, y)
{
    if(x >= 0 && x <= 6 && y >= 0 && y <= 5)
    {
        return PS.color(x, y) == aktuelleFarbe();
    } 
    else
    {
        return false;
    }
}
 
function gewinnPruefen()
{   
    if( gewinnPruefenAlleRichtungen() )
    {
        gewinnMelden();
        spielBeendet = true;
    }                     
 
    if(brettVoll())
    {
        PS.statusText("Unentschieden");
        PS.audioPlay("fx_hoot");                     
        spielBeendet = true;
    }
}
 
function brettVoll()
{
    var freiePlaetze = 0;
    for(var x=0; x<=6; x++)
    {
        for(var y=0; y<=5; y++)
        {
            if( feldFrei(x,y) )
            {
                freiePlaetze++;
            }
        }
    }
    return freiePlaetze == 0;
}
 
function gewinnMelden()
{
    PS.audioPlay("fx_tada");
    PS.statusText("Spieler " + aktuellerSpieler + " hat gewonnen!");
}
 
// Called when the mouse button is released over a bead, or when a touch is lifted off a bead
// It doesn't have to do anything
PS.release = function( x, y, data, options ) {
};
 
// Called when the mouse/touch enters a bead
// It doesn't have to do anything
PS.enter = function( x, y, data, options ) {
};
 
// Called when the mouse cursor/touch exits a bead
// It doesn't have to do anything
PS.exit = function( x, y, data, options ) {
};
 
// Called when the mouse cursor/touch exits the grid perimeter
// It doesn't have to do anything
PS.exitGrid = function( options ) {
};
 
// Called when a key on the keyboard is pressed
// It doesn't have to do anything
PS.keyDown = function( key, shift, ctrl, options ) {
};
 
// Called when a key on the keyboard is released
// It doesn't have to do anything
PS.keyUp = function( key, shift, ctrl, options ) {
};
 
// Called when an input device event (other than mouse/touch/keyboard) is detected
// It doesn't have to do anything
PS.input = function( sensors, options ) {
};