phaser 쿠키 만들기

우선 인덱스에서.html에 phaser를 도입합니다.js와 자신이 만든 게임.js

canvas의 css 스타일 설정

canvas{ margin:0 auto;}

다음은 한 가지 방법으로 전체 게임을 봉인합니다.

(function() {}());

function에서 게임을 정의합니다.

（function(){

 var SantaGame = {
        init: function() {
            this.game = new Phaser.Game(width, height, Phaser.CANVAS, 'game');
            this.game.state.add('boot', this.boot);
            this.game.state.add('load', this.load);
            this.game.state.add('play', this.play);
            this.game.state.add('title', this.title);
            this.game.state.add('gameOver', this.gameOver);
            this.game.state.start('load');
        },
        boot:function(){

        },
        load:function(){

        },
        title:function(){

        },  
        play:function(){

        },
        gameOver:function(){

        }

};

SantaGame.init();

}()）

boot 인터페이스에 로딩 인터페이스를 미리 불러옵니다.저번 게임처럼 바로 로딩 인터페이스로 넘어가도록 하겠습니다.

load: {
            preload: function() {
                var preloadSprite = this.game.add.sprite(this.game.world.width / 2 ,this.game.world.height / 2 ,'loading'); // loading sprite
                this.game.load.setPreloadSprite(preloadSprite);
                this.game.load.audio('drivin-home', 'assets/world.wav');
                this.game.load.audio('ho-ho-ho', 'assets/bonbon.wav');
                this.game.load.audio('hop', 'assets/bomb.wav');
                this.game.load.image('platform', 'assets/1.png');
                this.game.load.spritesheet('santa-running', 'assets/runman.png', 493/5, 174,5);
                this.game.load.image('snow-bg', 'assets/beijing1.png');
                this.game.load.image('snow-bg-2', 'assets/yuanjing1.png');
                this.game.load.image('snowflake', 'assets/xiaoshixiaoguo.png');
                this.game.load.image('logo', 'assets/name.png');
                this.game.load.image('startbtn', 'assets/bangzhujiantou.png');
            },
            create: function() {
                this.game.state.start('title');
            }
        },

그리고 불러올 때 title 인터페이스를 실행합니다.
title 인터페이스.사실은menu인터페이스입니다.

title: {
            create: function() {

 this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0); this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg').autoScroll(-100,0); this.logo = this.game.add.sprite(this.game.world.width / 2 - 158, 20, 'logo'); this.logo.alpha = 0; this.game.add.tween(this.logo).to({ alpha: 1 }, 1000, Phaser.Easing.Linear.None, true, 0); this.startBtn = this.game.add.button(this.game.world.width / 2 - 89, this.game.world.height - 120, 'startbtn', this.startClicked); this.startBtn.alpha = 0; this.game.add.tween(this.startBtn).to({ alpha: 1 }, 1000, Phaser.Easing.Linear.None, true, 1000); }, startClicked: function() { this.game.state.start('play'); } },

공식 문서에서 알파는 대상체의 불투명도라고 합니다.투명도지.
tween 애니메이션은 로고의 투명도를 0에서 1로 바꿉니다.

 this.game.add.tween(this.logo).to({
                    alpha: 1
                }, 1000, Phaser.Easing.Linear.None, true, 0);

버튼 및 버튼 이벤트 추가

this.startBtn = this.game.add.button(this.game.world.width / 2 - 89, this.game.world.height - 120, 'startbtn', this.startClicked);
                this.startBtn.alpha = 0;
                this.game.add.tween(this.startBtn).to({
                    alpha: 1
                }, 1000, Phaser.Easing.Linear.None, true, 1000);

단추에 클릭 이벤트를 추가하는 것은this.startClicked
다음은 이것입니다.클릭 함수:

 startClicked: function() {
                this.game.state.start('play');
            }

눈 감고 다음 장면으로 들어간 거 다 알았어.
다음은 가장 중요한 플레이 인터페이스입니다. 텀벙텀벙~

  play: {
            create: function() {
                gameScore = 0;
                this.currentFrame = 0;
                this.gameSpeed = 580;
                this.isGameOver = false;
                this.game.physics.startSystem(Phaser.Physics.ARCADE);
                this.music = this.game.add.audio('drivin-home');
                this.music.loop = true;
                this.music.play();
                this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0);
                this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
                this.bg.fixedToCamera = true;
                this.bg.autoScroll(-this.gameSpeed / 6, 0);
                this.emitter = this.game.add.emitter(this.game.world.centerX, -32, 50);
                this.platforms = this.game.add.group();
                this.platforms.enableBody = true;
                this.platforms.createMultiple(5, 'platform', 0, false);
                this.platforms.setAll('anchor.x', 0.5);
                this.platforms.setAll('anchor.y', 0.5);
                var plat;
                for (var i = 0; i < 5; i++) {
                    plat = this.platforms.getFirstExists(false);
                    plat.reset(i * 192, this.game.world.height - 44);
                    plat.width = 300*0.6;
                    plat.height = 88*0.6;
                    this.game.physics.arcade.enable(plat);
                    plat.body.immovable = true;
                    plat.body.bounce.set(0);
                }
                this.lastPlatform = plat;
                this.santa = this.game.add.sprite(100, this.game.world.height - 200, 'santa-running');
                this.santa.animations.add('run');
                this.santa.animations.play('run', 15, true);
                this.santa.width = (493/5)*0.5;
                this.santa.height = 174*0.5;
                this.game.physics.arcade.enable(this.santa);
                this.santa.body.gravity.y = 1500;
                this.santa.body.collideWorldBounds = true;
                this.game.camera.follow(this.santa);
                this.cursors = this.game.input.keyboard.createCursorKeys();
                this.spacebar = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
                this.score = this.game.add.text(20, 20, '', {
                    font: '24px Arial',
                    fill: 'white'
                });
            },

분해해 보다.먼저 각 항목의 데이터를 초기화하다.그리고 공기 물리 시스템.음향 효과 제한을 켜는 것은 무한 순환이다.

this.game.physics.startSystem(Phaser.Physics.ARCADE);
                this.music = this.game.add.audio('drivin-home');
                this.music.loop = true;
                this.music.play();

다음은 배경에 대한 처리입니다.

this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0);
                this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
                this.bg.fixedToCamera = true;
                this.bg.autoScroll(-this.gameSpeed / 6, 0);

배경 그림 두 개를 추가하고 회전을 설정합니다.공식 API fixedtocamera는 배경에 따라 이동하고 렌즈도 이동합니다.

this.platforms = this.game.add.group();
                this.platforms.enableBody = true;
                this.platforms.createMultiple(5, 'platform', 0, false);
                this.platforms.setAll('anchor.x', 0.5);
                this.platforms.setAll('anchor.y', 0.5);
                var plat;
                for (var i = 0; i < 5; i++) {
                    plat = this.platforms.getFirstExists(false);
                    plat.reset(i * 192, this.game.world.height - 44);
                    plat.width = 300*0.6;
                    plat.height = 88*0.6;
                    this.game.physics.arcade.enable(plat);
                    plat.body.immovable = true;
                    plat.body.bounce.set(0);
                }
                this.lastPlatform = plat;

그룹을 추가하면 계단 그룹입니다.앞flappybird 안쪽 파이프라인도 그렇습니다.enable body가 무슨 뜻이죠?어차피 추가할 거니까.연구 중이지? 헤헤.그리고 하나하나 닻점을 중점으로 설정한다.처음에 00시를 설정했기 때문에, 이것은 다른 엔진과 다르다.immovable 고정된 이동불가.쓴 거랑 안 쓴 거랑 차이가 있나...bounce.set (0) 점프할 수 있습니다.후후 그리고 마지막 플랫폼을 기록했다.
그리고 주인공을 다음과 같이 추가했습니다.

 this.santa = this.game.add.sprite(100, this.game.world.height - 200, 'santa-running');
                this.santa.animations.add('run');
                this.santa.animations.play('run', 15, true);
                this.santa.width = (493/5)*0.5;
                this.santa.height = 174*0.5;
                this.game.physics.arcade.enable(this.santa);
                this.santa.body.gravity.y = 1500;
                this.santa.body.collideWorldBounds = true;
                this.game.camera.follow(this.santa);

그리고 키보드 공백 응답 이벤트와 점수를 추가했습니다.점수가 너무 흐려.

this.cursors = this.game.input.keyboard.createCursorKeys();
                this.spacebar = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
                this.score = this.game.add.text(20, 20, '', {
                    font: '24px Arial',
                    fill: 'white'
                });

다음은 당연히 업데이트 함수죠.

update: function() {
                var that = this;
                if (!this.isGameOver) {
                    gameScore += 0.5;
                    this.gameSpeed += 0.03;
                    this.score.text = 'Score: ' + Math.floor(gameScore);
                    this.currentFrame++;
                    var moveAmount = this.gameSpeed / 100;
                    this.game.physics.arcade.collide(this.santa, this.platforms);
                    if (this.santa.body.bottom >= this.game.world.bounds.bottom) {
                        this.isGameOver = true;
                        this.endGame();
                    }
                    if (this.cursors.up.isDown && this.santa.body.touching.down || this.spacebar.isDown && this.santa.body.touching.down || this.game.input.mousePointer.isDown && this.santa.body.touching.down || this.game.input.pointer1.isDown && this.santa.body.touching.down) {
                        this.jumpSound = this.game.add.audio('hop');
                        this.jumpSound.play();
                        this.santa.body.velocity.y = -500;
                    }
                   this.platforms.children.forEach(function(platform) {
                        platform.body.position.x -= moveAmount;
                        if (platform.body.right <= 0) {
                            platform.kill();
                            var plat = that.platforms.getFirstExists(false);
                            plat.reset(that.lastPlatform.body.right + 192, that.game.world.height - Math.floor(Math.random() * 50) - 24);
                            plat.body.immovable = true;
                            that.lastPlatform = plat;
                        }
                    });
                }
            },

일단 게임 종료 표지판이false이고 소인이 바닥에 부딪혔다면게임 종료 호출this.endGame(); 키나 키보드를 누르면 수직으로 올라가는 속도를 줍니다.뒤에 모든 물체의 위치를 끊임없이 갱신하는 x는 규정된 속도를 더하는 거지.마지막으로reset은 화면을 떠난 물체입니다.다시 정의합니다.
그리고 하나 더.endGame();함수아래와 같다

endGame: function() {
                this.music.stop();
                this.music = this.game.add.audio('ho-ho-ho');
                this.music.play();
                this.game.state.start('gameOver');
            }

소리를 멈추고 호호를 추가하고 다시 켜세요.다음 장면으로 넘어갑니다.

gameOver: {
            create: function() {
                this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0);
                this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
                this.bg.autoScroll(-this.gameSpeed / 6, 0);
                this.score = this.game.add.text(this.game.world.width / 2 - 100, 200, 'Score: ' + Math.floor(gameScore), {
                    font: '42px Arial',
                    fill: 'white'
                });
                this.score.alpha = 0;
                this.game.add.tween(this.score).to({
                    alpha: 1
                }, 600, Phaser.Easing.Linear.None, true, 600);
                this.restartBtn = this.game.add.button(this.game.world.width / 2 - 103.5, 280, 'startbtn', this.restartClicked);
                this.restartBtn.alpha = 0;
                this.game.add.tween(this.restartBtn).to({
                    alpha: 1
                }, 600, Phaser.Easing.Linear.None, true, 1000);
            },
            restartClicked: function() {
                this.game.state.start('play');
            }
        }

아니면 배경 두 개를 추가하고, 점수를 추가하고, 버튼을 추가하여 사건을 준다.끝났어.