> 웹 프론트엔드 > JS 튜토리얼 > 게임 : 하이 바다에서의 전투, 1 부

게임 : 하이 바다에서의 전투, 1 부

Christopher Nolan
풀어 주다: 2025-02-25 17:35:10
원래의
646명이 탐색했습니다.

이 기사는 간단한 HTML5 게임 인 Seabattle을 소개하여 웹 페이지에 포함시키고 아키텍처를 요약하는 것을 보여줍니다. Chrome, Firefox, Internet Explorer 9, Opera 12 및 Safari 5에서 재생 가능한 Seabattle은 깊이 충전 및 어뢰를 사용하여 잠수함과 싸우는 구축함을 특징으로합니다. 게임은 전투원이 파괴 될 때까지 계속됩니다. 재시작시 점수를 재설정합니다.

그림 1 : Seabattle의 타이틀 화면은 플레이어에게 리턴 키로 시작하도록 촉구합니다. 게임 플레이 (그림 2)는 별이 빛나는 배경에 대한 구축함을 보여 주어 현재 및 높은 점수 (로컬 스토리지에서)를 표시합니다. 구축함의 삶은 이미지로 표시됩니다. 플레이어는 화살표 키를 사용하여 조작, 어뢰를 피하고 공간 바가 화재 깊이 충전을합니다. 잠수함을 때리는 것은 100 점을 기록하고 능가하면 높은 점수를 업데이트합니다. 게임은 구축함이나 잠수함이 파괴 될 때 끝나고 승리/잃어버린 메시지를 표시합니다.

그림 2 : 구축함 대 잠수함; 깊이 전하 및 어뢰 크기는 명확성을 위해 과장되어 있습니다 바이바 틀을 포함시켜 :

Seabattle은 Seabattle.js, JQuery 및 JQuery Hotkeys 플러그인을 사용합니다 (Part 2에 자세히 설명). Listing 1은 웹 페이지에 포함 된 것을 보여줍니다. Listing 2는 초기화와 게임 루프를 보여줍니다. 함수는 캔버스, 자원을로드하는 등을 설정하는 반면 Gaming: Battle on the High Seas, Part 1 는 게임 로직을 처리하고

는 캔버스를 다시 그리는다. Seabattle의 JavaScript Architecture :
바닷 전지 객체 (목록 3)에는 , 및 가있는 API가 특징입니다. 내부 의사-체력은 게임 상태 (Init, Title, Play, Winlose, Restart) 및 한계 (Max_dc, Max_Torp)를 관리합니다. 함수는 리소스로드 (), 충돌 감지 (), 객체 제작 (Makedepthharge, MakeExplosion, Maketoppedo, Maketorpedo), 무작위 번호 생성 (

) 및 html5 스토리지 확인 (

결론 :

Seabattle은 오디오, 캔버스 및 웹 스토리지 API를 사용하여 HTML5 게임 개발을 선보입니다. 미래의 부분은 기능을 더 깊이 파고들 것입니다 HTML5 게임 및 WordPress 통합에 대한 자주 묻는 질문 (이 섹션은 원래 입력을 기반으로 추가) : Gaming: Battle on the High Seas, Part 1 이 섹션은 HTML5 게임 기사의 핵심 내용과 관련이 없기 때문에 다시 작성된 출력에서 ​​생략됩니다. 추가하면 응답의 초점과 길이가 크게 변경됩니다. WordPress 통합 질문을 다루는 별도의 응답을 원하시면 별도의 프롬프트로 제공하십시오.

위 내용은 게임 : 하이 바다에서의 전투, 1 부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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