一直以来都觉得typescript是以后前端发展的趋势,一些大厂的前端项目都已经在用ts来替代js了。

正好最近刚开始准备用pixi写个小游戏,因为刚开工没多久,于是今天就将之前的功能用ts去实现了一下,部分功能之前的博客也有提到过。

用的是vue-cli的3.11版本,并且选择了TypeScript,项目初始化后目录如下图所示(红框除外):

单个页面的代码截图如下:

有一点需要注意的是:

@component注解必须加上,无论你是当作路由页面使用还是当作组件使用,不然解析的时候就会有问题(至少生命周期函数不能如期执行),这也是我写的时候踩到的一个坑,其他的都还好,都比较容易上手。

interface.ts

这里定义了业务所需的interface和class,并且export;

到需要使用的页面:

import {task,tasklist,keyboard} from '../tsfile/interface'

这里用ts实现了之前的事件队列模式。

其余的就没什么好说的了,ts的用法和java十分类似,包括继承、构造器、类、接口、泛型等等。。。

哦,对了,这个项目也是直接托管到github的,有空就写一点,地址送上:https://github.com/ecojust/pixi_game

pixi小游戏开发(vue+typescript)的更多相关文章

  1. .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块

    .Net Core ORM选择之路,哪个才适合你   因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...

  2. Egret白鹭H5小游戏开发入门(二)

    前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...

  3. Egret白鹭H5小游戏开发入门(三)

    前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过 ...

  4. 一、微信小游戏开发 --- 初次在微信开发者工具里跑Egret小游戏项目

    尝试下Egret的小游戏开发,学习,学习,干IT,不学习,就得落后啊... 相关教程: Egret微信小游戏教程 微信公众平台-微信小游戏教程 微信公众平台-微信小游戏接入指南 开发版本: Egret ...

  5. Egret白鹭H5小游戏开发入门(一)

    前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...

  6. 【python游戏编程之旅】第九篇---嗷大喵快跑小游戏开发实例

    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 前几期博客我们一起学习了,pygame中的冲突检测技术以及一些常用的数据结构. 这次我们来一起做一个简单的酷 ...

  7. 【python游戏编程之旅】第五篇---嗷大喵爱吃鱼小游戏开发实例

    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 我们一同在前几期的博客中已经学到了很多pygame的基本知识了,现在该做个小游戏实战一下了. 前几期博客链接 ...

  8. 13、Cocos2dx 3.0三,找一个小游戏开发3.0中间Director :郝梦主,一统江湖

    重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27706967 游戏中的基本元素 在曾经文章中,我们具 ...

  9. 14、Cocos2dx 3.0三,找一个小游戏开发Scene and Layer:游戏梦想

    发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30474393 Scene :场景 了解了Director ...

随机推荐

  1. python 前置程序窗口,还原最小化的窗口

    python 前置程序窗口,还原最小化的窗口 在网上找了比较久,大多是: win32gui.FindWindow(class_name, window_name) win32gui.SetForegr ...

  2. zabbix内存溢出解决方法

    1406:20180802:183248.783 __mem_malloc: skipped 0 asked 48 skip_min 4294967295 skip_max 0 1406:201808 ...

  3. BZOJ 3772: 精神污染 (dfs序+树状数组)

    跟 BZOJ 4009: [HNOI2015]接水果一样- CODE #include <set> #include <queue> #include <cctype&g ...

  4. CSS网站收藏

    css3动画:http://isux.tencent.com/css3/tools.html

  5. Laravel 项目中事件控制的体会--综合应用 trait 多态

    1 我们想像有这样的需求 1.1 应用中有两个类.其一是 荣誉(Honour)其一是 档案(Archive)Honour 和 Arhcive 是多态关联.即拥有档案属性的不只荣誉类,还有更多的类去关联 ...

  6. more/less

    more less

  7. 【luoguP1797】 克鲁斯的加减法_NOI导刊2010提高(05)

    题目描述: 奶牛克鲁斯认为人类的加法算式太落后了.比如说有时候想要用加法计算+15*3,只能写成+15+15+15,真是浪费精力啊!于是,克鲁斯决定开发出一种新的加法算式.当然新的算式也是建立在原本算 ...

  8. Ubuntu 出现 Invalid operation update 或 Invalid operation upgrade的解决办法

    输入 sudo apt update && sudo apt full-upgrade

  9. 转:JMeter5的If Controller操作解析

    问题描述 在JMeter中添加了If Controller控制器,然后再控制器的表达式输入框中输入了预先构造的为“真”条件,执行Run发现结果树中并没有监控到执行的记录. 问题分析 在最新版JMete ...

  10. Java中final、finally、finalize

    简述 final 可以用来修饰类.方法.变量,分别有不同的意义: final 修饰的 class 代表不可以继承扩展: final 的变量是不可以修改的:final 的方法也是不可以重写的(overr ...