Es gibt viele Programmiersprachen in denen man einen einfachen Spielautomaten bauen kann. Die wohl am besten geeignete Sprache ist aber vermutlich Javascript. Mit Javascript kann das Spiel sowohl butterweiche Animation erhalten, als auch einfach auf verschiedene Plattformen portiert werden.

In diesem Post schauen wir uns zunächst an, wie ein Spielautomat funktioniert. Unter dem Namen Sittman and Pitt werden schon seit 1891 Spielautomaten betrieben. Seitdem haben sich Spielautomaten konstant weiterentwickelt um den Ansprüchen der modernen Spieler gerecht zu werden. Durch diese Entwicklung sind Spielautomaten nach wie vor eine der beliebtesten Freizeitbeschäftigungen der Welt.

Cryptologic, die Firma die das erste Online Kasino, InterCasino, seit 1996 besitzt, arbeitet immer noch weiter an der Site und hat die verfügbaren Spiele kürzlich auf HTML5 aufgerüstet um ein größeres Publikum zu erreichen. Der Code in diesem Post wird kein so schönes Ergebnis hervorbringen wie die Spiele der Firmen die sich auf das online gaming spezialisiert haben, aber dennoch ein Gerüst bieten mit dem gezeigt werden kann, wie ein online Spielautomat mit Javascript funktioniert.

Folgend befindet sich ein von Saurabh Odhyan erstelltes Spielautomaten-Tutorial. Ihre Lösung benutzt vor allem jQuery und verschiedene Plugins für die Animationen.

Odhyans Programm besteht aus einem Sprite, das den Spielautomaten in Bewegung bringt, drei Rädern und einem Button um die Räder zu drehen.

1
2
3
4
5
6
7

function Slot(el, max, step) {
    this.speed = 0; //speed of the slot at any point of time
    this.step = step; //speed will increase at this rate
    this.si = null; //holds setInterval object for the given slot
    this.el = el; //dom element of the slot
    this.maxSpeed = max; //max speed this slot can have
}

Der Automat wird vier Funktionen haben: Start, Stop, Anzeige der finalen Position eines Rades und Reset.

• start() – Startet ein Rad
• stop() – Stoppt ein Rad
• finalPos() – Findet die Endposition des Rades wenn gestoppt wurde
• reset() – Reset für die nächste Runde

Dann müssen noch je ein Objekt für jedes Rad und Werte für die Geschwindigkeit der Drehungen erstellt werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

var a = new Slot('#slot1', 30, 1),
    b = new Slot('#slot2', 45, 2),
    c = new Slot('#slot3', 70, 3);

Slot.prototype.start = function() {
    var _this = this;
    $(_this.el).addClass('motion');
    $(_this.el).spStart();
    _this.si = window.setInterval(function() {
        if(_this.speed < _this.maxSpeed) {
            _this.speed += _this.step;
            $(_this.el).spSpeed(_this.speed);
        }
    }, 100);
};

Slot.prototype.stop = function() {
    var _this = this,
        limit = 30;
    clearInterval(_this.si);
    _this.si = window.setInterval(function() {
        if(_this.speed > limit) {
            _this.speed -= _this.step;
            $(_this.el).spSpeed(_this.speed);
        }
        if(_this.speed <= limit) {
            _this.finalPos(_this.el);
            $(_this.el).spSpeed(0);
            $(_this.el).spStop();
            clearInterval(_this.si);
            $(_this.el).removeClass('motion');
            _this.speed = 0;
        }
    }, 100);
};

Nachdem die Räder langsamer geworden sind wird ihre Endposition anhand der aktuellen Position berechnet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

Slot.prototype.finalPos = function() {
    var el = this.el,
        pos,
        posMin = 2000000000,
        best,
        bgPos,
        i,
        j,
        k;

    el_id = $(el).attr('id');
    pos = document.getElementById(el_id).style.backgroundPosition;
    pos = pos.split(' ')[1];
    pos = parseInt(pos, 10);

    for(i = 0; i < posArr.length; i++) {
        for(j = 0;;j++) {
            k = posArr[i] + (imgHeight * j);
            if(k > pos) {
                if((k - pos) < posMin) {
                    posMin = k - pos;
                    best = k;
                }
                break;
            }
        }
    }

    best += imgHeight + 4;
    bgPos = "0 " + best + "px";
    $(el).animate({
        backgroundPosition:"(" + bgPos + ")"
    }, {
        duration: 200
    });
};

Um das fertige Ergebnis der Autorin zu sehen klicke hier. Außerdem stehen die im Code benutzten Bilder auf dieser Seite zum Download bereit. Für die Animation dieses Spiels wurde Spritely benutzt, das Programm kann hier heruntergeladen werden.