게임 만들기35

• 

  비행슈팅 게임 만들기 기본 1편 비행슈팅 게임의 기본을 만들어 본다.목표는 키보드 상하좌우 방향키로 비행기를 움직일 수 있게 한다. 1. HTML 만들기 Canvas 를 만들지 못했습니다/  웹문서에서는 크게 두가지 일을 정의했다. 1.1 HTML 문서에서는 캔버스를 정의 하고, 사이즈를 정한다.     캔버스의 크기를 정확히 알기위해서 border 속성을 추가했다.  1.2 자바스크립트 코드를 연결한다. 캔버스를 사용해서 웹 게임을 만드는 기본골격의 시작은 웹 문서를 만드는 일이다. 앞선 강좌에서 계속해서 반복해오는 패턴이다.코딩과 패턴은 반복하면서 익힌다... 다음편은 자바스크립트 코드이다. 게임 만들기 2024. 9. 19.

• 

  자바스크립트 캔버스에 이미지 띄우기 캔버스에 이미지를 띄워본다.준비물은 웹페이지 하나, 그리고 자바스크립트 코드 이다. 1. 웹페이지본 웹페이지는 캔버스를 만들고, 캔버스에 이미지를 그리기 위한 기능을 한다. Canvas를 지원하지 않습니다.  그 이외는 아무런 기능이 없다. 2. 자바스크립트 코드Image 클래스를 사용해서 이미지를 불러오는 일을 먼저한다.addEventLisetner (리스너 함수)를 사용해서 이미지가 로드 되면 drawScreen 함수를 호출되도록 했다.var img = new Image();img.src = "alien.png";img.addEventListener("load",drawScreen,false);function drawScreen(){ var theCanvas = document.getEl.. 게임 만들기 2024. 9. 11.

• 

  자바스크립트 키보드 입력값 화면에 표시하기 3편 자바스크립트 키보드 입력값 화면에 표시하기 2편https://soo0100.tistory.com/2646 자바스크립트 키보드 입력값 화면에 표시하기 1편키보드 입력값을 브라우저 화면에 출력하는 예제를 만들어본다.키보드로 게임을 조작하기 위한 필수 동작이다. 1. 웹soo0100.tistory.com 마지막 3편이다.1편 : 웹 페이지 만들고 캔버스 생성2편 : 캔버스를 자바스크립트 코드로 불러와서 크기 및 배경색 지정 지난 2편에서는 게임을 위한 기본 게임판을 설계했다.3편에서는 키보드를 입력받고 그 값을 화면에 출력한다.키보드를 입력받기 위해서는 이벤트리스터를 등록하자. 이벤트 리스너 란 특정 이벤트가 올라오면(발생하면) 그 이벤트에 해당하는 함수를 연결시켜 주는 함수이다. 하기에서는 키다운, 키업에 .. 게임 만들기 2024. 9. 10.

• 

  자바스크립트 키보드 입력값 화면에 표시하기 2편 https://soo0100.tistory.com/2646 자바스크립트 키보드 입력값 화면에 표시하기 1편키보드 입력값을 브라우저 화면에 출력하는 예제를 만들어본다.키보드로 게임을 조작하기 위한 필수 동작이다. 1. 웹 문서 만들기 캔버스 호출 오류 입니다.  웹 문서를 먼저 만든다.여기서는soo0100.tistory.com  지난 시간에는 자바스크립트를 담을 웹 페이지를 만들었고, 1. 자바스크립트 코드 연결2. 캔버스 엘리먼트 만들기이 두 가지를 해보았다. 이번시간에는 키보드를 입력받는 실제 자바스크립트 코드를 만들어본다.하기 코드에서는 우선, H5 문서에서 캔버스를 가져온 뒤 (2D 그림을 그릴 예정이므로, 컨텍스트 2d 타입으로 얻어온다) 이후 컨텍스트의 크기와 배경색상을 지정한다.* 참고로, 컨.. 게임 만들기 2024. 9. 9.

• 

  자바스크립트 키보드 입력값 화면에 표시하기 1편 키보드 입력값을 브라우저 화면에 출력하는 예제를 만들어본다.키보드로 게임을 조작하기 위한 필수 동작이다. 1. 웹 문서 만들기 캔버스 호출 오류 입니다.  웹 문서를 먼저 만든다.여기서는 자바스크립트를 연결하고, 캔버스를 만든다. 주요 코드는 자바스크립트에서 해결하고, 사실 이 웹 페이지는 껍데기이다.캔버스라는 것은, HTML에서 자바스크립트와 연동하여 그림을 그려줄 수 있는 도화지라고 간단히 생각하자.캔버스의 컨텍스란 도구를 이용해서 도형과 이미지, 텍스트 등도 그릴 수 있다.우선은 자세한 이론보다는 웹 페이지에 그림판을 하나 불러왔다고 생각한다. 그리고, 이 그림판에 우리는 게임을 동작하게 할 것이다. 캔버스는 엘리먼트에서는 스타일 값을 하기처럼 주었다.캔버스 크기와 브라우저에서의 위치 값.. 게임 만들기 2024. 9. 8.

• 

  에일리언 퇴치 게임(두더지 잡기) - 1 두더지 잡기 게임 만들기 with H5자바스크립트 와 HTML 그리고 CSS를 가지고 게임을 만들어 본다. 게임은 두더지 잡기 스타일로, 두더지 대신에 에일리언이 등장한다.게임룰은 두더지 잡기와 동일하다. 두더지 잡기 스타일의 게soo0100.tistory.com 두더지 잡기 Type 의 게임 에일리언 퇴치 게임을 만든다.결과 화면을 다시 살펴보자. 1. 화면 구성하기먼저 화면을 만든다. Play 버튼 과  Score 텍스트 영역 그리고 게임판을 제작한다. Score :  게임판 의 스타일을 적용하기 위해서 태그를 사용해서 크기(너비,높이) 와 배경색을 설정한다.배경색은 카드를 잘 보이게 하기 위해서 블랙으로 지정했다.브라우저에서 실행하면 위와 같은 기본 화면이 만들어진 것을 확인.. 게임 만들기/두더지게임 만들기 2024. 8. 27.

• 

  두더지 잡기 게임 만들기 with H5 자바스크립트 와 HTML 그리고 CSS를 가지고 게임을 만들어 본다. 게임은 두더지 잡기 스타일로, 두더지 대신에 에일리언이 등장한다.게임룰은 두더지 잡기와 동일하다. 두더지 잡기 스타일의 게임을 만들어보면 자바스크립트의  1. 랜덤함수2. 타이머  두가지 개념과 HTML 요소를 수정하기 위한 DOM 그리고 간단하지만 디자인 요소를 담당하는 CSS의 기초를 배울 수 있다.아주 간단한 게임이지만,기본적인 게임의 골격은 갖추었다. 게임은 처음에는 다 이렇게 시작한다.만들어 보자.  에일리언 퇴치 게임(두더지 잡기) - 1두더지 잡기 게임 만들기 with H5자바스크립트 와 HTML 그리고 CSS를 가지고 게임을 만들어 본다. 게임은 두더지 잡기 스타일로, 두더지 대신에 에일리언이 등장한다.게임룰은 두더지 잡.. 게임 만들기/두더지게임 만들기 2024. 8. 26.

• 

  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.