Das Farbwechselspiel wurde mit dem Perlenspiel-Framework programmiert. Du kannst es online spielen, um einen Eindruck von dem Spiel zu bekommen. Ziel des Spiels ist es, das Spielbrett komplett weiß einzufärben. Bei einem Klick auf ein Feld, ändert sich die Farbe des Feldes und aller Nachbarfelder.

game.js

"use strict"
 
var breite = 4;
var hoehe = 4;
var aktuellerLevel = 1;
var klicks = 0;
 
// Initializes the game
PS.init = function( system, options ) 
{
    "use strict";
 
    PS.gridSize( breite, hoehe );
    PS.fade( PS.ALL, PS.ALL, 10 );
 
    PS.statusText("Farbwechsel");
    aktuellerLevel = 1;
    starteLevel();    
};
 
function starteLevel()
{   
    for(var i=0; i<aktuellerLevel; i++)
    { 
        var zufallX = PS.random(breite) - 1;
        var zufallY = PS.random(hoehe) - 1;
        feldKlicken( zufallX, zufallY);
    }
    klicks = 0;    
}
 
// Called when the mouse button is clicked on a bead, or when a bead is touched
PS.touch = function( x, y, data, options ) 
{
    "use strict";
 
    feldKlicken(x,y);   
    if( levelGeloest() )
    {                                   
        PS.statusText("Level " + aktuellerLevel + " mit " + klicks + " Klicks gelöst!");
        PS.audioPlay("fx_coin1");       
        aktuellerLevel++;
        starteLevel();
    }
    else
    {                        
        PS.statusText(klicks + "/" + aktuellerLevel);
    }
};
 
function levelGeloest()
{
    for(var x=0 ; x<breite; x++)
    {
        for(var y=0; y<hoehe; y++)
        {
            if( PS.color(x,y) == PS.COLOR_BLACK )
            {
                return false;
            }
        }
    }
    return true;
}
 
 
function feldKlicken(x, y)
{
    PS.audioPlay("fx_click");
    farbeWechseln(x, y);
    nachbarFelderWechseln(x, y);
    klicks++;
}
 
function nachbarFelderWechseln(x, y)
{   
    farbeWechseln(x+1, y); // rechts
    farbeWechseln(x-1, y); // links
    farbeWechseln(x, y+1); // unten
    farbeWechseln(x, y-1); // oben
}
 
 
function farbeWechseln(x, y)
{
    if( !aufBrett(x, y) )
    {
        return;
    }                    
 
    if( PS.color(x,y) == PS.COLOR_WHITE )
    {
        PS.color(x, y, PS.COLOR_BLACK);
    }
    else
    {
        PS.color(x, y, PS.COLOR_WHITE);
    }
}
 
function aufBrett(x, y)
{
    return x >= 0 && x < breite &&
           y >= 0 && y < hoehe;       
}
 
 
// Called when the mouse button is released over a bead, or when a touch is lifted off a bead
PS.release = function( x, y, data, options ) {
};
 
// Called when the mouse/touch enters a bead
PS.enter = function( x, y, data, options ) {
};
 
// Called when the mouse cursor/touch exits a bead
PS.exit = function( x, y, data, options ) {
};
 
// Called when the mouse cursor/touch exits the grid perimeter
PS.exitGrid = function( options ) {
};
 
// PS.keyDown ( key, shift, ctrl, options )
PS.keyDown = function( key, shift, ctrl, options ) {
};
 
// Called when a key on the keyboard is released
PS.keyUp = function( key, shift, ctrl, options ) {
};
 
// Called when an input device event (other than mouse/touch/keyboard) is detected
PS.input = function( sensors, options ) {
};

In der zweiten Version des Spiels wechselt die Farbe der Kacheln nicht nur zwischen schwarz und weiß, sondern zwischen schwarz, grau und weiß. Die neue Version kann eben falls online gespielt werden.

Für diese neue Version mussten nur zwei Methoden angepasst werden.

function levelGeloest()
{
    for(var x=0 ; x<breite; x++)
    {
        for(var y=0; y<hoehe; y++)
        {
            if( PS.color(x,y) != PS.COLOR_WHITE )
            {
                return false;
            }
        }
    }
    return true;
}

function farbeWechseln(x, y)
{
    if( !aufBrett(x, y) )
    {
        return;
    }                    
 
    if( PS.color(x,y) == PS.COLOR_BLACK )
    {
        PS.color(x, y, PS.COLOR_GRAY );
    }
    else if( PS.color(x,y) == PS.COLOR_GRAY )
    {
        PS.color(x, y, PS.COLOR_WHITE );
    }
    else if( PS.color(x,y) == PS.COLOR_WHITE )
    {                                   
        PS.color(x, y, PS.COLOR_BLACK );    
    }
}