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

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

• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개빌강좌(1) - 캔버스기본
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(2) - 캔버스에 공그려보기
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(3) - 캔버스에 공을 움직여 보자
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(4) - 캔버스에 개미를 움작여 보자1
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(5) - 캔버스에 개미를 움작여 보자2
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(6) - 개미를 곡선으로 움직여 보자1
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(7) - 개미를 곡선으로 움직여 보자2
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(8) - 개미를 터치하여 잡아보자
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(9) - 여러마리의 개미터치 및 정리1
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(10) - 여러마리의 개미터치 및 정리2
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(11) - 개미터치효과 및 포인트
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(12)
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(13)
• 캔버스+자바스크립트 게임 터치팡팡(a.k.a개미잡기) 개발강좌(14)

---

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

개미를 랜덤하게 나타나게 하기

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

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

지난시간이어 코드펜 소스를 다시 보자

랜덤하게 나타낸 소스는 아래와 같다.

init(){
    
				let startX;
				let startY;
				let endX;
				let endY;

        
				switch(Math.round(Math.random()*3)){
					case 0:
						startX = -img1.width;		
						startY = Math.round(Math.random()*canvas.height);

						switch(Math.round(Math.random()*2)){
							case 0 :
								endX = canvas.width + img1.width;		
								endY = Math.round(Math.random()*canvas.height);
								break;
							case 1 :
								endX = Math.round(Math.random()*canvas.width);
								endY = -img1.height;
								break;
							case 2 :
								endX = Math.round(Math.random()*canvas.width);
								endY = canvas.height + img1.height;
								break;
						}
						break;
					case 1:
						startX = canvas.width + img1.width;		
						startY = Math.round(Math.random()*canvas.height);
						switch(Math.round(Math.random()*2)){
							case 0 :
								endX = -img1.width;		
								endY = Math.round(Math.random()*canvas.height);
								break;
							case 1 :
								endX = Math.round(Math.random()*canvas.width);
								endY = -img1.height;
								break;
							case 2 :
								endX = Math.round(Math.random()*canvas.width);
								endY = canvas.height + img1.height;
								break;
						}
						break;
					case 2:
						startX = Math.round(Math.random()*canvas.width);
						startY = -img1.height;
						switch(Math.round(Math.random()*2)){
							case 0 :
								endX = -img1.width;		
								endY = Math.round(Math.random()*canvas.height);
								break;
							case 1 :
								endX = canvas.width + img1.width;			
								endY = Math.round(Math.random()*canvas.height);
								break;
							case 2 :
								endX = Math.round(Math.random()*canvas.width);
								endY = canvas.height + img1.height;
								break;
						}
						break;
					case 3:
						startX = Math.round(Math.random()*canvas.width);
						startY = canvas.height + img1.height;
						switch(Math.round(Math.random()*2)){
							case 0 :
								endX = -img1.width;		
								endY = Math.round(Math.random()*canvas.height);
								break;
							case 1 :
								endX = canvas.width + img1.width;			
								endY = Math.round(Math.random()*canvas.height);
								break;
							case 2 :
								endX = Math.round(Math.random()*canvas.width);
								endY = -img1.height;
								break;
						}
						break;
				}

				let P1 = [startX,startY];
				let C1 = [Math.round(Math.random()*canvas.width),Math.round(Math.random()*canvas.height)];
				let C2 = [Math.round(Math.random()*canvas.width),Math.round(Math.random()*canvas.height)];
				let P2 = [endX,endY];
    
				let movePoints = [];
        let j = Math.round(Math.random() * 300) + 100;
        
        /*
				console.log("p1",P1);
        console.log("C1",C1);
        console.log("C2",C2);
        console.log("P2",P2); 
				*/
        
				for(let i=0;i<=j;i++){
					movePoints.push(this.drawBezier(P1,C1,C2,P2,i/j));
				}			
				this.movePoints = movePoints;    
        //console.log(this.movePoints);
    
  }

switch(Math.round(Math.random()*3)){

개미는 동서남북 4가지 방향중 랜덤하게 시작위치를 갖는다.

랜덤하게 4가지 숫자를 가져와서 각각 동서남북으로 매칭을 하고

  case 0:
    startX = -img1.width;		
    startY = Math.round(Math.random()*canvas.height);

만약에 서쪽(왼쪽)에서 시작한다면 서쪽(왼쪽)에서 의 높이를 또 랜덤하게 가져온다.
0 부터 세로크기(canvas.heigh) 가 될것이다. 그리고 나머지 3좌표를 랜덤하게 가져와서 마지막 좌표로 설정한다.

    switch(Math.round(Math.random()*2)){
      case 0 :
        endX = canvas.width + img1.width;		
        endY = Math.round(Math.random()*canvas.height);
        break;
      case 1 :
        endX = Math.round(Math.random()*canvas.width);
        endY = -img1.height;
        break;
      case 2 :
        endX = Math.round(Math.random()*canvas.width);
        endY = canvas.height + img1.height;
        break;
    }

서쪽이 시작좌표가 되었으면 동,남,북 쪽중 한곳이 마지막 좌표가 되게 한다.

  let C1 = [Math.round(Math.random()*canvas.width),Math.round(Math.random()*canvas.height)];
  let C2 = [Math.round(Math.random()*canvas.width),Math.round(Math.random()*canvas.height)];

그리고 랜덤하게 베지어 곡선의 제어점을 2개 지정하고

let movePoints = [];
let j = Math.round(Math.random() * 300) + 100;

각 개미마다 속도가 다를수 있게 하기 위해 좌표갯수를 랜덤하게 가져온다.

				for(let i=0;i<=j;i++){
					movePoints.push(this.drawBezier(P1,C1,C2,P2,i/j));
				}			
				this.movePoints = movePoints;  

그에 대한 베이어 곡선을 그리는 좌표점을 미리 기억해둔다.!

function d(x,y){
  bugs.some(function(item){
		//console.log(x,y);
    if (ctx.isPointInPath(item.path,x,y)){
      item.delFlag = 1;
    }   
  });
}

개미가 클릭되면 없애기 위해 delFlag 를 사용했다.

이렇게 랜덤하게 움직이는 개미와 클릭하면 사라지는 개미를 구현해보았다.

다음시간에는