HTML5-Spielframework cnGameJS-Entwicklungsdatensatz – externes Eingabemodul

1. Warum brauchen wir externe Eingabemodule?

In Spielen verwenden wir oft Operationen wie diese: Klicken Sie mit der Maus auf eine bestimmte Position und das Spielerobjekt bewegt sich an diese Position, oder drücken Sie die Richtungstasten der Maus und der Spieler bewegt sich in verschiedene Richtungen usw. Bei all diesen Vorgängen ist der Umgang mit externen Eingabegeräten erforderlich. Als Spieleentwickler müssen wir jederzeit die aktuelle Position der Maus, den Klickstatus der Tastatur usw. kennen, damit wir die Spielelemente bequem steuern können. Daher sind als SpielFramework auch externe Eingabemodule unerlässlich.

2. Welche Funktionen stehen zur Verfügung und wie werden sie genutzt?

Die Hauptfunktion des externen Eingabemoduls besteht darin, die Position der Maus relativ zur Leinwand dynamisch aufzuzeichnen und aufzuzeichnen, welche Tasten auf der Tastatur vorhanden sind gedrückt werden und die Taste gerade losgelassen wurde und die entsprechende Callback-Funktion ausgelöst wird.

Die aktuelle Position der Maus auf der Leinwand können wir über die beiden vom Rahmen gespeicherten Felder ermitteln:

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

Aufgrund von Spielprogrammierung unter Canvas Der Modus ist eine Rahmenanimation, die durch eine Spielschleife realisiert wird (die Spielschleife finden Sie unter: HTML5 Game Framework cnGameJS Development Record (Game Loop)), Daher reicht es oft aus, einfach die Tasten nach oben und unten auf der Tastatur zu binden nicht den Erwartungen entsprechen. Effekt , wenn wir beispielsweise das Element ganz nach links verschieben möchten, wenn die linke Taste auf der Tastatur gedrückt wird:

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

Wir werden feststellen, dass diese Methode das Programmiermodell für die Frame-Animation nicht sehr effizient nutzt. Da die Rückruffunktion weiterhin ausgelöst wird, wenn wir die linke Pfeiltaste auf der Tastatur drücken, kann die Auslösefrequenz nicht mit der Frequenz Ihrer Frame-Animation übereinstimmen (entweder zu schnell oder zu langsam, je nachdem). Daher ist es eine bessere Wahl, bei jeder Aktualisierung des Frames zu bestimmen, ob die linke Taste gedrückt wird. Wenn sie gedrückt wird, verschieben Sie das Spielelement an eine bestimmte Position nach links, sodass das Spielelement Teil davon wird die Frame-Animation. Mit jedem Frame aktualisiert:

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

3. Code-Implementierung

Zuerst Schauen Sie sich an, wie Sie die Position der Maus auf der Leinwand beibehalten. Die Position der Maus relativ zur Leinwand ist eigentlich der Unterschied zwischen der Position der Maus relativ zur Seite und der Position der Leinwand. Wie im vorherigen Entwicklungsbericht des HTML5-Spielframeworks cnGameJS (Kernfunktionsmodul) erwähnt, haben wir in der Initialisierungsfunktion des Frameworks die Position der Leinwand auf der Seite über getCanvasPos ermittelt, sodass die Position der Maus relativ zur Leinwand ermittelt werden kann wie folgt berechnet werden:

Schauen wir uns später an, wie Tastatureingaben aufgezeichnet werden. Wir benötigen ein Array, um das Name-Wert-Paar jeder Taste (Tastenname und Tastencode) und einige Objekte zu speichern Speichern Sie die entsprechenden Daten jeder Taste. Die Rückruffunktionen zum Drücken und Loslassen sowie das letzte Objekt enthalten die Tastennamen, die zum Deaktivieren des Standardverhaltens erforderlich sind. (Das Deaktivieren des Standardverhaltens der Tastatur ist bei der Spieleentwicklung notwendig, um zu verhindern, dass Spieler unnötige Browser-Standardverhaltensweisen auslösen, wenn sie Spielobjekte manipulieren, wie z. B. Scrollen in der Bildlaufleiste usw.).

/**
     *记录鼠标在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;
            
    }

Der erste Schritt besteht darin, ein Wörterbuch mit Schlüsselnamen und Schlüsselcodes zu erstellen:

Es ist etwas lang, aber eigentlich nicht sehr technisch. Es macht es uns nur einfacher wissen, wie der Schlüsselname eines bestimmten Codes in der Zukunft lautet. Wenn wir beispielsweise die linke Taste drücken, lautet der Vorgang: Holen Sie sich den Tastaturcode der linken Taste -> Holen Sie sich den Schlüsselnamen im Wörterbuch -> Holen Sie sich den Handler, der auch durch den Schlüsselnamen im Objekt gespeichert wurde Geben Sie den Schlüsselnamen ein und führen Sie ihn aus.

/**
     *键盘按键编码和键名
    **/    
    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] }

Der Code für den Tastaturbindungshandler lautet wie folgt:

/**
     *记录键盘按下的键
    **/    
    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);
        }
    }

Für jede Taste können mehrere Handler vorhanden sein, sodass das Objekt, das den Handler hier speichert, ein Array speichert. Darüber hinaus ist zu beachten, dass die gedrückten Tasten über das Array press_keys (pressed_keys[keyName]=true;) gespeichert werden, um die konsistente Parameteraktualisierung in der zuvor erwähnten Frame-Aktualisierung zu erleichtern (Sie können isPressed(keyName) übergeben bei jedem Update), um festzustellen, ob eine Taste gedrückt wird).

Hängen Sie abschließend den gesamten Quellcode des Eingabemoduls an:

Das obige ist der detaillierte Inhalt vonHTML5-Spielframework cnGameJS-Entwicklungsdatensatz – externes Eingabemodul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!