> 웹 프론트엔드 > JS 튜토리얼 > 재미와 이익을위한 JavaScript 해킹 : 1 부

재미와 이익을위한 JavaScript 해킹 : 1 부

William Shakespeare
풀어 주다: 2025-03-10 00:29:10
원래의
353명이 탐색했습니다.

재미와 이익을위한 JavaScript 해킹 : 1 부 JavaScript는 지난 몇 년 동안 웹 개발 및 디자인 경험의 많은 부분이되었습니다. 이를 통해 둔하고 정적 페이지를 가문화하고 페이지 새로 고침을 피하고 HTML과 CSS 만 사용하여 불가능했던 것들을 인터페이스 엔지니어링하는 놀라운 업적을 달성 할 수 있습니다. 물론 Ajax 및 Dom 스크립팅은 현재 공장에서 실행되는 것으로 보이며 웹 사이트를 구축 할 때 모든 웹 개발자의 도구 키트의 일부입니다. 그러나 우리는 그것을 얼마나 멀리 밀어 넣을 수 있습니까? 풍부한 출력 메커니즘을 가진 강력하고 객체 지향 언어이므로 팝업 창을 시작하는 것보다 더 많이 사용할 수 있습니까?

그러한 질문에 직면했을 때 자존심이있는 괴짜는 무엇을합니까? 그들은 물론 2D 사이드 스크롤 플랫폼 게임을 씁니다!

이 두 부분으로 구성된 시리즈에서는 자신만의 JavaScript 플랫폼 게임을 구축 할 수있는 충분한 HTML, CSS 및 JavaScript를 배울 수 있습니다. 예제에서 프로토 타입 JavaScript 라이브러리를 사용했습니다. 단순히 내가 아는 것이기 때문입니다. 사용 가능한 다른 JavaScript 라이브러리는 동등한 기능을 가질 수 있습니다.

우리가 재미있는 물건에 도달하기 전에, 우리는 고급 JavaScript 기술을 통해 브라우저가 8 비트 게임 콘솔이라고 생각하도록 할 수 있도록해야합니다.

키 테이크 아웃

JavaScript는 정적 HTML/CSS 기능을 넘어 동적 상호 작용 및 인터페이스 개선을 허용하여 웹 개발을 향상시킵니다. 프로토 타입 JavaScript 라이브러리는 JavaScript의 클래스 생성 및 상속을 단순화하여 복잡한 기능을보다 쉽게 ​​구축 할 수 있습니다. JavaScript의 프로토 타입 상속은 언어의 고전적인 OOP 상속에 대한 기본 지원 부족에도 불구하고 정교한 객체 지향 패턴을 만들기 위해 모방 될 수 있습니다. 애니메이션에 JavaScript를 사용하는 것은 CSS 속성을 조작하고 프레임 변경을 처리하고 부드러운 시각적 전환을 보장하기 위해 타이머를 사용하는 것이 포함됩니다. JavaScript의 이벤트 처리는 대화 형 애플리케이션에 중요하며 프로토 타입과 같은 라이브러리에서 제공되는 방법은 브라우저 불일치를 처리하고 개발 프로세스를 간소화합니다.

구성 101 JavaScript (JS)는 프로토 타입 객체 지향 프로그래밍 (OOP) 언어입니다. 이는 코드 내의 객체로 구성물 (예 : 비디오 게임 캐릭터)을 표현할 수 있음을 의미합니다. 더 전통적인 OOP 언어에 익숙하다면 JS 클래스를 구축하는 것이 조금 이상하게 보일 수 있습니다. 우선 루비와 같이 모든 것이 대상이 아니라 JS의 모든 것이 데이터 유형입니다. 이러한 데이터 유형에는 프로토 타입이라고하는 내부 데이터 유형이있어 데이터 유형이 작동하는 방법을 알려줍니다. 따라서 우리는 클래스를 그와 같은 방식으로 정의해야합니다.

    는 그것이 클래스
  1. 라는 것을 알고 있습니다 는 정의 된 초기 상태로 생성 및 초기화 될 수 있습니다.
  2. 새 클래스를 구축하는 일부 JS 코드를보고 새 개체를 만듭니다 :
    이 코드를 통해 한 눈에는 3 개의 속성 (요소, x 및 y)과 1 개의 기능 (Walk)이있는 Walkingsprite라는 새로운 클래스를 구축했음을 보여줍니다. 우리가 instantiate
  3. 객체의 새 버전을 인스턴스화하고 워크 함수라고 부르면, 우리의 Koopa 객체는 이제 좌표 지점 (20, 30)에있을 것입니다. 이 방법으로 수업을 선언하는 것은 약간 번거 롭습니다. 클래스를 만들고 프로토 타입을 업데이트해야합니다. 고맙게도 프로토 타입 (라이브러리)은 클래스라는 편리한 함수로 캡슐화했습니다. 위의 코드는 다음과 같습니다
  4. 클래스 상속 작업 OOP의 또 다른 기본 요소는 상속의 개념입니다. 기본적으로 특정 변수와 함수가있는 기본 클래스가있는 경우 를 확장하는 모든 클래스 를 상속하는 모든 클래스. 그런 다음 추가 기능을 추가하고 해당 기능을 무시하여 다른 작업을 수행 할 수도 있습니다. 우리의 모든 캐릭터는 아마도 몇 가지 일반적인 속성을 나타낼 것이기 때문에 이것은 우리 게임에서 정말 유용 할 수 있습니다. 아마도 화면 주위를 걸을 수있을 수도 있지만 한 가지 유형의 캐릭터 만 점프 할 수 있습니다. 상속을위한 완벽한 후보처럼 들립니다.

불행히도 JavaScript는 기본적으로 상속을 지원하지 않습니다. 그렇다면 왜 마지막 단락을 낭비 했습니까? 글쎄, 약간의 속임수로, 우리는 JavaScript의 클래스 상속을 모방 할 수 있습니다.
// Declare the class <br>
function WalkingSprite(element, x, y) { <br>
  this.x = x; <br>
  this.y = y; <br>
  this.element = element; <br>
} <br>
 <br>
WalkingSprite.prototype = { <br>
  x: 0, <br>
  y: 0, <br>
  element: null, <br>
  <br>
  walk: function(direction) { <br>
    this.x += direction; <br>
  } <br>
} <br>
 <br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);
로그인 후 복사
로그인 후 복사
로그인 후 복사
JavaScript의 모든 것이 (클래스의 함수 포함) 변수이므로 다른 변수에 해당 값을 할당 할 수 있습니다. 따라서, 우리가 상속 재산이 무엇인지에 대해 생각하면, 그것을 모방하기 위해해야 ​​할 일은 부모 클래스에서 어린이 수업으로의 속성과 기능을 복사하는 것입니다. 위에서 만든 수업에서 물려 받으려면 다음을 수행 할 수 있습니다.

코드를 실행하면 부모로부터 두 개의 속성과 하나의 함수가있는 새로운 클래스와 하나의 새로운 기능 인 점프가 있습니다. 유일한 것은 이와 같이 코딩하는 것이 실제로 확장되지 않는다는 것입니다. 부모 클래스에 오리 함수를 추가하면 어떻게됩니까? 모든 어린이 수업을 거쳐 기능 서명을 추가해야합니다. 다시 한번, 구조의 프로토 타입! 우리가 배운 기능은 전에 배운 기능을 제작하여 첫 번째 주장으로 다른 수업을받을 수 있습니다. 이 제공된 수업은 부모가 될 것이며, 우리를위한 모든 속성과 기능을 동적으로 찾아 자동으로 어린이 수업에 주입합니다. 따라서 위는 다음과 같습니다.

예상대로, 새 클래스는 상위 클래스와 동일한 속성을 모두 가지고 있습니다! 그렇다면 속성과 기능을 추가하고 우선하는 것은 어떻습니까? 위에서 수동으로 수행하는 방법을 보여 주었지만 프로토 타입은 클래스를 사용하여 새로운 기능을 정의 할 수 있습니다.
// Declare the class <br>
function WalkingSprite(element, x, y) { <br>
  this.x = x; <br>
  this.y = y; <br>
  this.element = element; <br>
} <br>
 <br>
WalkingSprite.prototype = { <br>
  x: 0, <br>
  y: 0, <br>
  element: null, <br>
  <br>
  walk: function(direction) { <br>
    this.x += direction; <br>
  } <br>
} <br>
 <br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);
로그인 후 복사
로그인 후 복사
로그인 후 복사
여기서, 우리는 산책 함수를 무시하고 점프 함수를 추가했습니다. 매달려 - 트럭을 백업 - 그 $ 슈퍼 변수는 어디에서 팝업 되었습니까? 좋은 질문! 상속을 사용할 때는 때때로 부모 클래스 버전의 함수를 실행하는 것이 유용 할 수 있습니다. 이 경우, 입력 변수를 두 배로 늘리고이 새로운 값을 상위 클래스에 전달하여 문자를 원래 요청한 것보다 두 배나 높게 만듭니다. 프로토 타입은 $ Super를 함수 서명의 첫 번째 인수로 선언하면 $ Super 변수에서 부모 클래스의 기능 버전을 제공합니다. 이를 통해 재정의 버전 내에서 부모 버전을 쉽게 호출 할 수 있습니다. 새로운 점프 함수에는 $ 슈퍼 변수가 없음을 알 수 있습니다. 우리는 그것을 사용하지 않으므로 공급할 필요가 없습니다. 우리가 그것을 필요로한다면, 우리는 그것을 함수 서명의 첫 번째 인수로 추가 할 수 있습니다.

클래스 이름별로 행동 정의 이제 우리는 JavaScript 클래스를 작성했습니다. HTML 요소에 특정 클래스 이름을 제공함으로써 WalkingsPrite 객체가되도록 말할 수 있다면 멋지지 않습니까? JavaScript 1.6에서는 document.getElementByClassName 함수를 사용하여 특정 클래스 이름을 가진 모든 dom 요소를 쉽게 찾을 수 있습니다. 그러나 대부분의 브라우저는 아직 버전 1.6을 지원하지 않습니다. 운 좋게도 프로토 타입은 $$ 함수를 제공합니다 - CSS 선택기를 전달하면 모든 일치하는 요소의 배열을 반환합니다. 다음 코드를 살펴보십시오
먼저 Walkingsprite 클래스를 만듭니다. 그런 다음 Walkingsprite 클래스를 부모로 사용하는 Koopasprite 클래스를 만듭니다. 다음으로, 우리는 클래스 이름 "koopa"가있는 문서 내의 모든 요소를 ​​선택하여 Koopasprite 객체의 배열을 만듭니다. 이제, 우리는 해당 DOM 요소에 대한 참조가있는 koopasprite 객체의 배열을 가지고 있습니다 (나중에 중요 해집니다). 우리가 여기서 한 것은
의 눈에 잘 띄지 않는 JavaScript

의 기초입니다. 이제 우리가 관심있는 HTML 요소를 동적으로 발견 했으므로 이벤트 (예 : OnClick 및 OnFocus)를 바인딩하거나,이를 재목하거나, 사라질 수 있습니다!

영화 제작 우리는 텍스트 중심의 모험 게임을 쓰지 않기 때문에 캐릭터를 애니메이션하는 방법이 필요합니다. 이것은 화면 주위를 움직이는 것 이상으로 나중에 덮을 것입니다. 캐릭터가 걷는 것처럼 보이거나 점프하는 것처럼 보이게 할 수 있다면 좋을 것입니다. 이를 위해, 우리는 오래된 CSS 트릭 : 백그라운드 위치 해킹을 호출 할 것입니다.

아이디어는 간단합니다. 우리는 애니메이션의 프레임을 형성하는 이미지 리본을 만들고 왼쪽과 오른쪽으로 픽셀 수를 이동시켜 순환합니다. 다음은 배경 이미지의 예입니다.

var WalkingSprite = Class.create({ <br>
  x: 0, <br>
  y: 0, <br>
  element: null, <br>
 <br>
  initialize: function(element, x, y) { <br>
    this.element = element; <br>
    this.x = x; <br>
    this.y = y; <br>
  }, <br>
 <br>
  walk: function(steps) { <br>
    this.x += steps; <br>
  } <br>
}); <br>
 <br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);
로그인 후 복사
로그인 후 복사

재미와 이익을위한 JavaScript 해킹 : 1 부
보시다시피, 우리는 하나의 이미지에 12 개의 프레임이 있으며 각각 48 픽셀을 분리시킵니다. 우리가 클래스 마리오의 div를 가지고 있다면, 다른 프레임 중 일부에 대한 CSS는 다음과 같이 보일 수 있습니다.
당신은 깜박임이없는 롤오버를 만들기 전에이 기술을 본 것입니다. 예전에는 OnMouseOver 이벤트가 시작될 때 이미지 태그의 SRC 값을 변경 한 작은 JavaScript를 사용하여 이미지 롤오버 효과를 생성합니다. 그러나 처음으로 해냈을 때 브라우저는 여전히 서버에서 이미지를 다운로드해야했기 때문에 종종 깜박입니다. 이미지를 사전로드 할 수는 있었지만 약간 어리석은 일이었습니다. 우수한 CSS 기술을 통해 설계자는 모든 롤오버 상태를 한 이미지로로드하고 호버 의사 클래스를 사용하여 별도의 CSS 규칙을 만들어 배경을 전환하여 JavaScript없이 원활한 전환을 제공합니다.

그러나 게임 엔진에서는 JavaScript를 사용하여 배경 이미지의 위치를 ​​변경할 것입니다. JS에서 배경 위치를 설정하려면 요소의 스타일을 조작합니다. 다음 코드는 Mariosprite라는 새로운 클래스를 생성하여 Parent WalkingsPrite 클래스에 렌더링 함수를 추가합니다. 이 새로운 기능은 시간 지연으로 반복적으로 호출되며 두 프레임을 사용하여 마리오를 애니메이션 할 것입니다.
// Declare the class <br>
function WalkingSprite(element, x, y) { <br>
  this.x = x; <br>
  this.y = y; <br>
  this.element = element; <br>
} <br>
 <br>
WalkingSprite.prototype = { <br>
  x: 0, <br>
  y: 0, <br>
  element: null, <br>
  <br>
  walk: function(direction) { <br>
    this.x += direction; <br>
  } <br>
} <br>
 <br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);
로그인 후 복사
로그인 후 복사
로그인 후 복사

타이머 사용 분명히, 렌더링 함수는 전체 게임에서 반복적으로 호출되지 않으면 쓸모가 없습니다. 초에 몇 배에 해고되도록하려면 JavaScript 타이머를 사용해야합니다. 두 가지 유형의 타이머가 있습니다. 하나는 타이머가 만료 된 후 한 번 발사 될 것이며, 하나는 우리가 멈추라고 지시 할 때까지 t

밀리 초를 반복적으로 발사 할 것입니다. SetInterval 함수를 사용하여 후자를 구현할 것입니다 :

이것은 마리오가 초당 두 번의 단계를 밟게합니다 (500 밀리 초는 반 초입니다). SetInterVal은 첫 ​​번째 매개 변수로 함수가 필요하므로 Mario.Render 함수를 호출하는 익명 함수를 작성해야합니다.
var WalkingSprite = Class.create({ <br>
  x: 0, <br>
  y: 0, <br>
  element: null, <br>
 <br>
  initialize: function(element, x, y) { <br>
    this.element = element; <br>
    this.x = x; <br>
    this.y = y; <br>
  }, <br>
 <br>
  walk: function(steps) { <br>
    this.x += steps; <br>
  } <br>
}); <br>
 <br>
koopa = new WalkingSprite(null, 10, 10); <br>
koopa.walk(20); <br>
alert(koopa.x + "," + koopa.y);
로그인 후 복사
로그인 후 복사
나중에 우리를 물기 위해 돌아올 JS의 한계를 설명하는 것은 가치가있을 수 있습니다. JavaScript는 다중 스레드가 아닙니다. 이것은 동시에 두 블록의 코드를 실행할 수있는 방법이 없음을 의미합니다. 1 밀리 초의 간격으로 단일 샷 타이머를 설정하여 를 방해 할 수 있습니다. 이는 다음 기회에서 브라우저가 콜백 함수를 실행해야하지만 인터럽트가 중단되는 코드가 중단되며 인터럽트 함수가 완료 될 때까지 계속 실행되지 않습니다. 따라서 1 밀리 초마다 타이머를 설정한다고해서 기능이 빠르게 호출 될 수는 없습니다. 우리는 내가 루프에 대해 이야기 할 때 이것의 결과를 볼 것입니다.

사용자 입력 허용 분명히, 게임에는 키보드, 마우스 또는 조이스틱을 통한 일종의 인간 입력이 필요합니다. 따라서 게임이 그 자리에서 실행되는 고정 스프라이트 이상이 되려면 사용자의 입력에 응답해야합니다. JavaScript에서는이를 이벤트 청취 라고합니다.

브라우저의 풍미가 어떤 맛 (놀라움, 놀라움)에 따라 두 가지 다른 이벤트 모델이 있으며, 프로토 타입은이 둘의 뉘앙스를 캡슐화하는 데 환상적인 작업을 수행하더라도 후드 아래에서 무슨 일이 일어나고 있는지 아는 것이 좋습니다. Bubble-Bobble 당신은 이벤트가 DOM을 통해 해고 된 요소 (이벤트 캡처), 요소 (이벤트 버블 링) 또는 두 가지 (공식 W3C 모델)의 조합으로 이동하는지 여부를 선택할 수 있습니다. 아래는 일어나는 일에 대한 그래픽 표현입니다. Internet Explorer Land에있는 사람들은 이벤트 버블 링에 갇히고 다른 브라우저는 둘 다 지원합니다. 웹에서 잠시 동안 연주 한 경우 OnMouseOver 또는 OnClick과 같은 속성을 사용하여 인라인 이벤트 처리에 익숙 할 수 있습니다. 이 기술은 CSS에서 스타일 속성을 사용하는 것과 같습니다. 고맙게도, JavaScript의 요소에 이벤트를 동적으로 바인딩하는 몇 가지 방법이 있습니다. 다음 코드를 고려하십시오
여기서는 이벤트를 DOM의 요소에 첨부하는 세 가지 방법이 있습니다. AddeventListener를 사용하는 첫 번째는 W3C 표준 방식입니다. 첫 번째 매개 변수는 이벤트의 이름이고, 두 번째는 콜백 함수의 이름이고, 세 번째는 우리가 (False) 또는 버블 링 (true)을 캡처하는지 여부를 나타내는 부울입니다. 두 번째 - 첨부 보급을 사용하는 것은 인터넷 익스플로러 방식입니다. IE는 이벤트 버블 링 만 지원하기 때문에 기본적으로 세 번째 매개 변수가없는 W3C 버전과 동일한 시그니처입니다. 요소의 OnClick 속성을 사용하는 마지막 제품은 모든 브라우저에서 작동하는 메소드입니다.

마우스 오버 및 마우스 아웃과 같은 이벤트는 매우 간단하지만 키보드 이벤트는 어떤 키를 누르는 지 알아야하기 때문에 조금 더 복잡합니다. 이 경우 JavaScript 이벤트 객체에서 정보를 얻어야합니다. 이벤트 객체가 콜백 함수로 전달되거나 IE Land에있는 경우 Window 객체 : Window.event에서 글로벌 이벤트 객체가 생성됩니다.
예는 다음과 같습니다.

event.observe를 사용하여 이벤트 핸들러를 설정하면 함수 매개 변수를 통해 이벤트 객체가 있는지 또는 창 이벤트에서 이벤트 객체가 있는지 확인하는 조건부 테스트를 삭제할 수 있습니다. 프로토 타입으로 우리를 위해 완벽하게 처리되었습니다.

결론 이 시점에서 우리는 JavaScript 객체 및 클래스 (상속과 같은 OOP 개념 포함), JavaScript 및 CSS 클래스 사용 방법, 요소 행동을 제공하는 방법, 타이머를 사용하여 작업 (애니메이션 등)을 반복적으로 수행 할 수 있도록하는 방법 및 이벤트 청취의 기본 사항을 탐색했습니다. 이를 통해 도구 상자에 충분한 JavaScript를 제공하여 플랫폼 게임 구축의 핵심에 도달 할 수 있습니다. 다음 기사에서는 기본 충돌 엔진 (애니메이션 루프) 생성을 다루고 브라우저 창을 스크롤하여 80 년대의 측면 스크롤 효과를 얻기위한 몇 가지 트릭을 보여 드리겠습니다.
그 동안

아니요, JavaScript는 윤리적 해킹에 사용되는 유일한 언어가 아닙니다. Python, Ruby 및 PHP와 같은 다른 언어도 일반적으로 사용됩니다. 그러나 JavaScript는 웹에서의 유비쿼터스로 인해 웹 기반 공격에 특히 유용합니다.

윤리적 해킹에 사용되는 일반적인 JavaScript 라이브러리는 무엇입니까?

윤리적 해킹에 사용되는 일부 일반적인 JavaScript 라이브러리에는 서버 측 스크립팅을위한 Node.js, Browser Automation for Web Automation, Web Scraping 및 Cheerio가 포함됩니다. Express.js 및 Socket.io와 같은 다른 라이브러리는 각각 웹 애플리케이션 및 실시간 응용 프로그램을 구축하는 데 사용됩니다.

사전 프로그래밍 경험없이 해킹에 JavaScript를 사용할 수 있습니까?

사전 프로그래밍 경험없이 윤리적 해킹에 사용할 수는 있지만 일반적으로 프로그램 사기꾼의 기본 이해를 권장하는 것이 좋습니다. 이를 통해 다양한 공격의 작동 방식과 JavaScript를 효과적으로 사용하는 방법을 쉽게 이해할 수 있습니다.

위 내용은 재미와 이익을위한 JavaScript 해킹 : 1 부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿