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

相关推荐
万少12 分钟前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
Moonbit2 小时前
MoonBit Pearls Vol.13:初探 MoonBit 中的 JavaScript 交互
javascript·后端
我家媳妇儿萌哒哒2 小时前
Vue2 elementUI年份区间选择组件
前端·javascript·elementui
山塘小鱼儿2 小时前
JavaScript 性能优化实战大纲
javascript
asfdsfgas2 小时前
Angular CDK 响应式工具实操指南:自适应布局构建技巧
javascript·ecmascript·angular.js
东方石匠3 小时前
Javascript常见面试题
前端·javascript·面试
性野喜悲3 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
敲敲了个代码4 小时前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web
change_fate4 小时前
vue3 懒加载第三方组件
javascript·vue.js·ecmascript
扎瓦斯柯瑞迫4 小时前
Cursor 提示"Too Many Accounts"?一行命令重置机器码
前端·javascript·后端