一直以来都觉得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. bzoj1458: 士兵占领(最大流)

    题目描述 有一个M * N的棋盘,有的格子是障碍.现在你要选择一些格子来放置一些士兵,一个格子里最多可以放置一个士兵,障碍格里不能放置士兵.我们称这些士兵占领了整个棋盘当满足第i行至少放置了Li个士兵 ...

  2. javascript---查找节点

    快捷键: chazhaojiedian(查找节点)     chuangjianjiedian(创建节点) 使用childNodes childElementCount//=====以下是第一种操作D ...

  3. POJ1423 Big Number 暴力or斯特林公式??

    好吧这题很水...可是我没想到正解... 题意:求n!有多少位. 正解:斯特林公式. 直接放代码... #include<cstdio> #include<iostream> ...

  4. TTTTTTTTTTTT Gym 100818B Tree of Almost Clean Money 树连剖分+BIT 模板题

    Problem B Tree of Almost Clean Money Input File: B.in Output File: standard output Time Limit: 4 sec ...

  5. bbs--点赞

    bbs---点赞 需求分析 页面展示 1 点赞  和   踩灭  按钮展示 1 用户未登录,不处理点赞踩灭,给用户提供登录接口 2 登录 1 第一次点点赞/踩灭 1 点赞成功 数据+1 提示点赞成功 ...

  6. 集合家族——Vector

    一.vector简介 Vector 可以实现可增长的对象数组.与数组一样,它包含可以使用整数索引进行访问的组件.不过,Vector 的大小是可以增加或者减小的,以便适应创建 Vector 后进行添加或 ...

  7. Flask-Response

    Flask中的HTTPResponse from flask import Flask,redirect app = Flask(__name__) @app.route("/index&q ...

  8. 去除ZERO WIDTH SPACE 零宽字符: 看不见却占位置的字符

    ZERO WIDTH SPACE 由于历史原因,编码方案中保留着该类编码 解决方案 1. 替换 ```js str.replace(/[\u200B-\u200D\uFEFF]/g, ''); ``` ...

  9. Java中基本数据类型

    在数据类型中,最常用也是最基础的数据类型,被称作基本数据类型.可以使用这些类型的值来代表一些简单的状态. Java 语言的基本数据类型总共有以下8 种,下面是按照用途划分出的4 个类别: 定点类型: ...

  10. 项目中遇到的关于Java的问题

    1.Collections对List集合中的数据进行排序 http://blog.csdn.net/veryisjava/article/details/51675036 2.Java随机数 http ...