使用pnpm、vite搭建Phaserjs的开发环境

首先,确保你已经安装了 Node.js 和 npm。然后按照以下步骤操作:

一、使用pnpm初始化一个新的 Vite 项目

bash 复制代码
pnpm create vite

输入名字

选择模板,这里我选择Vanilla,也可以选择其他的比如vue

选择语言

项目新建完成

二、安装相关依赖

进入项目,安装依赖

bash 复制代码
cd vite-phaserjs-demo01
pnpm install
pnpm add --save phaser

三、替换main.js文件内容

javascript 复制代码
import Phaser from 'phaser';

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

const game = new Phaser.Game(config);
var text;

var textStyle= { font: "48px Arial", fill: "#ff0044", align:"center" };
function preload () {
  //preload...
}

function create () {
  // 添加文本到场景中
  text = this.add.text(400, 300, 'Hello, Phaser!', {
    fontSize: '48px',
    color: '#ffffff',
    fontFamily: 'Arial'
  });
  console.log('text', text)
  //锚点设置
  // 设置文本锚点为中心
  text.setOrigin(0.5);
}

function update () {
  //update ...
}

最后输入pnpm run dev运行效果如下:

相关推荐
Miracle_G几秒前
每日一个知识点:几分钟学会页面拖拽分隔布局的实现
前端·javascript
薛定谔的算法5 分钟前
深入探索 ES6 中的 Map 数据结构
前端·javascript·算法
鹏多多6 分钟前
JS轻量级PNG处理利器UPNG.js的API解析和实战应用
前端·javascript·node.js
今禾8 分钟前
ES6变量声明革命:深入理解let、const与块级作用域
前端·javascript·面试
默默地离开9 分钟前
React当中受控组件与非受控组件的区别
前端·javascript·react.js
用户479492835691510 分钟前
面试官:console.log(`数组内容:${[1,2,3}`)结果是什么?
javascript
Xasxxs11 分钟前
【网络安全】XSS漏洞——PortSwigger靶场-DOM破坏
javascript·安全·web安全·xss
秋天的一阵风17 分钟前
前端截图方案实战:snapdom 与 html2canvas 的深度对比
前端·javascript·vue.js
中微子20 分钟前
ES6 异步编程深度解析:Generator 与 Async/Await 的演进之路
javascript
江城开朗的豌豆20 分钟前
useCallback:从性能焦虑到精准优化的轻松之路
前端·javascript·react.js