WebAssembly Demo之Canvas中随机运动圆球

时飞发布于2019-08-22 11:11 / 2976人阅读

摘要：不过因为没有随机时间种子，所以，不管设定的时间间隔多短暂，这一个随机序列的每个值都是新鲜随机出来的，即与上一个随机值重复的概率仅等于随机范围分之一。

作者：云荒杯倾

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代码中加了随机时间种子的一种实现，小球移动不均匀，因为随机种子的时间粒度比较粗，而随机运动的时间间隔远小于这个时间粒度，所以同一对随机值（矢量）会连续重复好几次，这就造成了小球某次运行实际上并不随机的效果。

注:上面两种实现只有下面两句C代码的差别：
#include
srand(time(NULL))

再注：wasm1和wams2两个demo本质是一个。仅仅是因为C语言中的随机时间种子问题，多带带多写了一个。

canvasDemo-JS版本: 是canvasDemo-wasm1 demo的纯JS实现的版本。跟wasm没有关系。
translate-wasm:实现小球从左到右平移运动的demo，wasm实现，使用的wasm的API，没有用胶水代码。

4、canvasDemo-wasm1 Demo中主要函数介绍 C语言部分

有三个函数

函数名	参数	返回值	描述
Radom	int m,int n	int x	使用c语言的rand（）函数生成m和n之间的整数，以x返回。
randomInTwoSection	int m,int n	int x	给定一个随机区间，如果生成的随机值在左半边，则生成一个负的移动值，以x返回；反之，x返回正的移动值
randomGenerator	int xpos,int ypos,int radius	char* a	给定当前小球在画布内的位置：[xpos,ypos]和小球半径，生成下一次移动的向量，之所以有半径参数传入，是设定了一个规则，如果小球pos加减radius已经到达canvas边界，则下次移动，某个方向的随机值必须为负。比如已经到达左边界，则下次运动,X方向的随机数必须是正数，小球才会向右滚动，否则会出左边界。

JS部分

功能1：初始化canvas
功能2：run函数，内部是接受C代码传过来的随机向量，赋给canvas的ctx.arc()以画圆。
功能3：设定移动变换的时间间隔。

5、编译C代码过程解释

本demo使用的emscripten编译命令为：

emcc -o a.html a.c -Os -s WASM=1 --shell-file shell_minimal.html

执行完，会生成，一个a.HTML，一个a.wasm，一个a.js。
加上a.c和shell_minimal.html，共五个文件。所以第3节中的random和random2目录下都有这5个文件，为方便大家重复编译，还附加了1个使用的编译命令的文本文件。

说明：
（1）a.c，a.html中的a是举例，自己开发编译时请按实际的c文件名称和想要输出的html文件名；
（2）-Os是优化参数，生成的a.js是已经压缩过的，这是胶水代码，它里面有引用生成的a.wasm，有使用WebAssembly API，如WebAssembly.memory和WebAssembly.Table()等；不加就不压缩，js体积变大；
（3）shell_minimal.html是模板文件，7KB大小，有一些胶水代码，按官方说法，不建议自己写模板。关于到底使用什么开发模式，用asm?用wasm?用wasm的话用不用胶水代码？这几个问号分别对应什么编译命令？若想理清以上几个问题，请关注以下网址：https://kripken.github.io/ems...

注：为啥要写一下我demo中使用的编译命令呢？因为emcc的命令选项实在是太多了，稍微有点不一样，编译出来的wasm就不同，导致报错之类。

6、Demo使用或查看

直接运行canvasDemo-wasm1和canvasDemo-wasm1目录下的HTML文件应该不行，因为是ftp协议，fetch之类的函数会报错，建议git clone后到webstorm开发环境，这样直接运行html文件就可以了。

可以写个node server跑一下。
或者直接用http-server库。

云服务器超融合服务器 php中demo 圆球 webrtc 源码中的demo php输出随机中文字

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91935.html

WebAssembly和Emscripten工作整理

摘要：写在前面之前做过一段时间的的研究，写过几个，并且阅读并翻译了很多篇官方文档，今天对这些东西做一个总结。主要是以链接形式提供，并附上简短的说明。欢迎加入和技术交流群，群聊号码写在前面之前做过一段时间的WebAssembly的研究，写过几个WebAssembly Demo，并且阅读并翻译了很多篇Emscripten官方文档，今天对这些东西做一个总结。如果有需要对这块知识了解的同学，就可...

qieangel2013 2019-08-21 18:46 评论0 收藏0
一步步实现nest粒子特效

摘要：尝试实现画出一个弹射的小球很简单，那怎么用多个小球实现这样的效果呢。本文首发于我的博客，这是我的github，欢迎star。这篇博客是模仿nest.js实现一个demo，由简单到复杂，来一步步的实现它。这里是效果预览。我的github里边还有很多别的前端的demo，喜欢的话可以点个star，你的支持就是我的动力。从一道面试题开始实现一个半径10px的小球在500px*5...

ky0ncheng 2019-08-22 11:20 评论0 收藏0
装逼的最高境界---一行js代码完成一个简易版的贪吃蛇游戏

摘要：有些奇淫技巧玩好的话，就能提升自己的逼格，这不，一行代码实现一个贪吃蛇小游戏就成了装逼到了最高境界嘛代码如下当前浏览器不支持标签游戏结束我不是来装逼的。有些奇淫技巧玩好的话，就能提升自己的逼格，这不，一行js代码实现一个贪吃蛇小游戏就成了装逼到了最高境界嘛！代码如下: (function(){var s = [41,40],d = 1,f = 43,x,c = document.cr...

hidogs 2019-08-02 16:16 评论0 收藏0