게임 만들기35

• 

  비행슈팅 게임 만들기(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.

• 

  자바스크립트 타이머 만들기 자바스크립트 타이머 예제이다.게임을 만들기 위해서 필수적인 타이머는 일정시간마다 반복하거나, 일정시간 후 어떤 동작을 발생시키기 위해서 필요하다.오늘은 일정시간 마다 반복하는 타이머 함수를 알아본다.해당 함수는 바로 setInterval 이란 함수이다.   setInterval (함수명, 시간);  위 형식으로 사용하며, 일정 시간의 간격동안 계속해서 첫 번째 인자 함수를 실행한다.해당 함수를 사용해서 1~10까지 카운트가 되는 예제를 만들어본다. 1. HTML 웹 문서 구성   캔버스를 활용한 웹 게임을 바탕으로 하기에 웹 페이지를 먼저 만든다. 캔버스를 호출하지 못했습니다.  해당 문서에서 주요 포인트는 캔버스를 만드는 일이다. 2. 자바스크립트 코드 구현 - setI.. 게임 만들기 2024. 10. 1.

• 

  비행슈팅 게임 만들기 기본 4편 비행슈팅 게임 만들기 기본 마지막 4편 이다.오늘은 키보드 상하좌우 키를 이용해서 비행기를 움직여 본다. 1. 키보드로 비행기 움직이기 - 키보드 이벤트를 받기 위해서 이벤트 리스너를 등록한다.  키보드가 눌려졌을때 즉각 반응하기 위해서 keydown 이벤트만 캐치한다. - 이벤트 리스너에 등록된 keydown 콜백 함수를 정의한다.window.addEventListener("load",drawScreen);//키보드 조작하기window.addEventListener("keydown",keydown);var img = new Image();img.src = "1942.png"; var x = 300, y = 200;function keydown(e) { let value = e.keyCode; .. 게임 만들기 2024. 9. 26.

• 

  비행슈팅 게임 만들기 기본 3편 비행슈팅 게임 만들기 기본 2편비행슈팅 게임 만들기 기본 1편비행슈팅 게임의 기본을 만들어 본다.목표는 키보드 상하좌우 방향키로 비행기를 움직일 수 있게 한다. 1. HTML 만들기 Canvas 를 만들지 못했습니다/  웹문서에서는soo0100.tistory.com 2편에서는 배경화면을 만들었다.이번 시간은 비행기를 화면에 그려본다. 1. 비행기 그리기window.addEventListener("load",drawScreen);var img = new Image();img.src = "1942.png";var x = 300, y = 200;function drawScreen(){ //(도화지)캔버스 얻어오기 var canvas = document.getElementById("canvas");.. 게임 만들기 2024. 9. 25.

• 

  비행슈팅 게임 만들기 기본 2편 비행슈팅 게임 만들기 기본 1편비행슈팅 게임의 기본을 만들어 본다.목표는 키보드 상하좌우 방향키로 비행기를 움직일 수 있게 한다. 1. HTML 만들기 Canvas 를 만들지 못했습니다/  웹문서에서는 크게 두가지 일을 정의했다. 1soo0100.tistory.com 본격적으로 게임화면을 만들기 위해서자바스크립트 로 코드를 작성한다. 1. 화면 만들기기본이 되는 화면을 만들기? 그리기 위한 작업을 먼저 한다.여기 테스트 게임에서는 검정색 배경을 사용했다.window.addEventListener("load",drawScreen);function drawScreen(){ //(도화지)캔버스 얻어오기 var canvas = document.getElementById("canvas"); //.. 게임 만들기 2024. 9. 22.