本文介绍了如何使用emscripten来将SDL程序编译成网页。
准备工作
什么是emscripten？
emscripten是一个用于WebAssembly的一套编译工具，基于LLVM。
WebAssembly(wasm)，即网页汇编，说白了，就是用在Web上的汇编语言。WebAssembly的优点是速度快，他可以将C/C++代码转换成wasm代码，所以能够提升不少效率。
不过我这里主要是为了将C++代码变成网页啦，不管效率。
安装emscripten
安装方法见官网
编写一个Demo
wasm的SDL和普通SDL的区别
编写wasm的SDL程序和平时的不太一样，我们需要在程序内部指定我们的游戏主循环，这样Web端才能帮我们更新游戏:
// 首先包含emscripten的头文件
#include "emscripten.h"
// 这是主循环的函数声明
void mainloop();
// 使用这个函数来设置主循环，这个循环是异步的
emscripten_set_main_loop(mainloop, -1, 1);
其中最主要的就是这两个函数：
void emscripten_set_main_loop_arg(em_callback_func func, void* arg, int fps, int simulate_infinite_loop);
void emscripten_set_main_loop(em_callback_func func, int fps, int simulate_infinite_loop);
看参数名字就知道他们是什么意思了。fps如果是负数，则使用浏览器的requestAnimationFrame机制来更新。simulate_infinite_loop总应当是1，以便于浏览器执行循环。
如果你要给mainloop传参，就用第一个函数，别忘了改变mainloop的声明：void mainloop(void* args);
每个程序只能有一个主循环。如果需要用其他的主循环，需要先将前面的关闭。
有关这个函数的详细说明，请看这里
Demo
Demo的文件在这里
编译的方式有两种，第一种是用emscripten自带的SDL：
em++ wasm_sdl_demo.cpp -s WASM=1 -s USE_SDL=2 -o index.html
注意输出的是html。USE_SDL=2代表要使用SDL2。
emscripten会自己去下载对应的SDL，如果你觉得太慢的话也可以将SDL的源码自己clone下来，然后看他docs/README-emscripten.md文件来自己手动编译成wasm所需的SDL。编译的过程还挺快的。
编译好的网页在这里Demo
将网页放到Hexo上
这里有个坑，但不是所有的主题都是这样：在发布页面的时候请静止Hexo渲染含有wasm的页面，不然wasm会失效。