기차놀이 게임 만들기 (snake game)

댄싱 기차놀이 게임

 

javascript 로 개발하였고, 윈도우용 실행파일로 만들기 위해 electron 으로 빌드하였다.

snake game 을 javascript 로 개발한 교육용 소스 코드가 있어서, 이를 기반으로 개발하였다.

ios 앱 빌드를 하고 싶었지만, 애플 스토어에 올리지 않고 외부 배포 가능한 방법을 찾지 못하여서 만들지 못하였다.

 

(p5.js 는 사용하지 않았다.

image 및 audio 코드는 직접 넣어도 될 것 같아서 굳이 외부 라이브러리가 필요 없었다)

 

게임 플레이 해보기: https://by1994.github.io/dance-snake-game/

github repository: https://github.com/BY1994/dance-snake-game

 

---

개발에 참고한 자료들

 

[ Snake Game 배경 및 인물 크기 ]

 

Snake game board size 검색 결과 

The size of the grid varies, but is most commonly 8×8, 10×10 or 12×12 squares. Boards have snakes and ladders starting and ending on different squares; both factors affect the duration of play.

 

We recommend a board size of around 40 × 40 with a cell size of around 10 pixels.

 

=> 배수를 고려하여 캐릭터는 16 x 16 배경은 480 x 480 으로 결정

(캐릭터가 공간에 몇 들어차면 꽉 차는지)

 

[ 참고한 배경 및 캐릭터 사진들 (도트 이미지, 픽셀 아트) ]

=> 참고하여 pixel studio 로 직접 그렸다.

 

연습실 배경

practice room pixel art 검색 결과

https://www.deviantart.com/jesszet/art/Pixel-Art-Interior-Study-601214203

https://www.pinterest.co.kr/pin/233061349453892842/

 

배경 정면샷

pixel art front room 검색 결과

https://www.artstation.com/artwork/AqDoxo

 

사용하진 않았지만 유용해보이는 pixel room generator

https://lovebirdsnest.itch.io/pixel-room-generator

https://boingboing.net/2018/09/28/pixel-room-generator.html

 

pixel art mirror 검색 결과

 

도트 캐릭터 옆모습

(블루하와이 슬라임 님 구글 검색 자료)

pixel art man 검색 결과

https://kr.freepik.com/premium-vector/pixel-art-man-character-holding-a-red-umbrella_9786091.htm

 

더 간단한 픽셀 캐릭터 참고

도트 픽셀 캐릭터 라고 검색

https://www.crowdpic.net/photo/%ED%94%BD%EC%85%80-%ED%94%BD%EC%85%80%EC%95%84%ED%8A%B8-pixel-pixelart-pixelwoman-1260874

 

pixel art flower pot

https://www.istockphoto.com/kr/%EB%B2%A1%ED%84%B0/%ED%94%BD%EC%85%80-%EC%95%84%ED%8A%B8-%EC%84%B8%ED%8A%B8-%EA%B3%A0%EB%A6%BD-%EC%9E%A5%EC%8B%9D-%EC%8B%9D%EB%AC%BC-gm1285060992-382007417

 

[ Snake Game 소스 코드 참고 ]

snake game 소스 코드 참고 (단계별로 이해할 수 있도록 tutorial 도 있음)

https://www.educative.io/blog/javascript-snake-game-tutorial => 직접적으로 참고

 

16 Javascript Snake Games 모음
https://freefrontend.com/javascript-snake-games/

snake 머리는 그대로 있고 꼬리가 늘어나는 방법
https://stackoverflow.com/questions/56079171/adding-length-to-the-snake-in-snake-game

python snake game 단계별로 강의
https://www.edureka.co/blog/snake-game-with-pygame/

snake game 튜토리얼
하단에 상하좌우 버튼
https://www.freecodecamp.org/news/how-to-build-a-snake-game-in-javascript/

 

[ Snake Game 로직 수정을 위한 참고 자료 ]

 

java script 배열 마지막 값 가져오기

https://hianna.tistory.com/505

 

shift, unshift, push, pop 차이

unshift 가 맨 앞에 push 가 맨 뒤에 넣는거

pop 이 맨 뒤에 shift 가 맨 앞에서 꺼내는 거

https://electronic-moongchi.tistory.com/67

 

canvas 에 그림 넣기
https://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas

 

javascript canvas 에 배경 넣는 법

https://stackoverflow.com/questions/14012768/html5-canvas-background-image

var background = new Image();
background.src = "http://www.samskirrow.com/background.png";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
    ctx.drawImage(background,0,0);   
}

javascript 그림 겹치기 순서

https://ojji.wayful.com/2014/01/HTML-DIV-Layer-Position-Absolute-Relative-Z-index-Visibility.html

 

모든 이미지가 로딩된 후에 시작하도록 하는 방법

https://ourcodeworld.com/articles/read/571/how-to-verify-when-multiple-images-have-been-loaded-in-javascript

// Create the flag variables (counter and total of images)
var Counter = 0;
var TotalImages = 2;

// Create an instance of your images
var Image1 = new Image();
var Image2 = new Image();

// The onload callback is triggered everytime an image is loaded
var onloadCallback = function(){
    // Increment the counter
    Counter++;

    // Verify if the counter is less than the number of images
    if(Counter < TotalImages){
        return;
    }

    // Trigger the final callback if is the last img
    allLoadedCallback();
};

// The callback that is executed when all the images have been loaded or not
var allLoadedCallback = function(){
    console.log("Atention, the following images were not loaded ", notLoadedImages);
};

// Attach onload callbacks
Image1.onload = onloadCallback;
Image2.onload = onloadCallback;

// Load the images !
Image1.src = "queso.png";
Image2.src = "image.jpg";

 

화면 화살표 디자인

https://onaircode.com/javascript-arrow-design-code-examples/

17+ Javascript Arrow Design Code Examples

 

canvas 의 마우스 클릭 위치 얻기

https://snowdeer.github.io/javascript/2020/01/09/html5-how-to-get-mouse-click-pos-on-canvas/

 

javascript 에서 오디오 재생하기

https://mjmjmj98.tistory.com/31

 

audio loop 돌도록 하는 방법 (무한재생)

https://curryyou.tistory.com/339

https://mjmjmj98.tistory.com/31

https://bskyvision.com/792 => 직접적으로 참고 (음악 무한 반복 재생하고 싶을 때, ended 에 event listener 달아주면 됨)

 

마우스 커서를 바꿔보려고 시도했다. 그러나 svg 태그 이용한 버전 말고는 동작을 안 해서 포기하였다.

마우스 커서 바꾸는 예시

https://css-tricks.com/using-css-cursors/
https://daily-dev-tips.com/posts/javascript-mouse-drawing-on-the-canvas/ => 이것만 동작함

 

마우스 커서 무료로 다운 받을 수 있는 곳

https://www.cursors-4u.com/cursor/

 

위의 예시 중에 유일하게 동작했던 게 emoji 를 사용하면 바뀌는 것 같아서 emoji 를 찾았으나 원하는 이미지가 없었다.

https://unicode.org/emoji/charts/full-emoji-list.html

 

화면 맨 상단에 뜨는 아이콘 ico 를 만들기 위한 참고 자료

png to ico 256x256 크기로 변환
https://png2icojs.com/kr/

html 에 ico 설정하는 방법
https://dasima.xyz/html-title-%EC%9D%B4%EB%AF%B8%EC%A7%80-icon/

 

ios 빌드를 시도했으나, 실패하였다.

[ ios 앱 빌드 ]

javascript 로 iphone app 만드는 거 질문 답변

https://www.quora.com/Can-you-make-iPhone-apps-with-Javascript

 

모바일 앱 제작을 위한 javascript framework 리스트

: jQuery Mobile, React Native, NativeScript, Ionic, Titanium, Meteor

https://clutch.co/app-developers/resources/top-javascript-frameworks-mobile-app-development

 

cordova 문서

https://cordova.apache.org/docs/en/latest/

 

cordova 의 config.xml 작성 방법

https://cordova.apache.org/docs/en/11.x/config_ref/

 

ionic 으로 ios 앱 개발하는 방법

https://ionicframework.com/docs/developing/ios

 

ionic 빌드할 때 시작 페이지를 내 html 로 연결하면 될 것 같아서 검색

https://stackoverflow.com/questions/30326908/how-to-set-a-starting-page-in-a-ionic-project

 

단순한 ionic 튜토리얼 (앱 시작 화면 띄우는 거까지만 있음)

https://romeoh.tistory.com/entry/Ionic-iOS-%EC%83%9D%EC%84%B1-%EB%B9%8C%EB%93%9C-%EC%8B%A4%ED%96%89%ED%95%98%EA%B8%B0

https://kamang-it.tistory.com/entry/Ionic-03ios%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B3%A0-%EB%B9%8C%EB%93%9C%ED%95%98%EA%B8%B0

 

javascript 를 ios 로 빌드할 수 있는지? 를 오픈톡방에 물어보았을 때,

=> ionic capacitor 를 사용하시면 단순 퍼블리싱된 페이지를 앱으로 패키징할 수 있습니다. https://capacitorjs.com/

ios 를 .ipa 파일로 설치하는 게 가능한 건지? 를 오픈 톡방에 물어보았을 때,

=> Firebase 로도 가능하고 testflight 로도 가능합니다

 

ios 빌드를 위한 ionic capacitor 정보

https://ionicframework.com/docs/cli/configuration

ionic.config.json 에 작성하면 된다고 하는데, 여기 index.html 이 들어가는 위치는 못 찾았다. (검색해보니 default 가 index.html 이라고 했다.)

 

ionic capacitor 빌드 커맨드

https://ionicframework.com/docs/cli/commands/capacitor-build

 

아이폰에 ipa 파일 설치하기

https://es1015.tistory.com/465

 

[ electron 빌드 ]

이전에 안경알 찾기 게임을 만들 때 설치한 electron 을 그대로 사용하였다.

https://computer-choco.tistory.com/474

 

electron 빌드를 하면 배경이 안 불러와졌는데... (상단 메뉴 바 중에 개발자 모드 기능을 찾아 클릭하면, F12 개발자 도구 결과창이랑 똑같이 보인다) electron . 을 쳐서 실행했을 때는 잘 보였다.

빈 화면만 뜨면 앞으로 png 등 이미지 파일을 로드하지 못한 경우를 의심해보면 될 것 같다.

extra Resources 에 추가하는 방법들을 따라했지만 동작하지 않았다.

https://stackoverflow.com/questions/56198535/how-to-build-electron-application-with-assets-folder-by-electron-builder
https://www.reddit.com/r/electronjs/comments/cpgvmy/electronbuilder_include_static_assets/

    "extraResources": [
      {"from": "assets",
        "to": ""
      }
    ],

 

빌드 옵션에 asar 를 false 로 했더니 동작했다.

https://itinerant.tistory.com/88

 

추천하지 않는 방법이라고 하지만 해결되지 않아서 최종본은 결국 asar 를 false 로 했다.

 

(+ 참고로 electron 은 모바일용 빌드는 지원하지 않는다)

 

[ 모바일 환경 ]

모바일은 키보드가 없으므로 화면에 화살표 버튼을 만들어서 github io 페이지를 접속해보았는데, 반응이 엄청 느렸다. 확인해보니 모바일은 일부러 늦게 반응하도록 되어있었다.

이를 해결하기 위한 라이브러리도 있다.

https://y-designs.com/ideas/stories/slow-response-when-clicking-on-mobile

 

[ 저작권 정보 ] 

1. 게임 버튼
start 버튼
http://pixelartmaker.com/art/72971ad31e78895
replay 버튼
http://pixelartmaker.com/art/f34327dc2ac6170

 

2. 효과음
https://pixabay.com/sound-effects/search/game/
Game Start - plasterbrain
Cartoon jump - Bastianhallo

 

3. 배경음악

Music from Tunetank.com
SHANTI - Tropical Adventure (Copyright Free Music)
Download free: https://tunetank.com/t/7bfj/266-tropical-adventure

 

끝