HTML5 게임 프레임워크 cnGameJS 개발 기록 - 외부 입력 모듈
- 黄舟원래의
- 2017-03-24 16:13:371770검색
1. 외부 입력 모듈은 왜 필요한가요?
게임에서 우리는 종종 다음과 같은 작업을 사용합니다. 특정 위치에서 마우스를 클릭하면 플레이어 개체가 해당 위치로 이동하거나 마우스 방향 키를 누르면 플레이어가 이동합니다. 등등. 이러한 모든 작업에는 외부 입력 장치를 다루는 작업이 포함됩니다. 게임 디자이너로서 우리는 마우스의 현재 위치, 키보드의 클릭 상태 등을 언제든지 알아야 게임 요소를 편리하게 제어할 수 있습니다. 따라서 게임프레임워크로서 외부 입력 모듈도 필수적이다.
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;)을 통해 저장된다는 점에 유의해야 합니다. 각 업데이트) 키를 눌렀는지 확인합니다).
마지막으로 입력 모듈의 모든 소스 코드를 첨부합니다.
/**
*
*输入记录模块
*
**/
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!