使用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运行效果如下:

相关推荐
魔云连洲17 分钟前
深入解析:Object.prototype.toString.call() 的工作原理与实战应用
前端·javascript·原型模式
JinSo26 分钟前
alien-signals 系列 —— 认识下一代响应式框架
前端·javascript·github
开心不就得了32 分钟前
Glup 和 Vite
前端·javascript
心疼你的一切2 小时前
使用Unity引擎开发Rokid主机应用的模型交互操作
游戏·ui·unity·c#·游戏引擎·交互
爱看书的小沐3 小时前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
井柏然4 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
aklry5 小时前
elpis之动态组件机制
javascript·vue.js·架构
井柏然5 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
xjf77116 小时前
Nx项目中使用Vitest对原生JS组件进行单元测试
javascript·单元测试·前端框架·nx·vitest·前端测试
Roadinforest6 小时前
水墨风鼠标效果实现
前端·javascript·vue.js