本文介紹了如何使用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會失效。