如何在 AS3 中创建和删除许多子对象而不会使 CPU 或 RAM 陷入困境

如何解决如何在 AS3 中创建和删除许多子对象而不会使 CPU 或 RAM 陷入困境

我正在为我正在设计的大富翁式游戏制作配套应用。我的目标是让所有属性都有一个 MovieClip,显示谁拥有它以及它升级了多少。实际上有数百个属性,每个属性都会使我的运行时间停滞大约一秒钟(我设置了一个 1 秒的计时器来查看运行需要多长时间)。

我有一个 MovieClip,它会根据我的需要“生成”每个属性。这个想法是,我有一个按钮,告诉这个 MC 转到第 10 帧,第 10 帧将具有为属性 10 添加子项的代码,然后该子项包含所有必要的代码。这个子产卵 MC 看起来像这样:

import flash.events.MouseEvent;
import flash.events.Event;

stop();
// I used a "fakeChild" as a placeholder to get something spawned in so that there is something to be removed
var fake_Child: fakeChild = new fakeChild(); 

var property_Pale15: propertyPale15 = new propertyPale15();
var property_Red15: propertyRed15 = new propertyRed15();

removeChildAt(1);
addChildAt(fake_Child,1);

并且给定属性的每个后续帧看起来像这样(本例中的属性是“Pale 15”)

removeChildAt(1);
addChildAt(property_Pale15,1);
property_Pale15.newData();
property_Pale15.propertyOwner();

我目前只有两个测试属性,每个属性都会使我的计时器延迟大约一秒钟,这非常糟糕。属性本身有大量代码,如下所示:

import flash.events.MouseEvent;
import flash.ui.Mouse;
import flash.events.Event;

stop();

var myPropertyData:SharedObject = SharedObject.getLocal("myLocalData");

var propertyName: String = ("Pale 15");
propertyDisplay.text = propertyName;

var propertyValue: int;

var propertyRent: int;
var activePlayer: int;
var currentRank: int;

loadData();

btnProperty.addEventListener(MouseEvent.CLICK,activateProperty);

function activateProperty(e:MouseEvent):void{

    propertyValue = MovieClip(root).valuePale15;    
    
    if(MovieClip(root).buyupgradeAction == true && loanedProperty.visible == false){
        buyupgradeProperty();
    }else if(MovieClip(root).paycostAction == true && bridgeProperty.visible == false && loanedProperty.visible == false){
        paycostProperty();
    }
}

function buyupgradeProperty(e:MouseEvent = null){
    
// Active Player (if Owner) Upgrades Property
    
    if(activePlayer == 1 && MovieClip(root).activePlayer == 1 && currentRank < 10){
        MovieClip(root).myLocalData.data.moneyDisplay1 -= propertyValue * 0.8;
        currentRank += 1;
        currentRankDisplay.text = currentRank;
        propertyRent = propertyValue * currentRank * currentRank * 0.1;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay1 + " upgraded " + propertyName + " to Rank " + currentRank + " for $" + propertyValue * 0.8 + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(activePlayer == 2 && MovieClip(root).activePlayer == 2 && currentRank < 10){
        MovieClip(root).myLocalData.data.moneyDisplay2 -= propertyValue * 0.8;
        currentRank += 1;
        currentRankDisplay.text = currentRank;
        propertyRent = propertyValue * currentRank * currentRank * 0.1;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay2 + " upgraded " + propertyName + " to Rank " + currentRank + " for $" + propertyValue * 0.8 + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(activePlayer == 3 && MovieClip(root).activePlayer == 3 && currentRank < 10){
        MovieClip(root).myLocalData.data.moneyDisplay3 -= propertyValue * 0.8;
        currentRank += 1;
        currentRankDisplay.text = currentRank;
        propertyRent = propertyValue * currentRank * currentRank * 0.1;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay3 + " upgraded " + propertyName + " to Rank " + currentRank + " for $" + propertyValue * 0.8 + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(activePlayer == 4 && MovieClip(root).activePlayer == 4 && currentRank < 10){
        MovieClip(root).myLocalData.data.moneyDisplay4 -= propertyValue * 0.8;
        currentRank += 1;
        currentRankDisplay.text = currentRank;
        propertyRent = propertyValue * currentRank * currentRank * 0.1;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay4 + " upgraded " + propertyName + " to Rank " + currentRank + " for $" + propertyValue * 0.8 + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }
    
// Active Player buys Property
    
    if(MovieClip(root).activePlayer == 1 && currentFrame == 1){
        MovieClip(root).myLocalData.data.moneyDisplay1 -= propertyValue;
        MovieClip(root).myLocalData.data.propertyDisplay1 += 1;
        gotoAndStop(2);
        MovieClip(root).stageProperties.propertyColor.color = (0xFF0000);
        colorChange();
        propertyRent = 0;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay1 + " purchased " + propertyName + " for $" + propertyValue + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 2 && currentFrame == 1){
        MovieClip(root).myLocalData.data.moneyDisplay2 -= propertyValue;
        MovieClip(root).myLocalData.data.propertyDisplay2 += 1;
        gotoAndStop(3);
        MovieClip(root).stageProperties.propertyColor.color = (0x0000FF);
        colorChange();
        propertyRent = 0;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay2 + " purchased " + propertyName + " for $" + propertyValue + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 3 && currentFrame == 1){
        MovieClip(root).myLocalData.data.moneyDisplay3 -= propertyValue;
        MovieClip(root).myLocalData.data.propertyDisplay3 += 1;
        gotoAndStop(4);
        MovieClip(root).stageProperties.propertyColor.color = (0x00FF00);
        colorChange();
        propertyRent = 0;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay3 + " purchased " + propertyName + " for $" + propertyValue + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 4 && currentFrame == 1){
        MovieClip(root).myLocalData.data.moneyDisplay4 -= propertyValue;
        MovieClip(root).myLocalData.data.propertyDisplay4 += 1;
        gotoAndStop(5);
        MovieClip(root).stageProperties.propertyColor.color = (0xFFFF00);
        colorChange();
        propertyRent = 0;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay4 + " purchased " + propertyName + " for $" + propertyValue + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }
    
    saveData();
}

function paycostProperty(e:MouseEvent = null){
    
    if(MovieClip(root).activePlayer == 1 && activePlayer == 2){
        MovieClip(root).myLocalData.data.moneyDisplay1 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay2 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay1 + " paid " + MovieClip(root).myLocalData.data.nameDisplay2 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 1 && activePlayer == 3){
        MovieClip(root).myLocalData.data.moneyDisplay1 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay3 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay1 + " paid " + MovieClip(root).myLocalData.data.nameDisplay3 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 1 && activePlayer == 4){
        MovieClip(root).myLocalData.data.moneyDisplay1 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay4 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay1 + " paid " + MovieClip(root).myLocalData.data.nameDisplay4 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 2 && activePlayer == 1){
        MovieClip(root).myLocalData.data.moneyDisplay2 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay1 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay2 + " paid " + MovieClip(root).myLocalData.data.nameDisplay1 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 2 && activePlayer == 3){
        MovieClip(root).myLocalData.data.moneyDisplay2 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay3 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay2 + " paid " + MovieClip(root).myLocalData.data.nameDisplay3 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 2 && activePlayer == 4){
        MovieClip(root).myLocalData.data.moneyDisplay2 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay4 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay2 + " paid " + MovieClip(root).myLocalData.data.nameDisplay4 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 3 && activePlayer == 1){
        MovieClip(root).myLocalData.data.moneyDisplay3 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay1 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay3 + " paid " + MovieClip(root).myLocalData.data.nameDisplay1 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 3 && activePlayer == 2){
        MovieClip(root).myLocalData.data.moneyDisplay3 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay2 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay3 + " paid " + MovieClip(root).myLocalData.data.nameDisplay2 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 3 && activePlayer == 4){
        MovieClip(root).myLocalData.data.moneyDisplay3 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay4 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay3 + " paid " + MovieClip(root).myLocalData.data.nameDisplay4 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 4 && activePlayer == 1){
        MovieClip(root).myLocalData.data.moneyDisplay4 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay1 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay4 + " paid " + MovieClip(root).myLocalData.data.nameDisplay1 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 4 && activePlayer == 2){
        MovieClip(root).myLocalData.data.moneyDisplay4 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay2 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay4 + " paid " + MovieClip(root).myLocalData.data.nameDisplay2 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }else if(MovieClip(root).activePlayer == 4 && activePlayer == 3){
        MovieClip(root).myLocalData.data.moneyDisplay4 -= propertyRent;
        MovieClip(root).myLocalData.data.moneyDisplay3 += propertyRent;
        MovieClip(root).transactionLog = (MovieClip(root).myLocalData.data.nameDisplay4 + " paid " + MovieClip(root).myLocalData.data.nameDisplay3 + " $" + propertyRent + " for landing on " + propertyName + " (" + MovieClip(root).Time_txt.text + ")")
        MovieClip(root).updateLogs();
    }
    
    saveData();
}

function saveData(e:MouseEvent = null){
    myPropertyData.data.Pale15Rent = propertyRent;
    myPropertyData.data.Pale15Rank = currentRank;
    myPropertyData.data.Pale15Frame = currentFrame;
    myPropertyData.data.Pale15Loan = loanedProperty.visible;
    myPropertyData.data.Pale15Bridge = bridgeProperty.visible;
    
    myPropertyData.flush();
}

function loadData(e:Event = null){
    propertyRent = myPropertyData.data.Pale15Rent;
    currentRank = myPropertyData.data.Pale15Rank;
    gotoAndStop(myPropertyData.data.Pale15Frame);
    loanedProperty.visible = myPropertyData.data.Pale15Loan;
    bridgeProperty.visible = myPropertyData.data.Pale15Bridge;
}

function newData(e:Event = null){
    if(MovieClip(root).gameSave == 1){
        myPropertyData.data.Pale15Rent = 0;
        myPropertyData.data.Pale15Rank = 0;
        myPropertyData.data.Pale15Frame = 1;
        myPropertyData.data.Pale15Loan = false;
        myPropertyData.data.Pale15Bridge = false;
        loadData();
    }
}

function propertyOwner(e:Event = null){
    if(activePlayer == 1){
        MovieClip(root).stageProperties.propertyColor.color = (0xFF0000);
        colorChange();
    }else if(activePlayer == 2){
        MovieClip(root).stageProperties.propertyColor.color = (0x0000FF);
        colorChange();
    }else if(activePlayer == 3){
        MovieClip(root).stageProperties.propertyColor.color = (0x00FF00);
        colorChange();
    }else if(activePlayer == 4){
        MovieClip(root).stageProperties.propertyColor.color = (0xFFFF00);
        colorChange();
    }
}

function colorChange (e:MouseEvent = null){
    MovieClip(root).stageProperties.Pale15.transform.colorTransform = MovieClip(root).stageProperties.propertyColor;
}

我尽量保持代码的通用性,以便我可以复制和粘贴其他属性。目前,此属性可以根据活动的按钮进行购买、升级和向适当的玩家发放租金,以及告诉“属性显示”根据谁拥有什么来更改板上的颜色。>

注:我用AS3很长时间了,但没有受过正规培训,都是自学。我曾多次尝试了解“父/子/私人班/等”是如何工作的,但我无法理解。我想知道是否有更好的方法来做我想做的事情。

解决方法

好的,让我写一些脚本来解释什么是OOP-thinking。另外,我强烈建议您阅读并理解 MVC pattern 的概念,因为下面的脚本代表 [M][C] ,而 [V] 并不是很重要,只要您清楚应用程序的架构,以后添加它也不会太困难。

首先,让我们定义游戏板单元,玩家可以经过或访问的地方。

package
{
    // A data [M]odel class.
    public class Place
    {
        // What do we call this place.
        public var title:String = "";
        
        // A guest list.
        public var visitors:Array = new Array;
        
        // The Person class will be defined later.
        
        public function visit(who:Person):void
        {
            // Add the guest to the list of visitors.
            visitors.push(who);
        }
        
        public function leave(who:Person):void
        {
            // Remove the visitor and remove its location record.
            var anIndex:int = visitors.indexOf(who);
            
            visitors.splice(anIndex,1);
        }
    }
}

Person 类,以便它能够访问和离开地点。

package
{
    // A data [M]odel class.
    public class Person
    {
        // Personal name.
        public var title:String = "";
        
        // A place of residence.
        public var stayingAt:Place;
    }
}

为了将它们粘合在一起,我们需要一些控制器来允许人们从一个地方移动到另一个地方。这个想法是NEVER直接寻址[M]对象PersonPlace,所以[ C] 下面的脚本可确保 始终正确离开和访问,不会停留超过 10 个地点

package
{
    // A [C]ontroller class.
    public class City
    {
        // City name.
        public var title:String = "";
        
        public function move(who:Person,where:Place):void
        {
            // Remove the guest from where it is currently staying.
            if (who.stayingAt)
            {
                who.stayingAt.leave(who);
                who.stayingAt = null;
            }
            
            where.visit(who);
            who.stayingAt = where;
        }
    }
}

现在,就垄断而言,建筑物是什么?它是一种地方,但具有更复杂的行为。那么一个玩家就是一个,他有钱,可以拥有建筑蚂蚁轮流做事。

package
{
    // A data [M]odel class.
    public class Player extends Person
    {
        public var money:int;
        
        public var color:uint;
        
        public var turnsToAct:int;
        
        // A list of owned buildings.
        public var owns:Array = new Array;
        
        // Charges money from the Player
        // then returns how much was actually charged.
        public function charge(value:int):int
        {
            var acharge:int = 0;

            if (value <= 0)
            {
                // You cannot charge non-positive sums.
            }
            else if (money - value < 0)
            {
                // Bankruptcy handling block.
                acharge = Math.max(0,money);
                turnsToAct = 1000000;
                money -= value;
            }
            else
            {
                acharge = value;
                money -= value;
            }
            
            return acharge;
        }
    }
}

所以,建筑就像......

package
{
    // A data [M]odel class.
    public class Building extends Place
    {
        public var owner:Player;
        public var color:uint;
        
        public var cost:int;
        public var rent:int;
        
        public function purchase(who:Player):void
        {
            who.charge(cost);
            
            owner = who;
            color = owner.color;
        }
        
        // Building can take rent from a visiting Player.
        // So,the "visit" method needs some additional behavior.
        override public function visit(who:Person):void
        {
            // Invoke previously defined visit logic.
            super.visit(who);
            
            // If the Building is not owned,there's no rent.
            // There's also no rent,if the owner visits.
            if (!owner || who == owner) return;
            
            // Person class does not have "charge" method. Read up "typecasting".
            
            // The following one line is actually that HORRIBLE block
            // of code named "paycostProperty" in your question.
            owner.money += (who as Player).charge(rent);
            // Seriously.
        }
    }
}

所以,还有一些事情要做(我越来越懒,不打算在这里编写整个大富翁的事情):

  • 设计City.init()方法,使其创建玩家的有序列表、地点的有序列表和构建并将所有玩家移动到第一个单元格。
  • 编写逻辑来控制回合和玩家的回合流程:掷骰子、移动、做出决定、完成回合。
  • 设计[V]组件以显示玩家的统计数据、位置建筑物所有可能的状态,城市,以可视化事物的整体状态。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-