GameBuilder 게임 개발 시리즈 의 틈새 핀 (AA)
14968 단어 HolaStudio 온라인 개발 게임 응용 프로그램
온라인 실행:http://www.tangide.com/apprun.html?appid=preview721427350809280 온라인 편집:http://www.tangide.com/gamebuilder.php?appid=preview721427350809280 위 챗 에서 QR 코드 스 캔 가능:
게임 캡 처: 게임 편집 인터페이스: 
게임 캡 처 를 통 해 알 수 있 듯 이 게임 의 화면 은 매우 간결 하 다!간단 한 인터페이스 에 흑백 회전 구체 가 어 우 러 져 게임 의 목적 을 한눈 에 알 수 있 습 니 다!게임 은 관문 을 통과 하 는 형식 으로 진행 되 는데 뒤쪽 관문 에 갈수 록 어 지 러 운 느낌 이 들 고 마치 고공 점프 같다!게임 방법 은 간단 하 니 조금 만 하면 된다!처음 관문 에 큰 공 에 작은 공이 걸 려 있 습 니 다. 아래 에 숫자 가 있 는 작은 공 을 큰 공 에 붙 이기 만 하면 작은 공이 게임 이 끝 날 때 까지 승리 합 니 다!불행 하 게 도 공 을 붙 이 는 과정 에서 옆 구체 에 부 딪 히 면 게임 이 끝 납 니 다!관문 이 들 어 오 면서 원래 붙 어 있 던 구체 가 점점 많아 지고 붙 여야 할 작은 공 도 많아 집 니 다. 그러면 중간의 틈 이 점점 작 아 지기 때문에 다른 공 을 만 날 확률 도 점점 높 아 집 니 다!좋아 하 는 유 저 는 자신 이 얼마나 많은 관문 을 통과 할 수 있 는 지 살 펴 보 자.
게임 에는 세 가지 공이 있 는데, 중간 에 큰 공이 있 고, 공 을 돌리 고, 공 을 기다린다.
curLevel.balls = []; //
curLevel.waitingBalls = []; // 두 가지 숫자 로 큰 공의 숫자 는 관문 을 나타 내 고 작은 공의 숫자 는 번 호 를 나타 내 며 관문 에 미리 설 치 된 작은 공 은 숫자 가 없다.
작은 공 발사
여기 서 필드 를 선택 한 onPointerDown 이 벤트 는 onClick 이 아 닌 발사 시기 입 니 다. 사용자 가 두 번 빠르게 클릭 할 때 onDoubleClick 이 벤트 를 두 번 클릭 하지 않 고 촉발 하기 때 문 입 니 다.
끈끈 한 판단
작은 공이 발 사 된 후 기다 리 는 공 은 전체적으로 위로 이동 하 며, 맨 위의 대기 공이 중심 구 와 의 거리 로 이동 할 때 이미 붙 었 다 고 판단 할 수 있 으 며, 이때 이 를 대기 구 배열 에서 옮 겨 회전 구 배열 에 넣 어야 한다.
if(curLevel.waitOffset < 0) {
curLevel.waitOffset = 3 * SIDE_BALL_RADIUS;
curLevel.inserting = 0;
var ball = curLevel.waitingBalls.shift();
ball.angle = 90;
...
curLevel.balls.push(ball);
}충돌 검출
충돌 을 감지 하 는 방법: 삽 입 된 공과 옆 에 있 는 가장 가 까 운 구체 의 절대 각 도 를 계산 합 니 다.
curLevel.balls.forEach(
function(e, index) {
if(Math.abs(e.angle - ball.angle) < 360 * SIDE_BALL_RADIUS/ (LINE_LEN*Math.PI)) {
curLevel.state = GAME_STATE_FAILED;
failBall = ball;
failBall.state = 0;
failBall.timeCount = 5;
} else if(index === curLevel.balls.length - 1
&& curLevel.waitingBalls.length === 0) {
curLevel.state = GAME_STATE_SUCCESS;
}
}
);관문 설계
var LEVEL = [
{"initNum":4, "waitNum":8, "speed":360/500},
{"initNum":6, "waitNum":8, "speed":360/500},
{"initNum":2, "waitNum":16, "speed":360/500},
{"initNum":0, "waitNum":24, "speed":360/500},
{"initNum":4, "waitNum":16, "speed":420/500},
{"initNum":3, "waitNum":20, "speed":420/500},
...
];initNum: 미리 설 정 된 공의 수량 waitNum: 대기 공의 수량 speed: 회전 속도 (20ms 마다 회전 하 는 각도).
게임 화면 그리 기
배경
게임 상태 에 따라 배경 색 선택
//draw bg
var color;
switch (curLevel.state) {
case GAME_STATE_RUNNING:
color = "#EED5B7";
break;
case GAME_STATE_SUCCESS:
color = "blue";
break;
case GAME_STATE_FAILED:
color = "red";
break;
}
ctx.fillStyle = color;
ctx.fillRect(canvas.x, canvas.y, canvas.w, canvas.h);센터 볼
ctx.beginPath();
ctx.arc(CENTER.x, CENTER.y, CENTER_BALL_RADIUS, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();
//draw level
var txt = (curLevel.level + 1) + "";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "italic 60px sans-serif";
ctx.strokeStyle = "#EED5B7";
ctx.fillStyle = "#EED5B7";
ctx.fillText(txt, CENTER.x, CENTER.y);
ctx.strokeText(txt, CENTER.x, CENTER.y);회전 구
//draw side ball;
curLevel.balls.forEach(
function(e) {
//
ctx.moveTo(CENTER.x, CENTER.y);
var rad = 2 * Math.PI * e.angle / 360;
var x = CENTER.x + LINE_LEN * Math.cos(rad);
var y = CENTER.y + LINE_LEN * Math.sin(rad);
ctx.strokeStyle = "black";
ctx.lineTo(x, y);
ctx.stroke();
var rad = SIDE_BALL_RADIUS;
if(typeof e.state !== "undefined") {
// ，
switch(e.state) {
case 0:
rad = 1.5 * SIDE_BALL_RADIUS;
break;
case 1:
rad = 0.8 * SIDE_BALL_RADIUS;
break;
case 2:
rad = 1.2 * SIDE_BALL_RADIUS;
break;
}
}
ctx.beginPath();
ctx.arc(x, y, rad, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();
if(e.numStr.length > 0) {
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "italic 15px sans-serif";
ctx.strokeStyle = "#EED5B7";
ctx.fillStyle = "#EED5B7";
ctx.fillText(e.numStr, x, y);
ctx.strokeText(e.numStr, x, y);
}
}
);공 을 기다리다
//draw waiting balls
var x = CENTER.x;
var y = CENTER.y + LINE_LEN + curLevel.waitOffset;
curLevel.waitingBalls.forEach(
function(e) {
ctx.moveTo(x, y);
ctx.beginPath();
ctx.arc(x, y, SIDE_BALL_RADIUS, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "italic 15px sans-serif";
ctx.strokeStyle = "#EED5B7";
ctx.fillStyle = "#EED5B7";
ctx.fillText(e.numStr, x, y);
ctx.strokeText(e.numStr, x, y);
y += 3 * SIDE_BALL_RADIUS;
}
);
원판 의 관문 은 이미 700 여 관문 에 이 르 렀 습 니 다. 놀 수 있 는 것 은 매우 높 습 니 다. 관문 의 디자인 은 많은 변화 가 있 을 수 있 습 니 다. 예 를 들 어 1. 속도 적 으로 빠르게 변화 할 수 있 습 니 다.
주: 본 시리즈 에 소 개 된 게임 소스 코드 는 모두 개방 되 어 있 으 며, www. tangide. com 을 방문 하여 게임 제작의 즐거움 을 체험 하 시기 바 랍 니 다.
좋은 웹페이지 즐겨찾기
