WebAssembly Demo之Canvas中随机运动圆球

发布时间:2019-08-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了WebAssembly Demo之Canvas中随机运动圆球脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

作者:荒杯倾

1、Demo功能介绍

实现了一个球在800px * 600px画布内随机运动,固定时间间隔随机运动一次,运动方向由x和y轴组成的向量决定,这个向量是随机值(后面会称它为随机向量),从c语言代码中的随机函数获取,JS代码实现小球的画布渲染、越界纠正等工作。

Demo同时实现了纯JS(即不使用WebAsSEMbly)和WebAssembly两个版本,都在Demo地址中。

2、Demo地址

github仓库
查看演示1 :一个不显示轨迹的小球demo
查看演示2 :一个显示运动轨迹的小球demo
查看演示3:一个小球平移demo

3、Demo目录结构

因为demo比较简单,也没有什么js库依赖,所以本库的所有demo都是按照目录区分的(一个目录是一个demo,亿一共四个),而没有使用诸如src、doc、dist之类的结构。

canvasDemo-wasm1:C代码中未加随机时间种子的一种实现,因此每次刷新HTML页面实际上产生的是同一个随机序列,也就是说每次刷新页面后,若观察小球的运动轨迹,都是一样的不过因为没有随机时间种子,所以,不管JS setInerval设定的时间间隔多短暂,这一个随机序列的每个值都是新鲜随机出来的,即:与上一个随机值重复的概率仅等于随机范围分之一。因此,这种实现下,小球的运动轨迹在canvas内的分布更加的均匀。
canvasDemo-wasm2 :C代码中加了随机时间种子的一种实现,小球移动不均匀,因为随机种子的时间粒度比较粗,而随机运动的时间间隔远小于这个时间粒度,所以同一对随机值(矢量)会连续重复好几次,这就造成了小球某次运行实际上并不随机的效果。