Benutzer-Werkzeuge

Webseiten-Werkzeuge


schule:perlenspiel

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
schule:perlenspiel [31.10.2013 11:30]
Marco Bakera [Das Perlenspiel-Framework]
schule:perlenspiel [22.12.2019 14:12] (aktuell)
Marco Bakera link akt.
Zeile 1: Zeile 1:
 ====== Das Perlenspiel-Framework ====== ====== Das Perlenspiel-Framework ======
  
- +Mit Hilfe des [[https://​perlenspiel.net/​|Perlenspiel-Frameworks]] lassen sich einfach Spiele in Javascript [[Programmieren|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 eingefärbt werden und es gibt eine Methode, die auf den Mausklick ​des Spielers reagiert. Mehr benötigt man nicht, um interessante Spiele damit zu realisieren. ​
-Mit Hilfe des [[http://​perlenspiel.org/​|Perlenspiel-Frameworks]] lassen sich einfach Spiele in Javascript [[Programmieren|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 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 ​ Die c't stellt in Heft 23/2013 in dem Artikel ​
Zeile 8: Zeile 7:
 - Ihr Einstieg in die Spiele-Entwicklung"​]] dieses Framework und einfache Spielideen vor. - Ihr Einstieg in die Spiele-Entwicklung"​]] dieses Framework und einfache Spielideen vor.
  
-===== Vier Gewinnt ===== +Ich habe bisher folgende Spiele ​damit programmiert.
- +
- +
-Im folgenden Video zeige ich, wie man den Klassiker "Vier Gewinnt" ​damit umsetzen kannWeiter unten findet ihr den Quelltext zu diesem Spiel. [[http://​www.bakera.de/​pintman/​VierGewinntPerlenspiel/​game.html|Das fertige Spiel]], könnt ihr online spielen. +
- +
-<​html>​ +
-<iframe width="​640"​ height="​480"​ src="//​www.youtube-nocookie.com/​embed/​Y7fTyAf1ebc?​rel=0"​ frameborder="​0"​ allowfullscreen></​iframe>​ +
-</​html>​ +
- +
-==== Quelltext ==== +
- +
-<file javascript 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 +  * [[Vier Gewinnt Perlenspiel]] 
-// It doesn'​t have to do anything +  * [[Farbwechsel Perlenspiel]]
-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 ) { 
-}; 
  
-</​file>​ 
schule/perlenspiel.1383215440.txt.gz · Zuletzt geändert: 19.04.2017 08:39 (Externe Bearbeitung)