Benutzer-Werkzeuge

Webseiten-Werkzeuge


schule:perlenspiel

Dies ist eine alte Version des Dokuments!


Das Perlenspiel-Framework

Mit Hilfe des Perlenspiel-Frameworks lassen sich einfach Spiele in Javascript programmieren. Hierfür steht dem Programmierer ein Raster aus Kästchen zur Verfügung. Diese werden im Framework „beads“ (engl. Glasperle) genannt. Die einzelnen Perlen können in eingefärbt werden und es gibt eine Methode, die auf den Mouseklick des Spielers reagiert. Mehr benötigt man nicht, um interessante Spiele damit zu realisieren.

Die c't stellt in Heft 23/2013 in dem Artikel "Wir machen nur Spaß - Ihr Einstieg in die Spiele-Entwicklung" dieses Framework und einfache Spielideen vor.

Vier Gewinnt

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.

Quelltext

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 ) {
};
schule/perlenspiel.1383215403.txt.gz · Zuletzt geändert: 19.04.2017 08:39 (Externe Bearbeitung)