터치팡팡(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 를 사용했다.
이렇게 랜덤하게 움직이는 개미와 클릭하면 사라지는 개미를 구현해보았다.
다음시간에는
Leave a comment