Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- schule:perlenspiel [2013-10-28 15:46] – +video marco.bakera
+++ schule:perlenspiel [2019-12-22 13:12] (aktuell) – link akt. marco.bakera
@@ Zeile 1: / Zeile 1: @@
 ====== 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]]. Im folgenden Video zeige ich, wie man den Klassiker "Vier Gewinnt" damit umsetzen kann. Weiter unten findet ihr den Quelltext zu diesem Spiel.
+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.
-<html>
+Ich habe bisher folgende Spiele damit programmiert.
-<iframe width="640" height="480" src="//www.youtube-nocookie.com/embed/Y7fTyAf1ebc?rel=0" frameborder="0" allowfullscreen></iframe>
-</html>
-==== Quelltext ====
+  * [[Vier Gewinnt Perlenspiel]]
+  * [[Farbwechsel Perlenspiel]]
-<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>