So verwenden Sie natives JavaScript, um ein einfaches Puzzlespiel zu implementieren

Der Inhalt dieses Artikels befasst sich mit der Verwendung von nativem JavaScript zur Implementierung eines einfachen Puzzlespiels. Ich hoffe, dass er für Sie hilfreich ist . .

1. Die grundlegende Logik des Spiels

Wenn Sie eine Sprache zum Entwickeln von Spielen verwenden möchten, müssen Sie zunächst verstehen, wie Sie diese Sprache verwenden, um einige grundlegende zu implementieren Logik wie Bilder, interaktive Verarbeitung, Timer usw.

1. Grafisches Zeichnen

Grafisches Zeichnen ist die Grundlage von allem. Hier verwenden wir JavaScript, um auf canvas zu zeichnen. Das heißt, erstellen Sie zuerst das html-Element in canvas, rufen Sie dann das Element über die ID in JavaScript ab und rufen Sie den entsprechenden Kontext canvas über context ab, um das nachfolgende Zeichnen vorzubereiten.

<canvas id="background" width="450px" height="450px"></canvas>

rrree

Sie können Bilder mit der context-Methode von drawImage zeichnen, und die entsprechende Kapselung wird hier durchgeführt:

Hinweis: Sie müssen warten bis Das Bild wird geladen, bevor Sie fortfahren. Rufen Sie die Methode onload in drawImage auf, andernfalls schlägt das Zeichnen fehl.

var background = document.getElementById("background");
var context = background.getContext('2d');

Nach dem Zeichnen des Bildes müssen wir auch die Ansicht dynamisch aktualisieren, sonst ist canvas nur ein statisches Bild. Wenn es sich um eine einfache Grafikaktualisierung handelt, zeichnen Sie sie einfach an der ursprünglichen Position neu und überschreiben Sie sie. Aber manchmal müssen wir einfach die vorhandenen Grafiken löschen, ohne neue zu zeichnen. Beispielsweise muss bei einem Puzzle nach dem Verschieben eines Blocks an eine andere Position die ursprüngliche Position gelöscht werden.

Der Zweck der Entfernung kann durch die contextMethode von clearRect erreicht werden. Das Folgende ist der Code zum Löschen eines bestimmten Bereichs von canvas:

var drawImageItem = function(index, position) {
    var img = new Image();
    img.src = './image/dog_0' + String(index+1) + '.jpg';
    img.onload = () => {
        var rect = rectForPosition(position);
        context.drawImage(img, rect[0], rect[1], rect[2], rect[3]);
    }
}

2. Ereignisverarbeitung

Nach dem Zeichnen der Grafiken müssen wir auch das Eingabeereignis des Spielers verarbeiten Anschließend wird basierend auf dem Eingabeereignis entschieden, wann die Ansicht aktualisiert werden soll. Eingabeereignisse können in drei Typen unterteilt werden: Touchscreen-Ereignisse auf Mobiltelefonen; Maus- und Tastaturereignisse auf PCs. Die Überwachung von Touchscreen- und Mausklicks in

JavaScript ist identisch und wird durch das canvas-Ereignis von onclick wie folgt zurückgerufen:

var originRect = rectForPosition(origin);
context.clearRect(originRect[0], originRect[1], originRect[2], originRect[3]);

Wir können bestehen e.offsetX , e.offsetY um die Position des Berührungspunkts in canvas zu ermitteln.

Hinweis: Der Koordinatenursprung von canvas liegt in der oberen linken Ecke, d. h. die Koordinate der oberen linken Ecke ist (0, 0).

Tastaturtastenklicks werden durch Ereignisse wie document und onkeyup von onkeydown zurückgerufen. onkeyup bezieht sich auf das Tastenanhebungsereignis und onkeydown auf das Tastendruckereignis. Über keyCode können wir erkennen, welche Taste gerade gedrückt wird, und dann je nach Taste unterschiedliche Logik handhaben, wie folgt:

// 屏幕点击
background.onclick = function(e) {
};

3. Timer

Manchmal, außer wenn der Spieler die Ansicht muss bei der Eingabe aktualisiert werden und die Ansicht muss regelmäßig in regelmäßigen Abständen aktualisiert werden. Beispielsweise muss bei einem Schlangenspiel die Position der Schlange von Zeit zu Zeit aktualisiert werden.

Zu diesem Zeitpunkt benötigen wir einen Timer, um einen Code auszuführen, der die Ansicht von Zeit zu Zeit aktualisiert. Wir implementieren die Timer-Funktion über die Methode setInterval:

if (event.keyCode == '37') {  // 左
    // do something
} else if (event.keyCode == '38') { // 上
    // do something
} else if (event.keyCode == '39') { // 右
    // do something
} else if (event.keyCode == '40') { // 下
    // do something
}

Der obige Code bedeutet, dass die Methode run alle 100 Millisekunden ausgeführt wird.

2. Die Grundlogik des Puzzles

Lassen Sie uns anhand der Grundlogik des Spiels einen Blick darauf werfen, wie die Logik des Puzzles umgesetzt wird.

1. Erzeugen Sie eine Zufallssequenz

Da nicht jede Sequenz durch Übersetzung wiederhergestellt werden kann, können wir nicht einfach eine Zufallssequenz generieren. Beispielsweise kann die Sequenz 1、0、2、3、4、5、6、7、8 nicht wiederhergestellt werden, egal wie sie übersetzt wird.

Der hier verfolgte Ansatz ist: 4 reduzierbare Sequenzen werden voreingestellt, eine wird zufällig aus diesen 4 Sequenzen ausgewählt und dann wird die Sequenz für mehrere Übersetzungsschritte simuliert. Auf diese Weise wird die Diversität der Ausgangssequenz so weit wie möglich sichergestellt und auch die Reduzierbarkeit der Sequenz sichergestellt. Der spezifische Code lautet wie folgt:

setInterval("run()", 100);

2. Bestimmen Sie, ob der Block verschoben werden kann

Beim Speichern der Bestellung werden 9 Zahlen von 0 bis 8 zum Speichern verwendet und das leere Quadrat ist der Standort Nummer 8. Die einzige Bedingung für die Beurteilung, ob es verschoben werden kann, ist also, ob der Wert der Zielposition 8 ist. Der Code lautet wie folgt:

var setupRandomPosition = function() {
    var list1 = [4, 3, 2, 8, 0, 7, 5, 6, 1];
    var list2 = [2, 0, 5, 6, 8, 7, 3, 1, 4];
    var list3 = [3, 7, 2, 4, 1, 6, 8, 0, 5];
    var list4 = [3, 2, 4, 1, 7, 6, 5, 0, 8];
    var lists = [list1, list2, list3, list4];

    imageIndexForPosition = lists[parseInt(Math.random() * 4)];

    // 获取空位位置
    var emptyPosition = 0;
    for (var i = imageIndexForPosition.length - 1; i >= 0; i--) {
        if (imageIndexForPosition[i] == lastIndex()) {
            emptyPosition = i;
            break;
        }
    }
    background.emptyPosition = emptyPosition;

    // 随机移动次数
    var times = 10;
    while (times--) {
        // 获取随机数，决定空位哪个位置进行移动
        var direction = parseInt(Math.random() * 4);

        var target = -1;
        if (direction == 0) {
            target = topOfPosition(emptyPosition);  // 上
        } else if (direction == 1) {
            target = leftOfPosition(emptyPosition);  // 左 
        } else if (direction == 2) {
            target = rightOfPosition(emptyPosition);  // 右
        } else if (direction == 3) {
            target = bottomOfPosition(emptyPosition);  // 下
        }
        if (target < 0 || target > lastIndex()) {  // 位置不合法，继续下一次循环
            continue;
        }
        var result = moveImageIfCanAtPosition(target);
        if (result >= 0) { // 如果移动成功，更新空位的位置
            emptyPosition = target;
        }
    }
}

Der Wert von lastIndex() oben ist 8.

3. Blockverschiebung implementieren

Die Implementierung der Blockverschiebung ist sehr einfach. Löschen Sie zunächst die Grafiken an der alten Position und zeichnen Sie dann an der neuen Position.

var isPositionEmpty = function(position) {
    if (position < 0 || position > lastIndex()) {
        return false;
    } 
    if (imageIndexForPosition[position] == lastIndex()) {
        return true;
    } else {
        return false;
    }
}

Überprüfen Sie, ob es abgeschlossen ist

Überprüfen Sie, ob das Muster wiederhergestellt wurde. Sie müssen das Array nur einmal durchlaufen, um zu sehen, ob es in Ordnung ist.

var checkIfFinish = function() {
    for (var index = 0; index < imageIndexForPosition.length; index++) {
        if (index != imageIndexForPosition[index]) {
            return false;
        }
    }
    return true;
}

5、交互事件屏蔽

当图案还原之后，我们不希望玩家还能通过键盘或鼠标来移动方块，这个时候就需要对交互事件进行屏蔽。

只需要一个标志位就可以达到这个目的:

// 屏幕点击
background.onclick = function(e) {
    if (isFinish) {
        return;
    }

    // do something
};

// 键盘按钮事件
document.onkeyup = function(event) {
    if (isFinish) {
        return;
    }

    // do something
}

当图案还原之后，标志位 isFinish 会被置为 true ，然后在屏幕点击和键盘按钮响应事件的开始处添加判断，如果已经结束，则不继续走方块移动的逻辑。

Das obige ist der detaillierte Inhalt vonSo verwenden Sie natives JavaScript, um ein einfaches Puzzlespiel zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!