HTML5 "Boom Dots"게임이 Phaser 2.9.1로 업데이트되었으며 소스 코드가 주석 처리되었습니다.

2년 전 Phaser로 만든 Boom Dots 게임의 프로토 타입을 보여주었습니다.

그날 이후 여러 번 - 및 Phaser 업데이트가 있었으므로 스크립트를 Phaser 2.9.1로 업데이트하고 당시 주석 처리되지 않은 소스 코드에 주석을 달았습니다.

스테이지의 아무 곳이나 클릭 / 누르기 만하면 작은 공이 스테이지 아래쪽으로 사라지기 전에 발사됩니다. 큰 점수를 얻고 점수를 올리십시오.

모바일 장치가있는 경우 이 링크에서 직접 게임을 즐길 수 있습니다.

마지막으로 업데이트되고 주석 처리 된 소스 코드 :
// 게임 그 자체
var game;
// 창이 로드 될 때 ...
window.onload = function() {
    // 게임 생성
    game = new Phaser.Game(320, 480, Phaser.CANVAS);
    // PLay 상태 추가 및 실행
    game.state.add("Play", play, true);
} 
// "Play" 상태
var play = function(){}
play.prototype = { 
    // 프리로드 상태
preload:function(){ 
        // 그래픽 에셋 로드
        game.load.image("player", "player.png");
        game.load.image("enemy", "enemy.png");
},
    // 생성
    create:function(){
        // 게임 최대화
        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        game.scale.pageAlignHorizontally = true;
        game.scale.pageAlignVertically = true; 
        // 스코어 초기화
        this.score = 0; 
        // 최고 점수를 로컬에 저장하고 0으로 초기화
        this.topScore = localStorage.getItem("topboomdots") == null ? 0 : localStorage.getItem("topboomdots"); 
        // 점수를 표시 할 텍스트 개체를 추가합니다.
        this.scoreText = game.add.text(10, 10, "-", {
            font:"bold 16px Arial",
            fill: "#acacac"
});
        // 우리는 점수를 업데이트해야 할 때마다이 메소드를 호출 할 것입니다.
        this.updateScore();
        // 플레이어 추가
        this.player = game.add.sprite(game.width / 2, game.height / 5 * 4, "player");
        // 플레이어 등록 포인트를 센터에 설정하십시오.
        this.player.anchor.setTo(0.5);
        // 적 추가
        this.enemy = game.add.sprite(game.width, 0, "enemy");
        // 적의 등록 포인트를 센터로 설정
        this.enemy.anchor.set(0.5); 
        // 플레이어 배치
        this.placePlayer();
        // 적 배치
this.placeEnemy();
},
    // 각 프레임에서 실행되는 함수
update:function(){
        // 플레이어가 적과 접촉하면
if(Phaser.Math.distance(this.player.x, this.player.y, this.enemy.x, this.enemy.y) < this.player.width / 2 + this.enemy.width / 2){ 
            // 적의 트윈을 멈추다
            this.enemyTween.stop();
            // 플레이어 트윈 중지
this.playerTween.stop();
            // 점수에 1 점 더하기
this.score ++;
            // 이것은 완벽한 샷입니다 : 플레이어와 적군은 거의 수직축에 정렬되어 있습니다.
if(Math.abs(this.player.x - this.enemy.x) < 10){
                // 보너스 점수
                this.score += 2;
}
            // 다시 적을 배치하다
            this.placeEnemy();
            // 플레이어 재배치
            this.placePlayer();
            // 점수 텍스트 업데이트
            this.updateScore();
}
},
    // 점수를 업데이트하는 방법
    updateScore: function(){
this.scoreText.text = "Score: " + this.score + " - Best: " + this.topScore;
},
    // 플레이어 배치 방법
    placePlayer: function(){
        // 플레이어의 수평 위치 설정
        this.player.x = game.width / 2;
        // 플레이어의 수직 위치 설정
        this.player.y = game.height / 5 * 4;
        // 플레이어 트윈을 사용하여 플레이어를 화면 하단으로 이동합니다. // 점수가 높을수록 트윈이 빠릅니다.
        this.playerTween = game.add.tween(this.player).to({
y: game.height
}, 10000 - this.score * 10, Phaser.Easing.Linear.None, true);
        // 트윈이 완료되면 게임이 종료되고 die 메소드가 호출됩니다.
        this.playerTween.onComplete.add(this.die, this);
        // 플레이어 입력이 화재 메서드 호출을 기다리는 중
        game.input.onDown.add(this.fire, this);
},
    // game over
die: function(){
        // 현재 점수와 최고 점수 사이의 최대 값을 저장하는 로컬 저장소 업데이트
localStorage.setItem("topboomdots", Math.max(this.score, this.topScore)); 
        // 다시 게임을 시작하십시오.
        game.state.start("Play");
},
    // 적 배치 방법
    placeEnemy: function(){
        // 적 x 위치 설정
        this.enemy.x = game.width - this.enemy.width / 2;
        // 적의 y 위치 설정
this.enemy.y = -this.enemy.width / 2;
        // 트윈이 적을 무대에 진입하게한다.
        var enemyEnterTween = game.add.tween(this.enemy).to({
y: game.rnd.between(this.enemy.width * 2, game.height / 4 * 3 - this.player.width / 2)
}, 200, Phaser.Easing.Linear.None, true); 
        // 트윈이 완성되면 적을 수평으로 움직이십시오.
        enemyEnterTween.onComplete.add(this.moveEnemy, this);
}, 
    // 적을 움직이는 방법
    moveEnemy: function(){ 
        // 요요 트윈은 적을 좌우로 움직입니다.
        this.enemyTween = game.add.tween(this.enemy).to({
x: this.enemy.width / 2
}, 500 + game.rnd.between(0, 2500), Phaser.Easing.Cubic.InOut, true, 0, -1, true);
}, 
    // 발사 함수
    fire: function(){ 
        // 입력 리스너 제거
        game.input.onDown.remove(this.fire, this); 
        // 현재 플레이어 트윈 중지
        this.playerTween.stop(); 
        // 플레이어를 무대 위쪽으로 발사하는 트윈
        this.playerTween = game.add.tween(this.player).to({
y: -this.player.width
}, 500, Phaser.Easing.Linear.None, true);
        // 트윈이 완료되면 플레이어가 적을 놓친 것입니다. 게임이 끝났습니다.
        this.playerTween.onComplete.add(this.die, this);
}
}
소스 코드를 다운로드 한 후 프로토 타입을 재미있게 익히십시오.

댓글 없음:

댓글 쓰기