터치팡팡(a.k.a개미잡기) 개발강좌(9) - 캔버스위 여러마리의 개미를 잡자1

2 minute read

html5의 캔버스(canvas)를 이용하여 터치팡팡게임을 만드는 과정을 소개합니다. a.k.a 개미잡기
완성된 게임은 터치팡팡 <- 링크를 통해 확인할수 있다.




캔버스위 여러마리의 개미를 잡자1

지난번까지 곡선을 따라 가는 개미를 그리고
터치가 가능하게 까지 개념을 잡았다.

이제 실제로 개미를 터치하여 잡아보고 개미의 숫자를 계속 생성하게 해보자. 똑같은 곳에서만 생기면 재미가 없으니깐 랜덤하게 개미가 나타나게도 해보자!

개미를 터치하여 잡기

먼저 코드펜을 보자!

(화면이 안나온다면 오측 하단에 return 버튼을 눌러보자)

See the Pen canvas 015 by mnmsoft (@mnmsoft) on CodePen.

추가된 라인을 보면

let path; 

path를 전역으로 선언을 하였고.

function angleDrawImg(){
    '''
    ctx.fillStyle = "rgba(0,0,0,0.1)";
    path = new Path2D();
    path.moveTo(x,y);
    path.lineTo(x,y+height);
    path.lineTo(x+width,y+height);
    path.lineTo(x+width,y);
    ctx.fill(path);    
    '''
}

기존 angleDrawImg 함수에 path로 이미지 사이즈 만큼 박스를 그렸다.

function md(e){ 
  let x = e.layerX;
  let y = e.layerY;
  d(x,y);
}
function mm(e){
  let x = e.layerX;
  let y = e.layerY;
  m(x,y);
}
function mu(e){
  u();
}

function ts(e){
  var touches = e.touches;
  var ex = touches[0].pageX;
  var ey = touches[0].pageY - canvas.offsetTop;
  d(ex,ey);
}
function tm(e){
  var touches = e.touches;
  var ex = touches[0].pageX;
  var ey = touches[0].pageY - canvas.offsetTop;
  m(ex,ey);
}
function te(e){
  u();
}

function d(x,y){
		if (ctx.isPointInPath(path,x,y)){      
      alert("");
    }
}

function m(x,y){
  
}

function u(x,y){
  
}


if ('ontouchstart' in document.documentElement === true){
  canvas.addEventListener("touchstart",ts);
  canvas.addEventListener("touchmove",tm);
  canvas.addEventListener("touchend",te);
}else{
  canvas.addEventListener("mousedown",md);
  canvas.addEventListener("mousemove",mm);
  canvas.addEventListener("mouseup",mu);
}

또 클릭이나 터치에 이벤트를 줘서 지난시간에 배운 isPointInPath 를 통해 개미가 클릭되면 ‘읔’ 소리를 내게 하였다.

아마 터치나 마우스클릭의 대한 좋은 라이브러리가 있을것이라고 본다.
여기서는 마우스 이벤트리스너 함수를 md,mm,mu 터치 이벤트리스너 함수를 ts,tm,te 로 선언하고 각각 다시 d,m,u 함수를 최종적으로 호출하게 하였다.

이제 지금까지 작성된 소스를 정리하는 과정을 거쳐보겠다. 개미를 여러마리 랜덤하게 그려야 하기도 하고 좀더 확정성과 유연성을 가져야 하기 때문이다.

그러기 위해선 class 를 사용할 것이다. 대략적인 구조는 아래와 같다.

let bugs = []; //생성되는 Bug Class 를 담을 배열.
class Bug{ // Bug class 선언
    constructor(){ //생성자
            // 기본 변수 선언
            // 생성된 bug객체의 움직일 좌표배열
            // 현재 위치한 좌표정보
            // 클릭되거나 , 화면을 벗어났을때 제거할 플래그
            // 각도.
            this.init(); // 생성자에서 좌표를 얻을 함수를 호출.
    }

    init(){
        // 움직일 좌표를 얻는다.
    }

    draw(){
        //개미를 그린다.
    }

    etc(){
      //기타 함수들
    }
}

render(){
  //화면초기화
  //개미 생성및삭제 그리기
}

위와 같은 구조로 class 를 선언하여 소스를 다시 편집해보자.

코드펜에서 확인해보자!

See the Pen canvas 017 by mnmsoft (@mnmsoft) on CodePen.

개미를 여러마리 그리고 클릭하면 사라지게 했다 다음시간에 해당 소스를 살펴보고 업그레이드 해보자

다음시간에 또 봐요~!

Leave a comment