TypeScript Sample 6 시도

입문

지난번의 Jquery 라이브러리를 이용하여 그리운 게임 샘플을 투고한 비망록.
일본에서는 타카라토미(예전에는 타카라토미)가 판매된 것을 연상시킨다레이더 작전 게임.
해전 놀이는 바둑판 게임의 정식 명칭이다.
브라우저에서 게임 응용 프로그램 개발의 첫 번째 샘플을 누리세요.

전제 조건

Visual Studio Code 설치됨

Node.js/npm 설치됨

git샘플 다운로드에서 모든 디렉터리로 압축 해제

ViewIn Browser 설치(Market Place에서 제공)

OS는 Windows7/10

으로 가정합니다.

샘플 워쉽

고전적인 격자 기반 군함 전투 게임

디렉토리 구성

./
└───img/

파일 구성

경로
파일 이름
설명
.
default.html
warship 화면의 html
.
jquery.d.ts
Jquery 라이브러리 형식 정의 파일
.
jqueryui.d.ts
Jquery 드래그 앤 드롭 정의 파일
.
README.md
이 예제의 설명과 사용 방법
.
styles.css
스타일 시트
.
tsconfig.json
유형 스크립트 컴파일 프로필
.
warship.js
warship.ts 컴파일에서 만든 JavaScript 파일
.
warship.js.map
warship.ts에서 만든 맵 파일 컴파일하기
.
warship.ts
소프트웨어 유형 스크립트 파일
img
bg.jpg
파란색 상자 이미지 파일
img
bg2.jpg
노란색 상자 이미지 파일

분류도

실행

cd ./warship
tsc --sourcemap --target ES5 warship.ts

편집기에 표시default.htmlCtrl+F1

결과

[방법]
좌판은 적진이고, 우판은 자진이다.
적함과 본함의 배치는 무작위로 배치된 것이다.
왼쪽 판의 크기를 클릭하여 뒤집습니다.
매 라운드마다 번갈아 공격하다.
적진 클릭 시작.
적함선에 명중하면 빨간색으로, 해수면이면 녹색으로 변한다.
함선에서 송어의 길이가 결정되었다.
항공모함: 5칸× 한 척
전함: 4칸× 한 척
순양함: 3칸× 한 척
잠수함: 3칸× 한 척
구축함: 2칸× 한 척
적함선이나 본 함선은 모두 명중 게임이 끝났다.

득점

게임을 구성하는 자원을 분류하여 교과서에 따라 인코딩한다.
판류는 단원류와 선류로 구성되고 이 판류는 게임류로 구성된다.그리고 게임 클래스의 실례를 만들고 있습니다.
물론 판류의 마우스 이벤트는 Jquery 라이브러리를 사용합니다.
TypeScript의 학급 기능이 게임 개발에서 잘 발휘되고 있음을 증명하였다.

공책

승리 방법의 비결은 남은 함선의 체량을 의식해 연속으로 체량을 여는 것보다 뛰어서 여는 것이 전공이다.이것은 실제 바둑판 게임에서 배양한 경험의 법칙이다.

총결산

성공적인 체험은 사람의 의욕을 높일 수 있다.TypeScript를 배우는 초보자는 처음에'처음의 TypeScipt'와 같은 문법 참고서에서 배우는 것이 사회의 상식이다.거의 지루하고 무미건조한 언어의 나열은 전혀 기억이 나지 않는다. 이것은 흔히 있는 일이 아닌가?다른 각도에서 들어갈 수 있을 거예요.전혀 다른 방법, 결과에서 배우는 방법.이 Warship Type Script만 철저히 조사하면 제패할 것 같은 예감.문법은 필요할 때 기억하면 돼, 어때?
이상