HTML5ゲームフレームワーク cnGameJS開発記録 - 外部入力モジュール-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5ゲームフレームワーク cnGameJS開発記録 - 外部入力モジュール

黄舟

Mar 24, 2017 pm 04:13 PM

1. 外部入力モジュールが必要なのはなぜですか?

ゲームでは、特定の位置でマウスをクリックするとプレイヤーオブジェクトがその位置に移動したり、マウスの方向キーを押すとプレイヤーが別の方向に移動したりするなど、ゲームでこのような操作をよく使用します。これらの操作にはすべて、外部入力デバイスの処理が含まれます。ゲームデザイナーは、ゲーム要素を便利に制御できるように、マウスの現在位置やキーボードのクリック状態などを常に把握する必要があります。したがって、ゲームフレームワークとして、外部入力モジュールも不可欠です。

2. どのような機能があり、その使い方は何ですか?

外部入力モジュールの主な機能は、キャンバスに対するマウスの位置を動的に記録し、キーボードのどのキーが押されたのか、どのキーが放されたのかを記録し、対応するキーをトリガーすることです。コールバック関数。

フレームによって保存された 2 つのフィールドを通じて、キャンバス上のマウスの現在位置を取得できます:

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

ログイン後にコピー

キャンバスの下のゲームプログラミングモードは、ゲームループを通じて実装されるフレームアニメーションであるため (ゲーム用)ループについては、HTML5 ゲームフレームワーク cnGameJS 開発記録 (ゲームループ)) を参照してください。 したがって、キーボードのキーアップとキーダウンをバインドするだけでは、多くの場合、目的の効果を達成できないことがあります たとえば、左ボタンが押されたときに要素を一定に保ちたい場合。キーボードを押した左に移動:

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

ログイン後にコピー

この方法は、フレームアニメーションプログラミングモデルではうまく機能しないことがわかります。キーボードの左矢印キーを押すと、そのコールバック関数がトリガーされ続けるため、トリガー頻度はフレームアニメーションの頻度と一致できません (フレーム周波数に応じて、速すぎるか遅すぎるかのいずれか)。より良いオプションは、フレームが更新されるたびに左ボタンが押されるかどうかを判断することです。押された場合は、ゲーム要素がフレームアニメーションの一部となって更新されるように、ゲーム要素を特定の位置だけ左に移動します。フレームの更新ごとに:

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

ログイン後にコピー

3. コードの実装

まず、マウスをキャンバスの位置に保持する方法を見てください。キャンバスに対するマウスの位置は、実際には、ページに対するマウスの位置とキャンバスの位置の差です。前回の HTML5 ゲームフレームワーク cnGameJS 開発記録（コア機能モジュール）で述べたように、フレームワークの初期化関数では、getCanvasPos によってページ上のキャンバスの位置を取得しているので、キャンバスに対するマウスの相対位置を取得できます。

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

ログイン後にコピー

後でキーボード入力を記録する方法を見てみましょう。各キーの名前と値のペア (キー名とキーコード) を保存するための配列と、押されたデータと離されたデータを保存するためのいくつかのオブジェクトが必要です。各キーに対応するコールバック関数と最後のオブジェクトは、デフォルトの動作を無効にする必要があるキー名を保持します。 (キーボードのデフォルト動作を無効にすることは、スクロールバーのスクロールなどのゲームオブジェクトを操作するときにプレーヤーが不必要なブラウザのデフォルト動作をトリガーするのを防ぐためにゲーム開発で必要です)。

最初のステップは、キー名とキーコードの辞書を作成することです:

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

ログイン後にコピー

キーごとに複数のハンドラーが存在する可能性があるため、ここでハンドラーを保存するオブジェクトは配列です。さらに、前述したフレーム更新で一貫したパラメータ更新を容易にするために、押されたキーが pressed_keys 配列 (pressed_keys[keyName]=true;) を通じて保存されることに注意してください (isPressed(keyName) を渡すことができます)各更新)、キーが押されたかどうかを判断します)。

最後に、入力モジュールのすべてのソースコードを添付します:

/**
 *
 *输入记录模块
 *
**/
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ログイン後にコピー

以上がHTML5ゲームフレームワーク cnGameJS開発記録 - 外部入力モジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。