51 최고의 오픈 소스 HTML5 및 JavaScript 게임 2020
온라인 게임은 자유 시간에 훌륭한 엔터테인먼트 수단을 제공합니다. 그러나 가장 좋아하는 온라인 게임이 어떻게 만들어 지는지 궁금한 적이 있습니까? 자신 만의 게임을 개발하고 친구 나 가족과 공유하고 싶지만 시작하는 방법을 모르고 싶습니까?
이 기사에서는 최고의 오픈 소스 HTML5 및 JavaScript 게임 목록을 신중하게 구성했습니다 . 이러한 게임의 소스 코드는 공개적으로 제공되므로 해당 게임을 만드는 실제 절차에 대해 이해할 수 있습니다.
이 오픈 소스 HTML5 및 JavaScript 게임의 가장 좋은 점은 컴퓨터에서 소스 코드를 쉽게 다운로드하고, 필요에 따라 수정하고, 웹 브라우저를 사용하여 실행하고, 원하는대로 다시 배포 할 수 있다는 것입니다.
PixelDefense
PixelDefense 는 오픈 소스 HTML5 및 JavaScript 게임에서 가장 아름답고 완벽하게 설계된 예제 중 하나입니다. 그것은 타워 방어 게임 장르를 기반으로합니다. 이 게임에서는 들어오는 몬스터가 고국에 들어 가지 않도록 지정된 장소에 타워를 배치해야합니다. 이 뛰어난 게임의 소스 코드는 Github 리포지토리에서 무료로 다운로드 할 수 있습니다. HTML5 및 JavaScript의 기본에 익숙하다면 온라인 게임 개발의 메커니즘을 이해할 수있는 좋은 기회가 될 것입니다.
포켓 아일랜드
Pocket Island 는 HTML5 및 JavaScript가 제공하는 유연성을 활용하는 놀라운 브라우저 기반 게임입니다. 매력적인 스토리와 함께 제공되는 정말 진보 된 UI 디자인이 있습니다. 게임은 여러 작업으로 구성된 왕의 위시리스트를 중심으로 진행되며, 게임을 승리하려면 그의 소원을 충족시켜야합니다.
2048
2048 은 인기있는 Play 스토어 게임 1024의 복제본입니다. 소스 코드는 HTML5, CSS3 및 JavaScript로 작성되었습니다. 만약 당신이이 언어들에 익숙하다면이 멋진 게임에 기여하고 전 세계에 당신의 기술을 보여줄 것을 제안합니다. 이 게임은 잘 알려진 MIT 라이센스에 따라 라이센스가 부여됩니다.
HexGL
HexGL 은 게임 디자인을위한 최첨단 그래픽과 관련하여 나머지 오픈 소스 HTML5 및 JavaScript 게임과 차별화 됩니다. 이 미래형 레이싱 게임에는 믿을 수없는 사용자 인터페이스가있어 데스크탑 컴퓨터에서 오프라인 비디오 게임을하고있는 것처럼 보입니다. 게임 환경을 렌더링하기 위해 HTML5 및 JavaScript를 사용합니다. 이 오픈 소스 프로젝트는 일부 기고자의 도움을 받아 Thibaut Despoulain에 의해 개발 및 유지됩니다.
밈 스트리스
Mimstris 는 자유 시간에 즐길 수있는 멋진 온라인 퍼즐 게임입니다. 이 게임에서는 비디오 게임 테트리스와 비슷한 수평선을 채우기 위해 다른 모양의 떨어지는 블록을 빠르게 정렬해야합니다. HTML5 및 React 및 Redux와 같은 일부 JavaScript 프레임 워크를 사용하여 작성됩니다. 나는 당신이이 게임과 사랑에 빠질 것이라고 확신합니다.
타워 빌딩 게임
타워 빌딩 게임 으로 기분이 좋아집니다. 그렇습니다. 게임은 우리가 반복해서 재생하고 싶은 방식으로 설계 되었기 때문에 사실입니다. 수상 경력에 빛나는 Tower Bloxx Deluxe 게임과 유사합니다. 여기서 게임은 서로의 위에 블록을 떨어 뜨리고 하늘을 향해 나아갑니다. 이 구조는 HTML5 언어의 새로운 캔버스 요소를 사용하여 작성되며 로직은 ES6 (JavaScript 언어에 대한 뛰어난 업데이트)로 작성됩니다.
BrowserQuest
BrowserQuest 는 Little Workshop for Mozilla가 수행 한 실험 인 오픈 소스 대규모 멀티 플레이어 온라인 게임입니다. 그것은 당신의 임무가 세계를 탐험하는 모험 장르를 기반으로합니다. 당신은 도중에 여러 적과 마주 칠 것입니다. 당신은 목표를 달성하는 데 집중하고 집중하는 데 도움이되는 선물을 발견 할 수도 있습니다. 게임은 이러한 언어의 유연성을 입증하는 HTML5 및 JavaScript를 사용하여 빌드됩니다.
mk.js
mk.js 는 가장 인기있는 비디오 게임 시리즈 인 Tekken과 개념이 비슷합니다. 격투 게임은 "기본", "멀티 플레이어"및 "네트워크"의 세 가지 유형으로 제공됩니다. 기본 구조는 HTML5로 작성되고 스타일링은 CSS3을 사용하여 수행되지만 게임 로직은 JavaScript로 작성됩니다. 싸우는 게임을 좋아한다면 코드를 읽는 것이 좋으며 앞으로 더 나은 것을 쓸 수 있기를 바랍니다.
3D Hartwig 체스 세트
3D Hartwig 체스 세트 는 오픈 소스 HTML5 및 JavaScript 게임의 가장 흥미로운 예 중 하나입니다. 가장 매력적인 사용자 인터페이스 중 하나이며 놀라운 사용자 경험을 제공합니다. HTML5, CSS3 및 JavaScript를 사용하여 작성됩니다. 소스 코드는 MIT 라이센스에 따라 제공됩니다.
타락
Astray 는 최고의 오픈 소스 HTML5 및 JavaScript 게임의 놀라운 예입니다. 이 게임은 웹 브라우저에서 WebGL이 수행 할 수있는 기능을 보여 주므로 다른 사람들과 차별화됩니다. Three.js 및 Box2dWeb 라이브러리를 사용하여 고급 3D 사용자 인터페이스를 만듭니다. 개발자는 라이센스를 믿지 않고 원하는대로 사용할 수 있습니다.
서투른 새
Clumsy Bird 는“Flappy Bird”게임의 복제본이며 오픈 소스 및 경량 HTML5 게임 엔진 MelonJS를 사용합니다. 이 게임은 비행 캐릭터를 제어하여 작동하며 임무는 들어오는 벽을 벽에 부딪히지 않고 벽을 통과하는 것입니다.
헥 트리스
Hextris 는 유명한 게임 Tetris에서 영감을 얻은 개발자에 따른 멋진 퍼즐 게임입니다. 게임은 진행 속도가 꾸준히 증가하여 매우 중독성이 있습니다. HTML5 캔버스를 사용하여 JavaScript를 사용하여 게임을 렌더링하고 CSS3를 사용하여 스타일을 지정합니다.
마지막 식민지
Last Colony 는 실시간 전략 (RTS) 게임 장르에 속하며 오픈 소스 HTML5 및 JavaScript 게임의 독특한 예입니다. 싱글 플레이어 및 멀티 플레이어 모드가 제공됩니다. 싱글 플레이어 캠페인 모드에서 게임은 경제를 구축하고 적을 물리 칠 수있는 스크립트 스토리 라인을 가지고 있습니다. 이 게임에는 다양한 건물, 항공기 및 차량이 있으며 사용자에게 흥미를 유발합니다. 이 게임의 흥미로운 점은 코드베이스가 HTML5, CSS3 및 JavaScript로 작성되었다는 것입니다.
자바 의사 3D 레이서
Java Pseudo 3D Racer 는 OutRun 비디오 게임과 개념이 유사합니다. 이름에서 알 수 있듯이 HTML5 및 JavaScript를 사용하여 개발되었습니다. 게임은 4 가지 버전으로 점진적으로 발전하며 Github 리포지토리를 통해 단계별로 진행 상황을 확인할 수도 있습니다. 개발자에 따르면 게임은 최신 웹 브라우저에 더 적합합니다. 또한 게임이 의사 3d 레이싱 게임의 기본 사항만을 설명하기 때문에 소스 코드가 제대로 구성되지 않았다고 밝혔다.
팩맨 캔버스
Pacman-canvas 는 HTML5와 JavaScript로 처음부터 완전히 다시 작성되었습니다. 팩맨 캔버스에서는 키보드의 화살표 키를 사용하여 캐릭터를 제어하고 미로에 놓인 아이템을 수집하면서 적 유닛으로부터 자신을 보호해야합니다. 모든 품목을 성공적으로 수령하면 다음 레벨로 승격됩니다.
캔버스 테트리스
Canvas Tetris 는 초급 개발자에게 2D 게임 개념에 대한 기본적인 이해를 제공하기 위해 HTML5 및 JavaScript로 작성된 Tetris 게임의 간단한 그림입니다. 개발자는 45 분만에이 게임을 만들었다 고 언급했습니다. 따라서 HTML5, CSS3 및 JavaScript의 기본 사항에 익숙하다면 소스 코드를 읽고 게임 개발 기술을 향상시키는 것이 좋습니다.
고대 야수
Ancient Beast 는 HTML5 및 JavaScript가 제공하는 유연성을 활용하는 놀라운 브라우저 기반 멀티 플레이어 게임입니다. 이 게임은 플레이어 턴을 기반으로 한 전략 게임이며 다른 플레이어와 온라인으로 플레이합니다. 이 게임에는 플레이어가 함께 플레이 할 때 얻을 수있는 다양한 생물이 포함되어 있으며, 플레이어는 상대방을 물리 치기 위해 사용할 수 있습니다. 현재 사용 가능한이 게임의 버전은 0.3이며 필요한 소켓 플러그인과 함께 HTML 및 JavaScript를 사용하여 개발되었습니다.
OpHog
OpHog 는 HTML5 및 JavaScript를 사용하여 개발 된 가장 흥미롭고 매력적인 타워 방어 게임 중 하나입니다. 이 게임을 통해 포털을 방어하면서 각 레벨의 적 보스를 물리 치기 위해 방어 유닛을 배치 할 수 있습니다. 개발자는 게임에서 터치 제스처에 HammerJS를 사용하고 UI에는 JQuery UI를 사용했습니다.
플렉스 박스 프로기
Flexbox Froggy 는 개발 된 게임입니다. 이 게임을 통해 개구리를 움직이고 연못이 위치한 바닥에 도달하기 위해 CSS 스타일을 입력 할 수 있습니다. 이 게임은 HTML5, JavaScript, CSS 스타일 및 일부 이미지를 사용하여 개발되었습니다.
그리드 가든
그리드 가든 은 Flexbox Froggy와 유사하며 동일한 개발자가 게시 한 게임입니다. Grid Garden은 플레이어가 Grid CSS 속성에 대해 배울 수 있도록 도와주는 게임입니다. 개발자는 animate.css 및 JQuery를 사용하여이 단순하면서도 창의적인 게임을 디자인하고 개발합니다.
양자 게임
Quantum Game 은 게임에서 양자 역학의 용어를 사용하는 간단하고 창의적인 브라우저 기반 퍼즐 게임입니다. 이 게임에는 광자 입자를 방출하는 광자 소스, 장애물 역할을하는 암석, 광자 입자를 편향시키는 거울 및 광자 입자를받는 광자 검출기가 포함되어 있습니다. 트릭은 광자 소스로부터 방출 된 광자 입자가 암석을 회피하는 광자 검출기에 도달하도록 거울을 배열하는 것이다. 이 게임은 CSS 및 사운드 플러그인과 함께 간단한 HTML5 레이아웃 및 JavaScript를 사용하여 개발되었습니다.
반경 레이드
Radius Raid 는 JavaScript를 사용하여 HTML5 애니메이션을 사용하여 개발 된 놀랍고 매력적인 우주 테마 게임입니다. 플레이어가 잔인한 적을 쏴서 적의 함선이 당신을 파괴하기 전에 그들을 파괴 해야하는 슈팅 게임입니다. 이 게임은 다양한 유형의 적, 구식 음향 효과가 적용된 놀라운 배경 디자인 및 플레이어가 오랫동안 게임에 참여할 수 있도록 로컬에 저장된 플레이어의 통계로 구성됩니다.
사이먼이 말하는 반응
이름에서 알 수 있듯이 React Simon Says 는 Redux 기능이있는 React JavaScript 프레임 워크를 사용하여 개발 된 게임입니다. 이 게임은 기본적으로 특정 순서로 점등되는 4 개의 컬러 블록을 포함합니다. 블록이 켜진 후 플레이어는 포인트를 얻기 위해 불이 켜진 순서대로 블록을 클릭해야합니다. 개발은이 간단한 게임을 개발하기 위해 CSS 스타일 컴포넌트와 함께 React-redux 프로젝트를 사용합니다.
반응 2048 게임
React-2048-game 은 모두가 반드시 플레이해야하는“2048”이라는 중독성 모바일 게임을 완전히 다시 구현 한 것입니다. 이름에서 알 수 있듯이이 게임은 HTML5 및 JavaScript 게임 코드를 포함한 redux가 포함 된 React JavaScript 프레임 워크의 모범 사례를 사용하여 개발되었습니다. 이 게임은 숫자 블록을 이동하는 화살표 버튼을 사용자에게 제공합니다. 플레이어는 2048 점에 도달하기 위해 숫자 블록을 다른 블록과 결합하고 합산하는 방식으로 이동해야합니다.
우주 침략군들
SpaceInvaders 는 HTML5 및 JavaScript 코드를 사용하여 개발 된 놀라운 우주 테마 슈팅 게임입니다. 이 게임은 실제로 우주 침략자 페이저 게임의 리메이크입니다. 개발자는 JavaScript 모듈을 사용하여이 게임의 코드를보다 관리하기 쉽고 구조화하기 위해 Require.js를 사용합니다.
BreakLock
BreakLock 은 HTML5 게임의 흥미로운 예입니다. 이 게임은 Mastermind와 Android 잠금 게임의 하이브리드 조합으로, 게임 패턴으로 Android 패턴 잠금을 사용합니다. 잠금 패턴과 일치하고 이기기 위해서는 점들을 연결해야합니다. 이 게임은 아름답고 마음을 사로 잡는 게임을 제공하기 위해 Webpack 및 진보적 인 웹 앱 솔루션을 사용합니다.
Phaser의 서커스 Charly html5 공물
Circus Charly 는 HTML5와 JavaScript를 사용하여 페이저 게임의 명예로 개발 된 단순하고 중독성있는 게임입니다. 이 게임에는 불 링을 통해 트랙을 뛰어 넘어 불 링을 뛰어 넘어 더 높은 점수를 얻기 위해 상당한 거리를 커버해야하는 서커스 사자로되어 있습니다. 레벨이 진행됨에 따라 발사 링이 작아지고 게임 애니메이션이 빨라집니다.
ClashJS
ClashJS 는 HTML5를 인터페이스로, JavaScript를 로직으로 사용하는 흥미롭고 창의적인 AI 기반 게임 빌드입니다. 이것은 참가자들이 싸우도록 AI를 코딩하는 전투기를 특징으로하는 AI 전투 게임입니다. AI가 JavaScript와 어떻게 작동하는지 이해할 수있는 좋은 기회입니다. 이 게임은 GitHub에서 무료로 제공되며이 놀라운 AI 게임의 메커니즘을 설명하는 모든 세부 정보가 포함되어 있습니다.
치과 수비수 : 캔디 호드의 사가
Dental Defender 는 가장 흥미로운 HTML5 타워 방어 게임 중 하나입니다. 타워 디펜스와 슈팅 게임의 하이브리드 조합입니다. 이 게임은 UI를 위해 HTML5, 스타일을 위해 CSS3을 사용하여 만들어지며 게임 로직은 JavaScript로 작성됩니다. 이 게임은 플레이어가 치아를 세균으로부터 먹지 않도록 방어해야하는 타워 디펜스와 유사한 개념을 가지고 있습니다. 플레이어는 치아 주위를 움직여서 세균을 죽일 수 있습니다. 이 게임은 매우 흥미롭고 확실히 많이 좋아할 것입니다.
디아블로 -js
Diablo-js 는 지금 찾아서 재생할 수있는 최고의 HTML5 및 JavaScript 게임 중 하나입니다. html5 캔버스와 JavaScript로 가능한 최소한의 코드베이스를 사용하여 개발되었습니다. 이 게임의 UI와 비주얼은 HTML5 애니메이션과 JavaScript 로직이 최적으로 사용 된 곳에서 놀랍습니다. 이 게임은 기본적으로 마우스 클릭으로지도를 움직일 수 있고 나타나는 적을 죽일 수있는 전투기를 중심으로 진행됩니다. 이 게임은 HTML5에 대해 최대한 배울 수있는 최고의 기회입니다.
덕 헌트 JS
덕 헌트 게임은 모든 사람들이 비디오 게임 기간 동안 플레이했을 수있는 매우 흥미롭고 매력적인 게임입니다. 이 게임에서는 기본적으로 조이스틱을 사용하여 잔디에서 날아 다니는 오리를 쏘지 만이 경우 마우스 클릭을 사용하여 날아 다니는 오리를 쓰러 뜨립니다. 이 게임은 HTML5 및 JavaScript를 사용하여 구현됩니다. 개발자는 PixiJS를 렌더링 엔진으로 사용했으며 애니메이션을 위해 Green Sock Animations를 사용했습니다.
이모티콘 지뢰 찾기
우리는 모두 Windows 게임 인벤토리에서 사용할 수있는 지뢰 찾기 게임에 대해 알고 있습니다. 이 Emoji-minesweeper 게임은 HTML5와 JavaScript를 사용하여 minesweeper 게임을 다시 해석합니다. 유일한 차이점은 깃발 대신 폭탄 위치를 파악하기 위해 이모티콘을 마커로 배치한다는 것입니다. 왼쪽 클릭을 사용하여 스팟을 열고 마우스 오른쪽 버튼을 클릭하여 스팟을 폭탄으로 표시합니다. 이 게임이 우리가 사용했던 전통적인 게임만큼 재미있을 것이라고 확신합니다.
HTML5 타워 방어
HTML5 타워 방어 는 HTML5 및 JavaScript를 사용하여 구현 된 또 다른 흥미로운 타워 방어 게임입니다. 이 게임에서는 방어 대포를 레이아웃 맵으로 드래그하여 전체에서 나타나는 적이 우리의 구멍에 닿지 않는 곳에 배치합니다. 게임에는 게임이 진행됨에 따라 동적으로 업데이트되는 통계 데이터도 포함됩니다.
HTML5 JavaScript의 무한 마리오
이 Infinite Mario 게임은 UI / UX 용 HTML5를 사용하는 웹 브라우저 용 JavaScript로 코딩 된 원본 Infinite Mario의 복제품입니다. 이 게임은 Canvas 및 Audio 요소를 사용하는 좋은 예입니다. GitHub에서 무료로 제공되는이 게임의 소스 코드를 통해 Canvas 및 Audio 요소에 대해 많은 것을 배울 수 있습니다.
탭 어드벤쳐
오리지널 TETRIS 게임 시뮬레이터
테트리스 게임 테트리스 게임의 원래 1984 버전의 재미 있고 창조적 인 시뮬레이션입니다. 개발자는 HTML5 및 JavaScript를 사용하여이 게임을 브라우저에 구현합니다. 이 게임은 게임 애니메이션의 모든 프레임이 80 행의 25 행의 텍스트 문자열로 렌더링되는 완전히 텍스트 기반입니다.
박하 사탕 발가락
박하 사탕 발가락 은 가장 간단하고 중독성 중 하나입니다. 이 게임은 일부 스타일링을 위해 HTML5, JavaScript 및 CSS를 사용하여 개발되었습니다. 개발자는 Google 글꼴을 사용하여이 게임을보다 시각적으로 매력적으로 만들었습니다. 이 게임은 펜과 종이를 사용하여 실생활에서 연주하는 틱택 토의 정확한 복제품입니다. 여기에서는 기본적으로 마우스 클릭을 사용하여 레이아웃 인터페이스에서 원과 십자가를 배치합니다.
스크렙을위한 TooAngel 인공 지능
TooAngel 게임은 인공 지능과 인터페이스 및 로직을위한 HTML5 및 JavaScript를 통합 한 놀라운 조각 게임입니다. 스크 리프는 기본적으로 "스크립팅 스크립팅"을 의미합니다. 이 게임은 코더를위한 오픈 소스 샌드 박스 게임으로, 핵심 역학은 유닛의 AI를 프로그래밍하는 것입니다. JavaScript 코드를 작성하여 식민지를 통제하십시오. 이것은 JavaScript를 사용하여 AI 스크립트를 배울 수있는 좋은 기회입니다.
타워 디펜스
towerdefense 는 p5.JS를 사용하여 구현 된 간단한 타워 방어 게임입니다. 이지도 편집기를 사용하여 사용자 정의지도를 만들고 편집 할 수도 있습니다. 게임 코드는 Github에서이 게임을 플레이 할 수있는 컨트롤과 함께 무료로 제공됩니다.
포탑
타자기
웹 타워 디펜스
외계인 침공
농구 GM
캔버스 타워 디펜스 게임
캔버스 -td
수제 타워 방어 게임
잠자는 숲속의 미녀
우주 회사
스위프트 코드
타워 디펜스
출처 : https://www.edopedia.com/blog/open-source-html5-and-javascript-games/
'프론트엔드 개발 놀이터 > Three.js' 카테고리의 다른 글
| 마우스 포인트를 바라보는 삼각형 - 2D (0) | 2020.03.09 |
|---|---|
| 하늘과 바다를 만들어 봐 (0) | 2020.02.28 |
| 2019년 25가지 Three.js 예제 (0) | 2020.02.28 |
| 마우스 드래그 & 휠로 카메라 제어하기 (0) | 2020.02.28 |
| 최신버전 DirectionalLight 에서 그림자가 잘리는 현상 (0) | 2020.02.26 |