Flipping Legend HTML5 프로토 타입의 두 번째 단계에 오신 것을 환영합니다.
우리는 영웅 앞에서 치명적인 장애물을 추가 할 것입니다.
그것은 매우 간단합니다 : 당신이 구멍 위로 걸어 가면, 당신은 죽고 게임이 다시 시작됩니다.
캔버스의 왼쪽 / 오른쪽 반을 클릭하거나 탭하면 그에 따라 영웅이 이동합니다. 모바일 장치가있는 경우이 링크에서 직접 재생하십시오.
구멍은 스프라이트이지만 모든 타일 기반 게임과 마찬가지로 충돌을 검사하는 것이 아니라 주인공이 걷고있는 배열 항목의 값을보고 있습니다. 불필요한 스프라이트 생성을 막기 위해 객체 풀링을 사용했습니다.
개체 풀링에 대한 자세한 내용은이 게시물을 참조하십시오. 멋진 게임도 있습니다.
이제 완전히 주석 처리 된 소스 코드를 보여 드리겠습니다.
// the game itself
var game;
// 게임 옵션이 있는 전역 개체
var gameOptions = {
// 게임의 너비 (픽셀 단위)
gameWidth: 640,
// 타일에 적용 할 색조
tileColors: [0x00ff00, 0x00aa00],
// 보이는 첫 번째 프로토 타입에서 보이는 타일 수
verticalTiles: 9
}
window.onload = function() {
// 창 너비와 높이 결정
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
// 우리가 가로 모드에있는 경우, 다음 가짜 세로 모드로 창 높이를 설정
if(windowWidth > windowHeight){
windowHeight = windowWidth * 1.8;
}
// 게임 높이 정의
var gameHeight = windowHeight * gameOptions.gameWidth / windowWidth;
// 게임 자체 제작
game = new Phaser.Game(gameOptions.gameWidth, gameHeight);
// 게임 상태
game.state.add("PreloadGame", preloadGame);
game.state.add("PlayGame", playGame);
game.state.start("PreloadGame");
}
var preloadGame = function(game){}
preloadGame.prototype = {
preload: function(){
// 모든 콘텐츠를 표시하면서 가능한 한 가장 큰 창 영역을 게임 커버 만들기
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.stage.disableVisibilityChange = true;
// 바닥 타일
game.load.image("tile", 'tile.png');
// hero sprite
game.load.image("hero", 'hero.png');
// hole sprite
game.load.image("hole", 'hole.png');
},
create: function(){
game.state.start("PlayGame");
}
}
var playGame = function(game){}
playGame.prototype = {
create: function(){
// 이동 거리 계산에 유용함
this.moves = 0;
// 게임 높이 및 원하는 수직 타일의 양에 따라 타일 크기 결정
this.tileSize = game.height / gameOptions.verticalTiles;
// 배치 된 타일의 양, 다른 색상으로 짝수 / 홀수 타일을 색칠하는 데 유용합니다.
var placedTiles = 0;
// 타일을 게임의 중앙에두기위한 수평 오프셋
var offsetX = (game.width - this.tileSize * 3) / 2;
// 구멍 풀을 포함 할 배열
this.holePool = [];
// 모든 타일을 포함 할 배열
this.tileArray = [];
// 모든 타일을 포함 할 그룹
this.tileGroup = game.add.group();
// 게임 중앙에 타일이 배치되도록 그룹 배치
this.tileGroup.x = offsetX;
// 지형을 하나의 타일로 스크롤하는 트윈 생성
this.tileTween = game.add.tween(this.tileGroup).to({
y: this.tileSize
}, 100, Phaser.Easing.Linear.None);
// 끝이없는 주자 물건이 가짜이기 때문에, 우리가 타일로 지형을 아래로 움직이면.
// 우리는 그 위치를 재설정하고, 가장 낮은 타일을 맨 위로 이동시켜 무한한 지형을 제안합니다.
this.tileTween.onComplete.add(function(){
this.tileGroup.y = 0;
this.tileGroup.forEach(function(child){
child.y += this.tileSize;
}, this);
// bottomIndex는 캔버스 맨 아래에 배치 된 타일 배열의 인덱스입니다.
var bottomIndex = this.moves % this.tileArray.length;
// 하단 행을 통해 반복
for(var i = 0; i < 3; i++){
// 타일을 위로 이동하기
this.tileArray[bottomIndex][i].tileSprite.y -=
(gameOptions.verticalTiles + 1) * this.tileSize;
// 우리가 구멍 스프라이트가 있다면 ...
if(this.tileArray[bottomIndex][i].holeSprite != null){
// kill it (set its alive, exists and visible properties to false)
this.tileArray[bottomIndex][i].holeSprite.kill();
// pushing hole sprite in hole pool
this.holePool.push(this.tileArray[bottomIndex][i].holeSprite);
// removing the hole from tiles array
this.tileArray[bottomIndex][i].holeSprite = null;
}
}
// placeHoles 메서드는 행에 구멍을 배치합니다.
// 인수는 현재 배열 인덱스와 y 위치입니다.
this.placeHoles(bottomIndex, this.tileArray[bottomIndex][0].tileSprite.y);
// 한 번 더 이동했습니다! 일반적으로 점수는 동작에 따라 결정됩니다.
this.moves ++;
// 영웅이 구멍 위에 있는지 확인하기.
if(this.tileArray[(this.moves + 2) % this.tileArray.length]
[this.heroColumn].holeSprite != null){
[this.heroColumn].holeSprite != null){
game.state.start("PlayGame");
}
}, this);
// 지형 타일 배치 및 착색
for(var i = 0; i < gameOptions.verticalTiles + 1; i ++){
this.tileArray[i] = [];
for(var j = 0; j < 3; j ++){
var tile = game.add.sprite(j * this.tileSize,
game.height - i * this.tileSize, "tile");
game.height - i * this.tileSize, "tile");
tile.anchor.set(0, 1);
tile.width = this.tileSize;
tile.height = this.tileSize;
tile.tint = gameOptions.tileColors[placedTiles % 2];
this.tileGroup.add(tile);
// 타일 배열의 각 항목에는 타일 스프라이트가 있고 구멍 스프라이트가있을 수 있습니다
this.tileArray[i][j] = {
tileSprite: tile,
holeSprite: null
};
placedTiles ++;
}
// we start placing holes from the 6th row on
if(i > 4){
this.placeHoles(i, game.height - i * this.tileSize);
}
}
// 열 번호의 범위는 0에서 2까지입니다. 영웅은 열 1에서 시작합니다.
this.heroColumn = 1;
// 영웅이 움직일 수있는 순간
this.heroCanMove = true;
// 영웅 스프라이트 추가 및 크기 조정
this.hero = game.add.sprite(this.tileGroup.x +
this.tileSize,
game.height - 2 * this.tileSize, "hero");
this.tileSize,
game.height - 2 * this.tileSize, "hero");
this.hero.width = this.tileSize;
this.hero.height = this.tileSize;
this.hero.anchor.set(0, 1);
// 스프라이트를 이동하는 트윈
this.heroTween = game.add.tween(this.hero);
// 트윈이 완료되면 호출되는 콜백 함수
this.heroTween.onComplete.add(function(){
this.heroCanMove = true;
this.hero.x = this.tileGroup.x + this.tileSize * this.heroColumn;
this.heroWrap.visible = false;
}, this);
// 이것은 두 번째 영웅 스프라이트입니다. 우리는 랩 효과를 생성하는 데 사용할 것입니다.
this.heroWrap = game.add.sprite(this.tileGroup.x +
this.tileSize, game.height - 2 *
this.tileSize, "hero");
this.tileSize, game.height - 2 *
this.tileSize, "hero");
this.heroWrap.width = this.tileSize;
this.heroWrap.height = this.tileSize;
this.heroWrap.anchor.set(0, 1);
this.heroWrap.visible = false;
this.heroWrapTween = game.add.tween(this.heroWrap);
// 영웅과 감옥을 숨기기위한 마스크 타일 한 번 바깥에 영웅
var mask = game.add.graphics(this.tileGroup.x, this.tileGroup.y);
mask.beginFill(0xffffff);
mask.drawRect(0, 0, this.tileSize * 3, game.height);
this.hero.mask = mask;
this.heroWrap.mask = mask;
// 플레이어 입력 대기 중
game.input.onDown.add(this.moveHero, this);
},
placeHoles: function(row, posY){
// 구멍을 뚫을 지 알아보기위한 난수
if(game.rnd.integerInRange(0, 1) == 0){
// 무작위 구멍 위치
var holeSpot = game.rnd.integerInRange(0, 2);
// 가능한 경우 풀에서 구멍을 검색 ...
if(this.holePool.length > 0){
var hole = this.holePool.pop();
hole.x = holeSpot * this.tileSize;
hole.y = posY;
hole.revive();
}
// ... 새로운 것을 만들거나
else{
var hole = game.add.sprite(holeSpot * this.tileSize, posY, "hole");
hole.anchor.set(0, 1);
hole.width = this.tileSize;
hole.height = this.tileSize;
this.tileGroup.add(hole);
}
// tileArrays에 구멍을 추가한다.
this.tileArray[row][holeSpot].holeSprite = hole;
}
},
moveHero: function(e){
// 영웅이 움직일 수 있습니까?
if(this.heroCanMove){
// 지형을 움직이는 트윈을 시작하십시오.
this.tileTween.start();
// 영웅은 순간에 움직일 수 없다.
this.heroCanMove = false;
// 플레이어가 캔버스의 왼쪽 절반을 클릭 / 터치하면 영웅 방향을 왼쪽으로 설정하고
// 그렇지 않으면 오른쪽으로 설정합니다.
// 그렇지 않으면 오른쪽으로 설정합니다.
var direction = e.position.x < game.width / 2 ? -1 : 1;
// 영웅 다음 열 계산하기
var nextColumn = Phaser.Math.wrap(this.heroColumn + direction, 0, 3);
// "to"메서드로 웨이 포인트를 추가하지 못하도록 영웅 트윈 타임 라인을 빈 배열로 설정
this.heroTween.timeline = [];
// 새로운 영웅 목적지
this.heroTween.to({
x: this.hero.x + this.tileSize * direction
}, 100, Phaser.Easing.Cubic.InOut, true);
// 랩핑 영웅이 게임에 참가하는 경우입니다.
if(Math.abs(nextColumn - this.heroColumn) != 1){
// 그것을 보이게한다.
this.heroWrap.visible = true;
// 최종 컬럼 바깥에 놓는다.
this.heroWrap.x = nextColumn == 0 ? this.tileGroup.x -
this.tileSize:
this.tileGroup.x + 3 * this.tileSize;
this.tileSize:
this.tileGroup.x + 3 * this.tileSize;
// 트윈 타임 라인 재설정 중
this.heroWrapTween.timeline = [];
// 마침내 랩 영웅 이동
this.heroWrapTween.to({
x: this.heroWrap.x + this.tileSize * direction
}, 100, Phaser.Easing.Cubic.InOut, true);
}
this.heroColumn = nextColumn;
}
}
}
댓글 없음:
댓글 쓰기