기차놀이 게임 만들기 (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
더 간단한 픽셀 캐릭터 참고
도트 픽셀 캐릭터 라고 검색
pixel art flower pot
[ 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
모든 이미지가 로딩된 후에 시작하도록 하는 방법
// 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
Arrow designs are getting popular.17 new javascript arrow button design. Bring buttons to life using animations, hover effects and many more.
onaircode.com
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 튜토리얼 (앱 시작 화면 띄우는 거까지만 있음)
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
끝