字节跳动小游戏开发 自学总结

准备

• 微信小程序开发文档 官网
  由于字节跳动小程序很类似微信小程序，但是文档的详细程度却差一些，所以需要微信小程序开发文档做对照
• MDN文档 官网
  详实查看各种属性，很是方便

笔记

0.canvas绘制的本质是，开启循环定制器以60帧（1000/60）为基准，清屏与重绘，在这个绘制定制器外面；
做其他的操作亦或是别的定时器，来修改数据，而所有的数据都作为变量，放到上述绘制定时器中；
以实现数据画面实时更新

但是，真机必须要走load才可以绘制；仅针对绘制图片（drawImage）这块，目前这个方式在小程序上就是一片闪光，因为每次onload，它是真的去加载，即便是这个图片已经onload闪现过了，（目前卡住了，无法继续开发）

另一个是，drawImage需要按照顺序来绘制，已达到预期层级覆盖（其实是像素点的更替）目的，无法控制图片onload的节奏，就无法控制绘制顺序.....不知道怎么继续了~~~~~~~~~？？？？？？？？？？？

1.new Path2D() 链接
不支持 clip、lineDashOffset、isPointInPath、isPointInStroke

因此对canvas中图形添加事件，还是要靠坐标去卡

2.布局最好用屏幕百分比，而非具体像素，否则在适配不同机型时候，判断区域可能会和你的预期不同

3.绘制一个场景，过多图片情况下，需要考虑图片加载时间不同的情况，
否则先加载完的，先绘制进画布；考虑到canvas绘制图案后面覆盖前面的情况，可能加载顺序会与绘制结果的预期不同
所以要都加载完毕，再按照心里预期去绘制

4.svg绘制在canvas是静止状态的，没有动画
小游戏限制了可以上传的文件类型

5.字体水平垂直居中；
宽度居中1：字体宽度可以获取

var textObj = ctx.measureText("游戏加载中，请稍后...");
console.log(textObj.width)  //获取文字的宽度
ctx.font = "14px serif";  //文字高度为字体大小

宽度居中2：

ctx.setTextAlign('center');

垂直居中1：

ctx.setTextBaseline('middle')

5-2.设置字体的样式（粗细，字体样式 等） 详细属性
ctx.font="italic small-caps bold 12px arial";

6.小游戏尽量多用图片精灵
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
裁切系 ( 宽度以放大缩放之前的尺寸为准 )
sx, sy, sWidth, sHeight
定位系
dx, dy, dWidth, dHeight

7.开发者工具支持图片预加载，但是真机不支持预加载，即便是加载了，但是绘制时候，也需要实时load一次

开发规范

1.目录结构
game.js => 小游戏入口文件
game.json => 小游戏配置文件
project.config.json => 工程配置文件

......占位，填坑........