게임 만들기/1942 비행슈팅 게임 만들기24

• 

  비행슈팅 게임 만들기(6) - 충돌검사 만들기 지난 시간 총알이 움직이는 것 까지 구현했다.총알이 아군 비행기에 부딪혔을때 게임이 종료되도록 구현해본다.총알과 비행선이 충돌 여부를 검사하는 것을 #충돌검사 라고 부른다.1. 충돌검사 로직충돌검사는 비행선 네모영역에 총알이 들어오면 충돌이 되었다고 판단하다.게임엔진 처럼, 세부영역까지 모두 체크하기에는 어려움이 있다. 이런면에서는 게임엔진을 사용하는 것이 훨씬 편하다는 것을 알수 있다. 물론 물리엔진을 구현하는 것도 포함된다. 여기서는 우선 단순하게 네모영역의 충돌로직을 만들어본다.사실 일부 캐쥬얼 게임의 경우는 단순히 네모 영역만으로도 게임성을 커버할 수  있다.//아군 비행선 사각형 기준으로 충돌검사를 체크한다.function collision(mx, my){ if(pX mx && pY m.. 게임 만들기/1942 비행슈팅 게임 만들기 2024. 10. 14.

• 

  비행슈팅 게임 만들기(5) - 적군 총알 움직이기 총알을 움직여 보겠다.총알을 움직이기 위해서는 타이머를 사용해야 한다.  1. 타이머 설정-setInterval() 이란 자바스크립트 내장함수를 사용한다.- 인터벌 이란 영어단어의 뜻은 짧은 시간내에 어떤 행동을 반복한다는 의미이다.- 즉, 이 함수의 기능도 100ms(0.01초) 마다 moveFire 란 함수를 실행한다.//타이머로 총알 움직이기var timerId = setInterval( moveFire , 100 ); - 우리는 moveFire() 란 함수를 만들고, 그 안에 총알의 좌표를 바꾸어 주면 된다.- 그리고, 화면을 갱신하면 총알이 움직이는 로직이다.- timerId 라는 변수는 setInterval() 함수의 반환값을 받는다. 이 반환값은 타이머의 아이디 이다.  타이머 아이디가 필요.. 게임 만들기/1942 비행슈팅 게임 만들기 2024. 10. 13.

• 

  비행슈팅 게임 만들기(4) - 적군 총알 그리기 적군 총알(미사일)을 그리고 화면 중앙으로 움직여본다.화면 중앙에는 아군 비행체가 있다. 비행체는 지난시간 까지 구현한 키보드로 적군 총알을 피할 수 있다.1. 적군 총알 불러오기//미사일 이미지 로딩하기var missile = new Image();missile.src = "img/missile.png";Image 객체를 사용해서 총알 이미지를 불러온다. 2. 총알 초기 좌표점 과 이동 값 설정하기//여러개의 미사일 좌표점을 하나로 묶어서 관리.//미사일 좌표 클래스 정의함.var mP = { x1 : 10 , y1 : 10 , mx1 : 10 , my1 : 10, x2 : 850 , y2 : 10 , mx2 : -10 , my2 : 10, x3 : 10 , y3 : 820 , mx3 :.. 게임 만들기/1942 비행슈팅 게임 만들기 2024. 10. 12.

• 

  비행슈팅 게임 만들기(3) - 키보드로 아군 비행선 움직이기 이번 시간은 키보드로 비행선을 움직여 본다1. 키보드 이벤트 리스너를 등록한다.window.addEventListener("keydown", onkeydown);- keydown 이벤트가 발생했을때 onkeydown 함수를 부른다. 2. onkeydown() 함수에서 키동작 작업하기- onkeydown 함수에서는 자동으로 이벤트 클래스 e 를 받는다.- e.keycode 를 통해서 키 이벤트 값을 알수 있다.- console.log() 를 통해서 사전에 미리 키코드 값을 찍어보면서 코드를 작성하면 편하다.//키보드가 눌렸을때 실행되는 콜백함수 (이벤트 객체를 인자로 받는다)function onkeydown(e){ //키 값을 찍어본다. console.log(e.keyCode); //상키 입력시.. 게임 만들기/1942 비행슈팅 게임 만들기 2024. 10. 10.

• 

  비행슈팅 게임 만들기(2) - 아군 비행기 그리기 지난 시간 우주배경까지 만드는 코드를 완성했다.이번 시간은 아군 비행체를 그려본다. 1. 비행기 그리기비행기를 그리기 위해서 Image 객체를 사용하여 이미지 리소스를 로딩한다.//아군 비행기 로딩하기var player = new Image();player.src = "img/1942.png"; 2. 화면에 그리기로딩한 이미지를 화면에 그려야 한다. 지난시간 만든 사용자 함수인 drawScreen() 내에서 컨텍스트를 사용해서 비행기 이미지를 그린다. //컨텍스트로 아군 이미지 그리기 context.drawImage(player, pX, pY , 100, 80); 함수의 인자값으로 사용된 pX, pY 는 비행기가 그려질 좌표점 이다.우선 화면 중앙에 비행기를 그리기 위해서, 해당 변수의 .. 게임 만들기/1942 비행슈팅 게임 만들기 2024. 10. 7.

• 

  비행슈팅 게임 만들기(1) - 충돌검사 루틴까지 4개의 총알이 비행기에 충돌하면 게임이 끝난다. 물론 비행기를 키보드로 움직일 수도 있다.단순하지만 해당 내용은 비행슈팅 게임의 기본이 된다. 위 로직을 만들기 위해서는 4가지 구성이 필요하다. 1. 화면 구성.2. 비행선 움직이기 위해 키보드 이벤트 등록.3. 타이머로 총알 이동.4. 게임 상태 변경.1. 화면구성웹 페이지내 캔버스를 만들고, 자바스크립트 코드를 연결한다. Canvas 를 만들지 못했습니다/  캔버스 영역을 별도로 표시하기 위해서 border 속성을 추가한다. 2. 자바스크립트 코드두번째 로는 자바스크립트 파일을 만들고, 화면 구성을 시작한다.window.addEventListener("load",drawScreen);//배경 이미지 로딩하기var backImg = new Im.. 게임 만들기/1942 비행슈팅 게임 만들기 2024. 10. 6.

• 

  1942 독도 9스테이지 완성. 9 스테이지를 마무리 지었다. 9 판에서는 적군이 뒤에서 나오기에 하늘 지뢰 폭탄을 적절히 사용해야 한다. 대호 3호기 검정 기체로 업그레이드가 되면 바로 이 하늘 지뢰 폭탄을 사용할 수 있다. 이제 10 스테이지가 남았다. 게임 만들기/1942 비행슈팅 게임 만들기 2020. 8. 19.

• 

  1942 독도 제작영상 8스테이지 완성 7 스테이지에 이어 8스테이지를 구성해보았다. 적군들이 2발 이상의 총알을 발사한다. 그리고, 아군 은 파워 게이지를 먹었을때 기체가 업그레이드 된다. 단지 색상만 변하기 했지만 파워 및 하늘 지뢰 를 사용할 수 있도록 업그레이드 할 예정이다. 게임 만들기/1942 비행슈팅 게임 만들기 2020. 8. 16.

• 

  1942 독도 7스테이지 완료. 총 10스테이지 중 7스테이지 구성을 마쳤다. 물론, 게임 맵을 완성은 했지만 향후 전체 제작이 끝나면 다시 한번 더 게임을 하면서 밸런스를 조정해야 한다. 게임은 이렇듯 만든다고 끝나는 것이 아닌 밸런스 와 테스트가 무척 중요하다. 어찌 됐든 8,9,10 3개의 스테이지만 남았다. 더디긴 하지만 꾸준히 하는 나에게 응원을 보내며, 더 열심히 집중해서 하길... youtu.be/A2vA0zdReMg 게임 만들기/1942 비행슈팅 게임 만들기 2020. 8. 14.

• 

  1942 독도 제작영상 18편 드디어 3스테이지 세팅이 완료되었다. 1, 2 스테이지에 이어 신규 비행 기체가 등장한다. 게임의 밸런스를 위해서 조금씩 난이도를 높이기로 결정했다. 보스도 조금 각색해서 등장시키니 그럴듯 하긴 하다. 그리고, 보스 클리어를 실패하면 다시 해당 스테이지를 진행해야 한다. 여기 까지 구현하니 그래도 조금은 게임 같아보인다. 이제 남은 단계는 4~10스테이지 게임 구성 , 점수 집계 광고 적용이다. 물론 가장 중요한건 게임 레벨의 밸런스를 재미있게 만드는 일이다. 재미있게 만드는 것이 중요하면서도 가장 어렵다. 게임 만들기/1942 비행슈팅 게임 만들기 2020. 8. 7.