phraser初始游戏入门

<template>
    <div ref="gameContainer"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import Phaser from 'phaser';

const gameContainer = ref(null);
const getData = () => {
    //配置
    const gameConfig = {
        type: Phaser.AUTO,
        parent: gameContainer.value,
        width: 800,
        height: 600,
        //物理引擎
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 300 },
                debug: false
            }
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };
    const game = new Phaser.Game(gameConfig);
    //设置变量，玩家，星星，炸弹，键盘控制器,分，显示分
    let player, stars,bombs,cursors,score = 0,scoreText;

    //加载资源
    function preload() {
        //加载图片
        this.load.image('sky', 'img/sky.png');
        this.load.image('ground', 'img/ground.png');
        this.load.image('star', 'img/star.png');
        this.load.image('bomb', 'img/bomb.png');
        //加载精灵图
        this.load.spritesheet('dude', 'img/dude.png', { frameWidth: 32, frameHeight: 48 });
    }
    //生成函数
    function create() {
        //生成天空
        this.add.image(400, 300, 'sky');
        //平台
        let platforms;
        //生成静态组
        platforms = this.physics.add.staticGroup();
        platforms.create(400, 568, 'ground').setScale(2).refreshBody();
        platforms.create(600, 400, 'ground');
        platforms.create(50, 250, 'ground');
        platforms.create(750, 220, 'ground');
        //精灵
        player = this.physics.add.sprite(300, 400, 'dude');  //生成动态组
        player.setBounce(0.2);  //设置反弹值
        player.setCollideWorldBounds(true);  //设置无法弹出边框

        //添加精灵动画
        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
            frameRate: 10,  //需要每秒10帧
            repeat: -1  //循环播放
        });
        this.anims.create({
            key: 'turn',
            frames: [{ key: 'dude', frame: 4 }],
            frameRate: 20
        });
        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
            frameRate: 10,
            repeat: -1
        });
        //添加星星
        stars = this.physics.add.group({
            key: 'star',
            repeat: 11,
            setXY: { x: 12, y: 0, stepX: 70 }
        });
        //iterate迭代函数
        stars.children.iterate(function(child) {
            child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
        });
        //添加碰撞器
        this.physics.add.collider(player, platforms);
        this.physics.add.collider(stars, platforms);
        cursors = this.input.keyboard.createCursorKeys();
        //检测玩家是否与星星重叠
        this.physics.add.overlap(player, stars, collectStar, null, this);
        //重叠事件
        function collectStar(player, star) {
            star.disableBody(true, true);
            score += 10;
            scoreText.setText('Score: ' + score);
            //测试星星是否存活
            if (stars.countActive(true) === 0)
            {
                stars.children.iterate(function (child) {
                    child.enableBody(true, child.x, 0, true, true);
                });
                const x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);
                const bomb = bombs.create(x, 16, 'bomb');
                bomb.setBounce(1);
                bomb.setCollideWorldBounds(true);
                bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);

            }
        }
        // 生成文字
        scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
        //生成炸弹组
        bombs = this.physics.add.group();
        this.physics.add.collider(bombs, platforms);
        //玩家和炸弹碰撞
        this.physics.add.collider(player, bombs, hitBomb, null, this);
        function hitBomb (player,bombs)
        {
            this.physics.pause();
            player.setTint('0xF00');
            player.anims.play('turn');

        }
    }
    function update() {
        //添加键盘事件

        //监听事件
        if (cursors.left.isDown) {
            player.setVelocityX(-160);
            player.anims.play('left', true);
        } else if (cursors.right.isDown) {
            player.setVelocityX(160);
            player.anims.play('right', true);
        } else {
            player.setVelocityX(0);
            player.anims.play('turn');
        }
        if (cursors.up.isDown && player.body.touching.down) {
            player.setVelocityY(-380);
        }
    }
};
onMounted(() => {
    getData();
});
</script>
<style>
div {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>