비행슈팅 게임 만들기 기본 2편

 

비행슈팅 게임 만들기 기본 1편

 

본격적으로 게임화면을 만들기 위해서

자바스크립트 로 코드를 작성한다.

 

1. 화면 만들기

기본이 되는 화면을 만들기? 그리기 위한 작업을 먼저 한다.

여기 테스트 게임에서는 검정색 배경을 사용했다.

window.addEventListener("load",drawScreen);

function drawScreen(){
    //(도화지)캔버스 얻어오기 
   var canvas =  document.getElementById("canvas");
    //(펜)컨텍스트 얻기
   var context = canvas.getContext("2d");
   
   // 펜 색상 입히기
   context.fillStyle = "#1100000";
   // 네모 상자 그리기
   context.fillRect(0, 0, 800, 600);
}

 

- 가장 최상위 객체 window 를 이용해서 addEventListener 이벤트 리스너를 등록한다.

  이 뜻은 화면이 로드되면, drawScreen 을 호출한다. 즉, window 브라우저 화면이 준비되면 화면을 그린다는 뜻이다.

 

- drawScreen() 함수에서는

  HTML에서 캔버스를 가져온다.

  캔버스를 이용해서 컨텍스트를 얻고, 컨텍스트의 색상을 설정한다.

  설정한 컨텍스트로 검정색 네모박스를 그린다.

  바로 이 검정 박스가 게임화면으로 사용될 검정배경이 된것이다.

 

다시 한번 리마인드 하겠다.

캔버스는 도화지, 컨텍스트는 그림을 그리는 도구 펜이라고 생각하자.

이렇게 간단히 접근하면서 코딩한다.

화면만들기 코딩을 마치면, 하기처럼 검정색 배경이 그려진것을 확인 할 수 있다.

 

이제 자바스크립트에서 이미지를 불러오는 방법을 사용해서

비행기 이미지를 그리자. 다음편에 계속...

 

비행슈팅 게임 만들기 기본 3편