Comment utiliser JavaScript natif pour implémenter un jeu de puzzle simple

Le contenu de cet article explique comment utiliser JavaScript natif pour implémenter un jeu de puzzle simple. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

1. La logique de base du jeu

Si vous souhaitez utiliser un langage pour développer des jeux, vous devez d'abord comprendre comment utiliser ce langage pour implémenter quelques éléments de base. logique, comme les images, le traitement interactif, les minuteries, etc.

1. Le dessin graphique

Le dessin graphique est la base de tout. Ici, nous utilisons JavaScript pour dessiner sur canvas. Autrement dit, créez d'abord l'élément html dans canvas, puis récupérez l'élément via l'identifiant dans JavaScript et obtenez le contexte correspondant canvas via context pour préparer le dessin ultérieur.

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

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

Vous pouvez dessiner des images grâce à la méthode context de drawImage, et l'encapsulation correspondante est effectuée ici :

Remarque : Vous devez attendre les images ici Une fois le chargement terminé, dessinez à nouveau, c'est-à-dire appelez la méthode onload dans drawImage, sinon le dessin échouera.

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]);
    }
}

Après avoir dessiné l'image, nous devons également actualiser dynamiquement la vue, sinon canvas n'est qu'une image statique. S'il s'agit d'un simple rafraîchissement graphique, redessinez-le simplement à sa position d'origine et écrasez-le. Mais parfois, nous avons simplement besoin d'effacer les graphiques existants sans en dessiner de nouveaux. Par exemple, dans un puzzle, après avoir déplacé un bloc vers une autre position, la position d'origine doit être effacée.

L'objectif de la suppression peut être atteint grâce à la context méthode de clearRect. Voici le code pour effacer une certaine zone de canvas :

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

2. Traitement des événements

Après avoir dessiné les graphiques, nous devons également traiter l'événement d'entrée du joueur. , puis en fonction des événements d'entrée pour déterminer quand actualiser la vue. Les événements de saisie peuvent être divisés en trois types : les événements d’écran tactile sur les téléphones mobiles ; les événements de souris et de clavier sur les PC. La surveillance des clics de l'écran tactile et de la souris dans

JavaScript est la même, et est rappelée via l'événement canvas de onclick, comme suit :

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

Nous pouvez utiliser e.offsetX et e.offsetY pour obtenir la position du point de contact dans canvas.

Remarque : l'origine des coordonnées de canvas se trouve dans le coin supérieur gauche, c'est-à-dire que la coordonnée du coin supérieur gauche est (0, 0) .

Les clics sur les touches du clavier sont rappelés via les document onkeyup, onkeydown et d'autres événements. onkeyup fait référence à l'événement de levage du bouton et onkeydown fait référence à l'événement de pression sur le bouton. Nous pouvons savoir quelle touche spécifique est actuellement enfoncée via keyCode, puis traiter différentes logiques selon différentes touches, comme suit :

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
}

Minuterie

Parfois, en plus de La vue doit être actualisée lorsque le joueur effectue une saisie, et la vue doit être actualisée régulièrement à intervalles réguliers. Par exemple, dans un jeu de serpent, la position du serpent doit être actualisée de temps en temps.

À l'heure actuelle, nous avons besoin d'un minuteur pour exécuter un morceau de code qui actualise la vue de temps en temps. Nous implémentons la fonction timer via la méthode setInterval :

setInterval("run()", 100);

Le code ci-dessus signifie que la méthode run est exécutée toutes les 100 millisecondes.

2. La logique de base du puzzle

Avec la logique de base du jeu, voyons comment mettre en œuvre la logique du puzzle.

1. Générer une séquence aléatoire

Comme aucune séquence ne peut être restaurée par traduction, nous ne pouvons pas simplement générer une séquence aléatoire. Par exemple, la séquence 1、0、2、3、4、5、6、7、8 ne peut pas être restaurée quelle que soit la manière dont elle est traduite.

L'approche adoptée ici est la suivante : 4 séquences réductibles sont prédéfinies, une est sélectionnée au hasard parmi ces 4 séquences, puis la séquence est simulée pour plusieurs étapes de traduction. De cette manière, la diversité de la séquence initiale est assurée autant que possible, et la réductibilité de la séquence est également assurée. Le code spécifique est le suivant :

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;
        }
    }
}

2. Déterminez si le bloc peut être déplacé

Lors de l'enregistrement de la commande, 9 chiffres de 0 à 8 sont utilisés pour l'enregistrer, et le les carrés vides sont des chiffres en position 8. La seule condition pour juger s’il peut être déplacé est donc que la valeur de la position cible soit 8. Le code est le suivant :

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

La valeur de lastIndex() ci-dessus est 8.

3. Implémenter le mouvement de bloc

La mise en œuvre du mouvement de bloc est très simple. Effacez d'abord les graphiques à l'ancienne position, puis dessinez à la nouvelle position.

var refreshImagePositions = function(origin, target) {
    var originRect = rectForPosition(origin);
    context.clearRect(originRect[0], originRect[1], originRect[2], originRect[3]);
    drawImageItem(imageIndexForPosition[target], target);
}

4. Vérifiez s'il est terminé

Vérifiez si le motif a été restauré Il vous suffit de parcourir le tableau une seule fois pour voir s'il est en ordre.

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 ，然后在屏幕点击和键盘按钮响应事件的开始处添加判断，如果已经结束，则不继续走方块移动的逻辑。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!