이 시점에서는 코드가 실제로 필요하지 않다고 말하면서 시작하고 싶습니다. 아마도 시작점이 필요합니다.
키보드 키를 사용하여 특정 페이지를 탐색 할 수있는 브라우저 확장 (크롬)을 만들려고합니다.
이 페이지는 게임에 있습니다. ( http://www.galatium.net/Faerlyn/forest.php?view=explore ) 살펴보고 싶다면 가입해야하므로 설명 만하겠습니다.
클릭 가능한 상자의 3x3 그리드입니다 (실제로 버튼이 아닙니다 ...). 가운데 상자는 클릭 할 수 없습니다.
게임 제작자는 JS (onClick 이벤트)를 사용하여 영역 (인터랙티브 포레스트)을 탐색합니다.
내가하려는 것은 각 상자의 onlick 이벤트를 키보드 키에 바인딩하는 것입니다.
기본적으로 우리는 :
북 = 8
남 = 2
동 = 6
서 = 4 북서
= 7
남서 = 1
북동 = 9
남동 = 3
Numpad 방향
이제 다양한 연구를 통해 콘텐츠 스크립트를 사용하여 자바 스크립트를 웹 페이지에 삽입해야한다는 것을 알게되었습니다.
문제는 각 상자가 다음 코드 줄에 의해 지시된다는 것입니다.
<td bgcolor="#002900" style="cursor: pointer; background-color: rgb(0, 41, 0);" onmouseover="style.backgroundColor='#003300'" onmouseout="style.backgroundColor='#002900'" onclick="window.location='?action=move&x=332&y=96'"> </td>
라인 자체는 너무 복잡하지는 않지만 OOP에 익숙하며 어떻게 참조 할 수 있는지 이해하지 못합니다.
이것이 내가 그것을하는 방법입니다.
이것이 내 JS 기능이라고 말하십시오.
function DoSomething() {}
$(document).ready(function() {
$("body").keydown(function(event) {
if(event.keyCode == arrow.left) {
DoSomething();
}
}
}
코드에는이를 포함하지 않지만 현재 X 및 Y 값을 얻은 다음 선택한 방향에 따라 값을 더하거나 빼는 GET이 있습니다.
따라서 DoSomething()"방향"이라는 매개 변수가 있습니다.
그런 다음 키 누름 이벤트에서 내 함수는 내 함수의 X 및 Y와 일치하는 상자를 "클릭"합니다.
따라서 북쪽의 경우 먼저 x = 10 및 y = 10을 찾는 get이 있습니다. 그런 다음 "8"을 누르면 x = 10 및 y = 10 + 1이 설정됩니다. 그러면 함수는 매개 변수가 내 함수의 매개 변수와 일치하는 상자를 찾아 "클릭"합니다.
내가이 일을 제대로하고 있습니까? (아니면 더 쉬운 방법이 있습니까?)
~ 함자
당신은을 사용하고 <table>이 표에서 (3)가 <tr>각각 <tr>3 개 컨테이너가
13 개의 선택 가능한 대상을 제공합니다.
jQuery를 사용하면 다음과 같은 여러 작업을 수행 할 수 있습니다.
각각 고유 한 id또는class
keypress () 액션 / 숫자 패드에서 96에서 105 사이의 키 코드를 선택합니다. 키패드에 대한 동작을 매핑 할 수 있습니다.
당신의 행동이 움직임에 대한 커밋이 명확하지 않습니다.
예 : 화면에 튀어 나온 무언가를 다루고 있는데 빠르게 방향으로 움직여야합니까? 방향 키이지만 커밋 키 누르기가 없습니다.
예 2 : 퍼즐처럼 움직일 수있는 가격 그리드가 있지만 방향을 잡기 전에 선택을 바인딩해야하고 다른 조각으로 자유롭게 이동하려면 선택 취소를해야합니다. 재 선택 ... 이동 ... 선택 취소 ... 이동 ... 선택 .
예 3 : 예 2에서 작업을 수행해야하지만 타일을 교체하고 제거 된 조각을 채우기 위해 원래 지점을 기억해야합니다. 따라서 부품의 위치가 변경됩니다. 파괴 할 수없는 조각 세트가 주어집니다. 위치 만 변경할 수 있습니다.
키 누르기와 키 매핑, 고유 ID 또는 클래스 및 선택 / 선택 취소를 사용하여 여러 항목을 결합 할 수 있지만 이벤트 최종 결과를 결정해야합니다.
테이블에서 고유 ID 또는 클래스를 사용할 수없는 경우 부모, 형제, 자식 jQuery 선택기를 사용할 수 있습니다.
다음 : 안에 무엇 <td>입니까? 이미지 또는 배경색입니까? 이미지 또는 색상을 참조하는 CSS 클래스 / ID를 할당 할 수 있습니다. 이렇게하면 이동, 제거, 유지 또는 파괴, 추가를위한 보조 선택기를 모두 파악할 수 있습니다.
할당 된 class / id 또는 parent, sibling, child를 사용하여 컨테이너 태그의 내용을 가져올 수 있습니다. 거기에서 당신이 무엇을하려고하는지 스스로 대답해야 할 것입니다. 최종 결과. 사람이이기거나지는 방법.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다