Xeon_CC的博客

树枝开花小游戏

其中，ObservablePoint是使用很频繁的类，Point的位置一旦发生改变，触发回调changePointCallback。ObservablePoint也是IPoint的实现，所以新增的方法与Point一样。其中，Point.prototype.add = function(other: IPoint){setInterval是常用的定时器，每隔500毫秒执行一次函数，执行超过一定次数，结束定时器。在src/lib中，创建PointUtils.ts。就是往Point类中自己添加了add方法。

修改index.html文件，修改引用为AddChangeFunction.ts文件。在src目录下新建一个AddChangFunction.ts。在src/lib目录下新建一个RecUtils.ts文件。

在javascript中，Array有很多内置的功能，比如Array.map，Array.filter，Array.find等等，能用内置的功能就用内置的功能，最好不要自己实现一套，因为底层调用的可能压根就不是js语言本身，底层的实现可能由C/C++实现的。如果我们要做的一些功能，需要高性能密集计算，但是JavaScript内置函数无法满足我们要求的时候，这时候我们就要自己用C/C++编写一个程序，然后封装成.a静态库给JavaScript调用了。我这里导出了所有的函数，函数前面要加上下划线。

然后在index.html中，编辑代码，改成如下代码，现在我们引用CanvasAndStage.ts文件，而不要引用main.ts文件。基于前面写的代码，在gamelets的工程目录下新建一个CanvasAndStage.ts。随着浏览器缩放，黑色的画布会跟着缩放，容纳整个浏览器窗口。

Container是一个容器，如果多个组件放在一个容器中，如果容器的属性发生改变则，容器里面的子控件的属性都会发生改变。Graphics组件是用来绘制图形用的，比如线条，圆形，矩形等等。下部分各种组件基于这个公用代码直接往下添加代码即可。Sprite组件非常简单，就是显示一张图片。Text组件，非常简单，就是绘制文字。

基于第0讲和第1讲，我们增添了vite.config.ts文件。并配置了其他的http端口。然后在package.json中点击Debug，启动了localhost:7777。删除 conter.ts、typescript.svg。此时，我们删除掉没用的东西。

直接在项目根目录创建 vite.config.ts文件。

接下来选择框架为： Vanilla （表示不使用框架，原生JS）然后输入项目名，这里起名为gamelets（很多小游戏的意思）选择语言为：TypeScript。