Enregistrement de développement cnGameJS du cadre de jeu HTML5 - module d'entrée externe

1. Pourquoi avons-nous besoin de modules d'entrée externes ?

Dans les jeux, nous utilisons souvent des opérations comme celle-ci : cliquez avec la souris sur une certaine position et l'objet joueur se déplace vers cette position, ou appuyez sur les touches de direction de la souris et le joueur se déplace dans des directions différentes, etc. Toutes ces opérations impliquent de gérer des périphériques d'entrée externes. En tant que concepteurs de jeux, nous devons connaître à tout moment la position actuelle de la souris, l'état des clics du clavier, etc., afin de pouvoir contrôler facilement les éléments du jeu. Par conséquent, en tant que jeuframework, les modules d'entrée externes sont également essentiels.

2. Quelles fonctions sont fournies et comment les utiliser ?

La fonction principale du module d'entrée externe est d'enregistrer dynamiquement la position de la souris par rapport à la toile et d'enregistrer quelles touches du clavier sont enfoncés et qui La touche vient d'être relâchée et la fonction de rappel correspondante est déclenchée.

Nous pouvons obtenir la position actuelle de la souris sur la toile grâce aux deux champs enregistrés par le cadre :

var x=cnGame.input.mouseX;
var y=cnGame.input.mouseY;

En raison de programmation de jeu sous canevas Le mode est une animation de cadre réalisée à travers une boucle de jeu (pour la boucle de jeu, veuillez consulter : HTML5 Game Framework cnGameJS Development Record (Game Loop)), Par conséquent, lier simplement les touches du clavier vers le haut et vers le bas le fait souvent ne répond pas aux attentes. Effet , par exemple, si l'on veut faire bouger l'élément complètement vers la gauche lorsqu'on appuie sur le bouton gauche du clavier :

cnGame.input.onKeyDown("left",(){
    player.move(-10);
 })

Nous constaterons que cette méthode n'est pas très efficace. Bonne utilisation du modèle de programmation pour l'animation d'images. Puisque lorsque nous appuyons sur la touche fléchée gauche du clavier, sa fonction de rappel continuera à se déclencher, donc la fréquence de déclenchement ne peut pas être cohérente avec la fréquence de votre animation d'image (soit trop rapide, soit trop lente, selon votre fréquence d'image), donc un meilleur choix est de déterminer si le bouton gauche est enfoncé à chaque fois que l'image est mise à jour, déplacez l'élément de jeu vers une certaine position vers la gauche, afin que l'élément de jeu en fasse partie. l'animation du cadre. Avec chaque cadre Mis à jour :

/*每次帧更新调用的函数*/
var update=function(){
   cnGame.input.isPressed("left",function(){player.move(-10);})
}

3. Implémentation du code

Premier. regardez comment garder la souris La position sur la toile. La position de la souris par rapport au canevas est en fait la différence entre la position de la souris par rapport à la page et la position du canevas. Comme mentionné dans l'enregistrement de développement cnGameJS du framework de jeu HTML5 précédent (module de fonction de base), dans la fonction d'initialisation du framework, nous avons obtenu la position du canevas sur la page via getCanvasPos, donc la position de la souris par rapport au canevas peut être calculé comme suit :

/**
     *记录鼠标在canvas内的位置
    **/    
    var recordMouseMove=function(eve){
        var pageX,pageY,x,y;
        eve=cg.core.getEventObj(eve);
        pageX = eve.pageX || eve.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
        pageY = eve.pageY || eve.clientY + document.documentElement.scrollTop - document.documentElement.clientTop;
        cg.input.mouseX=pageX-cg.x;
        cg.input.mouseY=pageY-cg.y;
            
    }

Voyons comment enregistrer la saisie au clavier plus tard. Nous avons besoin d'un tableau pour enregistrer la paire nom-valeur de chaque touche (nom de la touche et code de la touche) et de certains objets. enregistrez les données correspondantes de chaque touche. Les fonctions de rappel pour appuyer et relâcher, et le dernier objet, contiennent les noms de touches qui doivent désactiver le comportement par défaut. (La désactivation du comportement par défaut du clavier est nécessaire dans le développement de jeux pour empêcher les joueurs de déclencher des comportements par défaut inutiles du navigateur lors de la manipulation d'objets de jeu, tels que le défilement de la barre de défilement, etc.).

La première étape consiste à créer un dictionnaire de noms de clés et de codes de clés :

/**
     *键盘按键编码和键名
    **/    
    var k=[];
    k[8] = "backspace"
    k[9] = "tab"
    k[13] = "enter"
    k[16] = "shift"
    k[17] = "ctrl"
    k[18] = "alt"
    k[19] = "pause"
    k[20] = "capslock"
    k[27] = "esc"
    k[32] = "space"
    k[33] = "pageup"
    k[34] = "pagedown"
    k[35] = "end"
    k[36] = "home"
    k[37] = "left"
    k[38] = "up"
    k[39] = "right"
    k[40] = "down" 
    k[45] = "insert"
    k[46] = "delete"
    
    k[91] = "leftwindowkey"
    k[92] = "rightwindowkey"
    k[93] = "selectkey"
    k[106] = "multiply"
    k[107] = "add"
    k[109] = "subtract"
    k[110] = "decimalpoint"
    k[111] = "divide"
    
    k[144] = "numlock"
    k[145] = "scrollock"
    k[186] = "semicolon"
    k[187] = "equalsign"
    k[188] = "comma"
    k[189] = "dash"
    k[190] = "period"
    k[191] = "forwardslash"
    k[192] = "graveaccent"
    k[219] = "openbracket"
    k[220] = "backslash"
    k[221] = "closebracket"
    k[222] = "singlequote"
    
    var numpadkeys = ["numpad1","numpad2","numpad3","numpad4","numpad5","numpad6","numpad7","numpad8","numpad9"]
    var fkeys = ["f1","f2","f3","f4","f5","f6","f7","f8","f9"]
    var numbers = ["0","1","2","3","4","5","6","7","8","9"]
    var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]
    for(var i = 0; numbers[i]; i++)     { k[48+i] = numbers[i] }
    for(var i = 0; letters[i]; i++)     { k[65+i] = letters[i] }
    for(var i = 0; numpadkeys[i]; i++)  { k[96+i] = numpadkeys[i] }
    for(var i = 0; fkeys[i]; i++)       { k[112+i] = fkeys[i] }

C'est un peu long, mais ce n'est en fait pas très technique. Cela nous facilite simplement la tâche. savoir quel est le nom clé d'un certain code dans le futur. Par exemple, si nous appuyons sur le bouton gauche, le processus est le suivant : obtenir le code clavier du bouton gauche -> obtenir le nom de la clé dans le dictionnaire -> le nom de la clé et exécutez-le.

Le code du gestionnaire de liaison clavier est le suivant :

/**
     *记录键盘按下的键
    **/    
    var recordPress=function(eve){
        eve=cg.core.getEventObj(eve);
        var keyName=k[eve.keyCode];
        pressed_keys[keyName]=true;    
        if(keydown_callbacks[keyName]){
            for(var i=0,len=keydown_callbacks[keyName].length;i<len;i++){
                keydown_callbacks[keyName][i]();
                
            }
        
        }
        if(keydown_callbacks["allKeys"]){
            for(var i=0,len=keydown_callbacks["allKeys"].length;i<len;i++){
                keydown_callbacks["allKeys"][i]();
                
            }
        }
        if(preventDefault_keys[keyName]){
            cg.core.preventDefault(eve);
        }
    }

Il peut y avoir plusieurs gestionnaires pour chaque touche, donc l'objet qui enregistre le gestionnaire ici enregistre un tableau. De plus, il est à noter que les touches enfoncées sont enregistrées via le tableau pressing_keys (pressed_keys[keyName]=true;), afin de faciliter la mise à jour cohérente des paramètres dans la mise à jour du frame mentionnée précédemment (vous pouvez passer isPressed(keyName) dans chaque mise à jour) pour déterminer si une touche est enfoncée).

Enfin, joignez tout le code source du module d'entrée :

/**
 *
 *输入记录模块
 *
**/
cnGame.register("cnGame.input",function(cg){
                                            
    this.mouseX=0;
    this.mouseY=0;
    /**
     *记录鼠标在canvas内的位置
    **/    
    var recordMouseMove=function(eve){
        var pageX,pageY,x,y;
        eve=cg.core.getEventObj(eve);
        pageX = eve.pageX || eve.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
        pageY = eve.pageY || eve.clientY + document.documentElement.scrollTop - document.documentElement.clientTop;
        cg.input.mouseX=pageX-cg.x;
        cg.input.mouseY=pageY-cg.y;
            
    }        
    
    cg.core.bindHandler(window,"mousemove",recordMouseMove);
    
    /**
     *被按下的键的集合
    **/    
    var pressed_keys={};
    /**
     *要求禁止默认行为的键的集合
    **/    
    var preventDefault_keys={};
    /**
     *键盘按下触发的处理函数
    **/    
    var keydown_callbacks={};
    /**
     *键盘弹起触发的处理函数
    **/    
    var keyup_callbacks={};

    
    /**
     *键盘按键编码和键名
    **/    
    var k=[];
    k[8] = "backspace"
    k[9] = "tab"
    k[13] = "enter"
    k[16] = "shift"
    k[17] = "ctrl"
    k[18] = "alt"
    k[19] = "pause"
    k[20] = "capslock"
    k[27] = "esc"
    k[32] = "space"
    k[33] = "pageup"
    k[34] = "pagedown"
    k[35] = "end"
    k[36] = "home"
    k[37] = "left"
    k[38] = "up"
    k[39] = "right"
    k[40] = "down" 
    k[45] = "insert"
    k[46] = "delete"
    
    k[91] = "leftwindowkey"
    k[92] = "rightwindowkey"
    k[93] = "selectkey"
    k[106] = "multiply"
    k[107] = "add"
    k[109] = "subtract"
    k[110] = "decimalpoint"
    k[111] = "divide"
    
    k[144] = "numlock"
    k[145] = "scrollock"
    k[186] = "semicolon"
    k[187] = "equalsign"
    k[188] = "comma"
    k[189] = "dash"
    k[190] = "period"
    k[191] = "forwardslash"
    k[192] = "graveaccent"
    k[219] = "openbracket"
    k[220] = "backslash"
    k[221] = "closebracket"
    k[222] = "singlequote"
    
    var numpadkeys = ["numpad1","numpad2","numpad3","numpad4","numpad5","numpad6","numpad7","numpad8","numpad9"]
    var fkeys = ["f1","f2","f3","f4","f5","f6","f7","f8","f9"]
    var numbers = ["0","1","2","3","4","5","6","7","8","9"]
    var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]
    for(var i = 0; numbers[i]; i++)     { k[48+i] = numbers[i] }
    for(var i = 0; letters[i]; i++)     { k[65+i] = letters[i] }
    for(var i = 0; numpadkeys[i]; i++)  { k[96+i] = numpadkeys[i] }
    for(var i = 0; fkeys[i]; i++)       { k[112+i] = fkeys[i] }
    
    /**
     *记录键盘按下的键
    **/    
    var recordPress=function(eve){
        eve=cg.core.getEventObj(eve);
        var keyName=k[eve.keyCode];
        pressed_keys[keyName]=true;    
        if(keydown_callbacks[keyName]){
            for(var i=0,len=keydown_callbacks[keyName].length;i<len;i++){
                keydown_callbacks[keyName][i]();
                
            }
        
        }
        if(keydown_callbacks["allKeys"]){
            for(var i=0,len=keydown_callbacks["allKeys"].length;i<len;i++){
                keydown_callbacks["allKeys"][i]();
                
            }
        }
        if(preventDefault_keys[keyName]){
            cg.core.preventDefault(eve);
        }
    }
    /**
     *记录键盘松开的键
    **/    
    var recordUp=function(eve){
        eve=cg.core.getEventObj(eve);
        var keyName=k[eve.keyCode];
        pressed_keys[keyName]=false;
        if(keyup_callbacks[keyName]){
            for(var i=0,len=keyup_callbacks[keyName].length;i
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!