Benutzer-Werkzeuge

Webseiten-Werkzeuge


schule:perlenspiel

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu dieser Vergleichsansicht

Both sides previous revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
Nächste Überarbeitung Both sides next revision
schule:perlenspiel [31.10.2013 11:30]
Marco Bakera [Das Perlenspiel-Framework]
schule:perlenspiel [02.02.2016 19:55]
Marco Bakera Toten Link zu Disneys Pixel Painter entfernt
Zeile 1: Zeile 1:
-====== Das Perlenspiel-Framework ====== 
  
- 
-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 ​ 
-[[http://​www.heise.de/​ct/​inhalt/​2013/​23/​112/​|"​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. [[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 
-// 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 ) { 
-}; 
- 
-</​file>​ 
schule/perlenspiel.txt · Zuletzt geändert: 22.12.2019 14:12 von Marco Bakera