javascript - requestanimation을 사용하여 방향 이동을 제어하고 키를 사용하여 방향 키를 누를지 여부를 제어하는 ​​h5 캔버스 게임을 만들었는데, 최적화하는 방법을 알려주실 수 있나요?

Question

특정 코드를 입력할 수 없습니다. 귀중한 조언을 해줄 수 있는 전문가가 있나요

Answer 1

1. 프레임 애니메이션을 시간에 맞춰 애니메이션으로 변경

2. 배경 등 자주 변경할 필요가 없는 사진은 오프스크린 캔버스를 이용해 주세요

3. canvas.width 등과 같은 일부 세부정보의 경우 width = canvas.width를 사용하여 값을 저장해야 합니다

4. 기능 제한 사용

5. 이벤트 트리거 작업은 바인딩된 함수를 기반으로 해서는 안 됩니다. 트리거 매개변수는 프로그램에 전달되고 게임 루프를 통해 구현되어야 합니다. 예를 들어, 오른쪽 화살표를 클릭할 때 오른쪽으로 이동이 트리거되었음을 게임 본체에 알리기만 하면 프로그램이 이동 방법을 결정합니다.

6. 루프를 최적화하세요. 일반적으로 프로그램이 느리게 실행되는 주된 이유는 내부 로직이 너무 많고 생성과 같은 일부 데이터 계산 작업에 처리할 시간이 없다는 것입니다. 난수 등을 Worker에 전달하여 구현할 수 있습니다. 자주 사용할 필요가 없는 일부 기능의 경우 특정 상황이 발생하고 매개변수 값이 변경된 후에만 호출하도록 하세요. . 예를 들어 if(go) dosomething();은 go가 true인 경우에만 작동하므로 많은 시간을 절약할 수 있습니다.

물론 구체적인 최적화 세부 사항은 코드에 따라 결정되어야 합니다. 사실 대부분의 최적화 아이디어는 동일합니다.

Answer 2

이벤트 등록에 문제가 있을 수 있습니다. 이벤트 위임으로 시작하시고 돔이 끝난 후 이벤트를 취소하시면 됩니다.

Chrome devtool을 사용하여 프로필을 열고 CPU와 메모리를 확인하여 기능에 누수나 기타 문제가 있는지 확인할 수 있습니다.

Answer 3

캔버스를 이동할 때마다 전체 화면을 새로 고치는 대신 캔버스의 부분 새로 고침을 사용하세요

Answer 4

DOM을 사용하여 게임을 작성하셨나요? 아니면 CANVAS

를 사용하세요