webgl 迷宫项目开发总结

项目简介：

项目分为两个部分：

第一部分是一个迷宫Maze， 首先生成矩形cell数组，每个cell有4个side，然后一步一步地remove side（不包括迷宫边缘的side），直到全部的cell 都连通（connected）。然后在迷宫的左边缘创建一个入口，在右边缘创建一个出口。

整体网页需要接收2个参数：N和M， 迷宫的大小为N*M。

第二部分是交互操作Guide。在迷宫入口设置一个老鼠图片，然后可以通过左右键调整老鼠的朝向，方向键上来前进一步。

收获

webgl 三个js库

webgl-utils.js

webgl-debug.js

cuon-utils.js

图片加载

var img = new Image();

img.src = ‘./rat.png’;

img.onload = function(){

img_loaded = true;

}

图片应该最先加载。这样可以防止webgl在渲染的时候图片还没加载完而出现黑屏的问题。

监听键盘事件

保证事件代码只运行一次。否则会重复绑定多个事件，也就是按键一次会触发多次事件处理。

document.addEventListener(“keyup”,function (event) {

switch (event.keyCode)

渲染多个物体到同一个canvas

不能再用initShader方法了，而是需要创建多个program:

program= createProgram(gl, VSHADER_SOURCE, FSHADER_SOURCE)

program2= creat