HTML5(8)-벽돌지도 격자문자로 놀면서 배워보세요

원래 탱크배틀이나 슈퍼마리오 같은 작은 게임에서는 초기 화면의 벽돌 캐릭터가 정적인 이미지인 줄 알았는데, 이제 모두 동적 텍스처로 게시된다는 것을 알았습니다. 아래 HTML5의 그리기 기능을 활용하겠습니다. . 탱크 전투의 시작 화면을 만들고 도트 매트릭스 캐릭터를 연구하세요.

1. 비트맵 문자

점들이 작은 그림으로 대체된다는 점만 다를 뿐 실제 질감은 크게 다르지 않습니다. 여기 도트 매트릭스 문자를 위한 작은 프로그램이 있습니다. 한자나 영문자를 입력하면 프로그램이 텍스트의 도트 매트릭스를 분석하고 생성하여 표시합니다. 도트 매트릭스를 분석하고 생성하는 방법은 다음과 같습니다.

1. ctx.fillText 메서드를 사용하여 메모리 캔버스에 텍스트를 그립니다. 전경색은 검정색이고 배경색은 다음과 같습니다. 흰색

2. 캔버스의 각 픽셀을 읽고 해당 기호로 대체하여 문자열

여기서 질문이 있습니다. 캔버스가 될까요? 내 해결책은 글꼴이 무엇이든 범위를 벗어나지 않도록 가능한 한 크게 만드는 것입니다.

픽셀을 분석하는 동안 텍스트의 너비와 높이를 동시에 기록할 수 있습니다. 분석이 완료된 후 새 캔버스가 다시 생성되며 이번에는 더 동일할 수 있습니다. 텍스트의 크기에 맞춰.

또 다른 문제는 텍스트가 너무 작으면 글꼴이 약간 왜곡된다는 것입니다. 이는 사람의 눈이 작은 글꼴을 명확하게 볼 수 없고 프로그램에서도 명확하게 분석할 수 없는 문제입니다. .

그래서 작은 크기의 글꼴은 탱크 전투의 글꼴처럼 특별히 디자인되어야 합니다.

2. 브릭 캐릭터

점의 원리만 알면 브릭 캐릭터를 구현하는 방법은 매우 간단합니다. 사진, 벽돌은 안쪽에서 찍은 것입니다:

벽돌은 매우 작습니다. 사진의 오른쪽 아래 중앙과 각 층의 벽돌입니다. 우리가 했던 탱크 전투 게임지도는 이렇게 단순한 그림에서 생성되었는데, 정말 의외였습니다.

다음은 브릭 캐릭터의 도트 매트릭스 데이터입니다. 여기에는 게임 시작 화면을 구성하는 일부만 있습니다. BATTLE CITY 및 게임 종료 화면

3. 코드
시간이 촉박해서 코드가 보기 흉합니다. jsgame.js를 사용하여 만든 HTML5 2D 함수입니다. 파이게임의 인터페이스 스타일의 일부를 모방한 패키징입니다.
캡슐화하고 나면 그리기 관련 코드는 매우 간단하고 나머지는 주로 연산 로직 코드임을 알 수 있습니다.

아아아아

위 내용은 HTML5(8)-벽돌지도 격자문자로 놀면서 배워보세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!