pixi小游戏开发(vue+typescript)
一直以来都觉得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)的更多相关文章
- .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
.Net Core ORM选择之路,哪个才适合你 因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...
- Egret白鹭H5小游戏开发入门(二)
前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...
- Egret白鹭H5小游戏开发入门(三)
前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过 ...
- 一、微信小游戏开发 --- 初次在微信开发者工具里跑Egret小游戏项目
尝试下Egret的小游戏开发,学习,学习,干IT,不学习,就得落后啊... 相关教程: Egret微信小游戏教程 微信公众平台-微信小游戏教程 微信公众平台-微信小游戏接入指南 开发版本: Egret ...
- Egret白鹭H5小游戏开发入门(一)
前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...
- 【python游戏编程之旅】第九篇---嗷大喵快跑小游戏开发实例
本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 前几期博客我们一起学习了,pygame中的冲突检测技术以及一些常用的数据结构. 这次我们来一起做一个简单的酷 ...
- 【python游戏编程之旅】第五篇---嗷大喵爱吃鱼小游戏开发实例
本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 我们一同在前几期的博客中已经学到了很多pygame的基本知识了,现在该做个小游戏实战一下了. 前几期博客链接 ...
- 13、Cocos2dx 3.0三,找一个小游戏开发3.0中间Director :郝梦主,一统江湖
重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27706967 游戏中的基本元素 在曾经文章中,我们具 ...
- 14、Cocos2dx 3.0三,找一个小游戏开发Scene and Layer:游戏梦想
发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30474393 Scene :场景 了解了Director ...
随机推荐
- Python3+Appium学习笔记03-启动app
这个是appium相关的官方api地址:http://appium.io/docs/en/about-appium/api/ 如同selenium进行自动化测试时,需要先创建一个浏览器实例一样.在使用 ...
- Linux之df磁盘信息
df命令用于查看磁盘的分区,磁盘已使用的空间,剩余的空间 1.用法 df [选项] [文件..] 2.命令选项 -a,--all 全部文件系统-h,--human-readable 以以合适的单位来显 ...
- ubuntu18系统 Qt Error BadAccess
现象:在ubuntu18中报错 X Error: BadAccess (attempt to access private resource denied) 10 Extension: 130 ...
- string::capacity string::size string::length string::max_size
size_t capacity() const noexcept; #include <iostream>#include <string> using namespace s ...
- hdu4786 Fibonacci Tree[最小生成树]【结论题】
一道结论题:如果最小生成树和最大生成树之间存在fib数,成立.不存在或者不连通则不成立.由于是01图,所以这个区间内的任何生成树都存在. 证明:数学归纳?如果一棵树没有办法再用非树边0边替代1边了,那 ...
- docker: Error response from daemon: invalid mount config for type "bind": bind source path does not exist: /tmp/tfserving/
注意要是当前的完整路径 pwd查看到完整路径,再加入到source里面即可
- 题解 [51nod1461] 稳定桌
题面 解析 一开始看上去毫无思路啊. 但想通了就很很简单. 我们枚举每种长度的边作为最大的边, 于是长度比当前大的边就要砍掉, 而长度比当前小的边只能留下小于等于当前长度的边数, 砍掉代价最小的几条就 ...
- Luogu P1092 虫食算 爆搜
心路历程:震惊,我竟然得了$90$分!!...康康数据...奥..(忽然有了邪恶的卡数据的想法) 于是把$for(int \space i=0;i<n;++i)$改成了$for(int \spa ...
- luogu 2982 [USACO10FEB]慢下来Slowing down dfs序+树状数组
将要查询的信息放到 dfs 序上并用树状数组查一个前缀和即可. #include <bits/stdc++.h> #define N 100004 #define setIO(s) fre ...
- Linux操作大全
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...