빠른 팁 : JavaScript에서 게임 루프를 만드는 방법

코어 포인트

JavaScript 게임 루프는 상태가 시간이 지남에 따라 상태가 바뀌는 애니메이션과 게임을 렌더링하는 데 사용되는 기술입니다. 여기에는 사용자 입력을 수신하고 경과 시간 상태를 업데이트 한 다음 프레임을 그립니다.

메소드는 브라우저가 다음 리 페인트 전에 가능한 빨리 지정된 기능을 호출하도록 요청하는 애니메이션을위한 API이며, 콜백 함수가 실행을 시작하기위한 타임 스탬프를 제공합니다.
• > 사용자 입력은 누르는 키를 추적하고, 모든 및
이벤트를 듣고, 눌린 키를 기반으로 X 및 Y 위치를 업데이트하고, 객체를 경계.
• 이동 및 회전을위한 추가 벡터를 저장하고, 왼쪽 및 오른쪽 키를 기반으로 회전 업데이트, 상하 키 및 회전을 기반으로 한 움직임 업데이트, 이동 벡터 및 캔버스 경계를 ​​기반으로 한 위치를 업데이트하여 더 복잡한 애니메이션을 만들 수 있습니다. requestAnimationFrame
JavaScript 게임 루프는 시간이 지남에 따라 상태를 변경하는 애니메이션과 게임을 렌더링하는 데 사용되는 기술입니다. 핵심에는 가능한 여러 번 실행되는 기능이 있으며,이 기능은 사용자 입력을 받고 경과 시간 상태를 업데이트 한 다음 프레임을 그립니다.
• 이 기사는이 기본 기술의 작동 방식을 간략하게 소개하고 자신의 브라우저 기반 게임 및 애니메이션을 만들기 위해 도움이됩니다. keydown 다음은 JavaScript 게임 루프의 예입니다. keyup 메소드는 브라우저가 다음 리피트 전에 가능한 빨리 지정된 기능을 호출하도록 요청합니다. 애니메이션 렌더링 전용 API이지만 짧은 타임 아웃으로
로 유사한 결과를 얻을 수도 있습니다. 는 콜백 함수가 실행되기 시작하는 타임 스탬프를 통과하며, 여기에는 창이로드되었으므로 밀리 초 수가 포함되어 있습니다.
값 또는

업데이트 위치 첫 번째 애니메이션은 매우 간단합니다. 빨간 사각형은 캔버스의 가장자리에 도달 할 때까지 오른쪽으로 이동하고 출발점으로 돌아갑니다.

정사각형의 위치를 ​​저장하고 업데이트 함수에서 X 위치를 증가시켜야합니다. 경계에 도달하면 캔버스 너비를 빼기 위해 시작점으로 다시 루프 할 수 있습니다.

새 프레임을 그립니다

function update(progress) {
  // 更新自上次渲染以来经过时间的世界的状态
}

function draw() {
  // 绘制世界的状态
}

function loop(timestamp) {
  var progress = timestamp - lastRender;

  update(progress);
  draw();

  lastRender = timestamp;
  window.requestAnimationFrame(loop);
}
var lastRender = 0;
window.requestAnimationFrame(loop);

이 예제는 requestAnimationFrame 요소를 사용하여 그래픽을 렌더링하지만 게임 루프는 HTML 또는 SVG 문서와 같은 다른 출력과 함께 사용할 수도 있습니다. setTimeout 드로잉 기능은 현재 세계의 상태를 렌더링합니다. 각 프레임에서 캔버스를 지우고 상태 객체에 저장된 위치에 중앙이있는 10 픽셀 빨간색 사각형을 그립니다. requestAnimationFrame performance.now() 우리는 모바일을 달성했습니다!

<<> 사용자 입력 <🎜 🎜>에 응답하십시오 다음으로, 우리는 객체의 위치를 ​​제어하기 위해 키보드 입력을 가져옵니다. 는 어떤 키를 누르는 지 추적합니다.

모든 state.pressedKeys 및

이벤트를 듣고 그에 따라 업데이트합시다. 내가 사용할 키는 <🎜 🎜> d <🎜 🎜> (오른쪽), <🎜 a <🎜 🎜> (왼쪽), <🎜 🎜> w

function update(progress) {
  // 更新自上次渲染以来经过时间的世界的状态
}

function draw() {
  // 绘制世界的状态
}

function loop(timestamp) {
  var progress = timestamp - lastRender;

  update(progress);
  draw();

  lastRender = timestamp;
  window.requestAnimationFrame(loop);
}
var lastRender = 0;
window.requestAnimationFrame(loop);

(up) 및 s

아래입니다). 여기에서 주요 코드 목록을 찾을 수 있습니다. keydown keyup 그런 다음 눌린 키에 따라 x 및 y 값을 업데이트하고 객체를 경계 내에 보관해야합니다. state.pressedKeys 우리는 사용자 입력을 구현했습니다! (공간 제한으로 인한 소행성 게임 및 FAQ에 대한 후속 내용은 여기서 생략됩니다. 핵심 아이디어는 이전 부분에 완전히 표시되었으며 후속 컨텐츠는 더 복잡하고 자주 묻는 질문입니다. 필요에 따라 스스로 보충 할 수 있습니다

위 내용은 빠른 팁 : JavaScript에서 게임 루프를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!