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

news2025/6/2 13:34:00

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

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

pnpm create vite

输入名字

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

选择语言

项目新建完成

二、安装相关依赖

进入项目,安装依赖

cd vite-phaserjs-demo01
pnpm install
pnpm add --save phaser

三、替换main.js文件内容

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2393723.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

intra-mart执行java方法笔记

一、前言 最近在用intra-mart,感觉官方文档不明不白的,很难搜。 想在intra-mart里执行java,找了半天,终于试出来了。 在此总结一下。 想看官网文档,这个是地址: https://document.intra-mart.jp/library…

在 Vue 2中使用 dhtmlxGantt 7.1.13组件,并解决使用时遇到的问题汇总.“dhtmlx-gantt“: “^7.1.13“,

一、最终实现的结果gif展示 二、开发步骤简介 1、vue中引用甘特图包dhtmlx-gantt // 可根据项目版本载入适配的版本 npm install dhtmlx-gantt7.1.132、vue文件中引入 <script> import { gantt } from dhtmlx-gantt/codebase/dhtmlxgantt.js import dhtmlx-gantt/code…

【C++高级主题】命令空间(三):未命名的命名空间

目录 一、未命名的命名空间的基本概念 1.1 定义与特点 1.2 基本语法 1.3 访问方式 1.4 未命名的命名空间的作用 二、未命名的命名空间与静态声明的比较 2.1 静态声明的作用 2.2 未命名的命名空间的优势 2.3 示例代码比较 2.4. 未命名的命名空间的作用域和链接属性 三…

VoltAgent 是一个开源 TypeScript 框架,用于构建和编排 AI 代理

​一、软件介绍 文末提供程序和源码下载 VoltAgent 是一个开源 TypeScript 框架&#xff0c;用于构建和编排 AI 代理 二、什么是 VoltAgent&#xff1f; AI 代理框架提供了构建由自主代理提供支持的应用程序所需的基础结构和工具。这些代理通常由大型语言模型 &#xff08;&am…

Unity 中实现首尾无限循环的 ListView

之前已经实现过&#xff1a; Unity 中实现可复用的 ListView-CSDN博客文章浏览阅读5.6k次&#xff0c;点赞2次&#xff0c;收藏27次。源码已放入我的 github&#xff0c;地址&#xff1a;Unity-ListView前言实现一个列表组件&#xff0c;表现方面最核心的部分就是重写布局&…

mongodb集群之副本集

目录 1. 适用场景备份高可用性 2. 集群搭建如何搭建资源规划根据资源完成各节点conf文件的配置启动各个mongodb节点初始化集群信息 搭建实例Linux搭建实例&#xff08;待定&#xff09;Windows搭建实例 3. 副本集基础操作4.集群平滑升级 1. 适用场景 备份 1&#xff09;服务器…

基于微服务架构的社交学习平台WEB系统的设计与实现

设计&#xff08;论文&#xff09;题目 基于微服务架构的社交学习平台WEB系统的设计与实现 摘 要 社交学习平台 web 系统要为学习者打造一个开放、互动且社交性强的在线教育环境&#xff0c;打算采用微服务架构来设计并实现一个社交学习平台 web 系统&#xff0c;以此适应学…

放假带出门的充电宝买哪种好用耐用?倍思超能充35W了解一下!

端午节的到来和毕业季的临近&#xff0c;让很多人开始计划出游或长途旅行。而在旅途中&#xff0c;一款好用耐用的充电宝可以省不少事。今天&#xff0c;我们就来聊聊放假带出门的充电宝买哪种好用耐用&#xff0c;看看为什么倍思超能充35W更适合带出门~ 一、为什么需要一款好用…

AI智能体策略FunctionCalling和ReAct有什么区别?

Dify 内置了两种 Agent 策略&#xff1a;Function Calling 和 ReAct&#xff0c;但二者有什么区别呢&#xff1f;在使用时又该如何选择呢&#xff1f;接下来我们一起来看。 1.Function Calling Function Call 会通过将用户指令映射到预定义函数或工具&#xff0c;LLM 先识别用…

改进自己的图片 app

1. 起因&#xff0c; 目的: 前面我写过一个图片 app &#xff0c; 最新做了些改动。 把原来的一列&#xff0c;改为3列&#xff0c; 继续使用瀑布流手机上使用&#xff0c;更流畅&#xff0c;横屏显示为2列。 2. 先看效果 3. 过程: 过程太细碎了&#xff0c;这里只是做一下…

Uniapp+UView+Uni-star打包小程序极简方案

一、减少主包体积 主包污染源&#xff08;全局文件依赖&#xff09;劲量独立导入 componentsstaticmain.jsApp.vueuni.css 分包配置缺陷&#xff0c;未配置manifest.json中mp-weixin节点 "usingComponents" : true,"lazyCodeLoading" : "requiredC…

算法题(159):快速幂

审题&#xff1a; 本题需要我们计算出(a^b)%c的值&#xff0c;并按照规定格式输出 思路&#xff1a; 方法一&#xff1a;暴力解法 我们直接循环b次计算出a^b,然后再取余c&#xff0c;从而得出最终结果 时间上&#xff1a;会进行2^31次&#xff0c;他的数量级非常大&#xff0c;…

【新品发布】嵌入式人工智能实验箱EDU-AIoT ELF 2正式发布

在万物互联的智能化时代&#xff0c;将AI算法深度植入硬件终端的技术&#xff0c;正悄然改变着工业物联网、智慧交通、智慧医疗等领域的创新边界。为了助力嵌入式人工智能在教育领域实现高质量发展&#xff0c;飞凌嵌入式旗下教育品牌ElfBoard&#xff0c;特别推出嵌入式人工智…

基于javaweb的SpringBoot体检管理系统设计与实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…

IPD的基础理论与框架——(四)矩阵型组织:打破部门壁垒,构建高效协同的底层

在传统的组织架构中&#xff0c;企业多采用直线职能制&#xff0c;就像一座等级森严的金字塔&#xff0c;信息沿着垂直的层级传递&#xff0c;员工被划分到各个职能部门。这种架构职责清晰、分工明确&#xff0c;在稳定的市场环境中&#xff0c;能让企业高效运作&#xff0c;发…

小程序为什么要安装SSL安全证书

小程序需要部署SSL安全证书&#xff0c;这是小程序开发及运营的强制性要求&#xff0c;也是保障用户数据安全、提升用户体验和满足平台规范的必要措施。 一、平台强制要求 微信小程序官方规范 微信小程序明确要求所有网络请求必须通过HTTPS协议传输&#xff0c;服务器域名需配…

python打卡训练营打卡记录day40

知识点回顾&#xff1a; 彩色和灰度图片测试和训练的规范写法&#xff1a;封装在函数中展平操作&#xff1a;除第一个维度batchsize外全部展平dropout操作&#xff1a;训练阶段随机丢弃神经元&#xff0c;测试阶段eval模式关闭dropout 作业&#xff1a;仔细学习下测试和训练代码…

【清晰教程】利用Git工具将本地项目push上传至GitHub仓库中

Git 是一个分布式版本控制系统&#xff0c;由 Linus Torvalds 创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。GitHub 是一个基于 Git 的代码托管平台&#xff0c;提供了额外的协作和社交功能&#xff0c;使项目管理更加高效。它们为项目代码管理、团队协作和持…

20250529-C#知识:静态类、静态构造函数和拓展方法

C#知识&#xff1a;静态类、静态构造函数和拓展方法 静态类一般用来编写工具类 1、静态类 用static关键字修饰的类一般充当工具类只能包含静态成员,不能包含静态索引器不能被实例化静态方法只能使用静态成员非静态方法既可以使用非静态成员&#xff0c;也可以使用静态成员 sta…

实验设计与分析(第6版,Montgomery)第4章随机化区组,拉丁方, 及有关设计4.5节思考题4.18~4.19 R语言解题

本文是实验设计与分析&#xff08;第6版&#xff0c;Montgomery著&#xff0c;傅珏生译) 第章随机化区组&#xff0c;拉丁方&#xff0c; 及有关设计4.5节思考题4.18~4.19 R语言解题。主要涉及方差分析&#xff0c;拉丁方。 batch <- c(rep("batch1",5), rep(&quo…