先来看游戏的最终效果：

3D网页版贪吃蛇游戏

下面来具体讲一下如何实现。

该游戏使用Hightopo的SDK制作，总共100多行代码，没有WebGL基础的同学们也可很快掌握。

场景初始化

首先，我们对页面进行初始化，包括初始化3D场景，设置地面网格，以及开启事件监听等。主要代码及注释如下：

  w = 40; // 网格间距m = 20; // 网格行列数d = w * m / 2;food = null;              dm = new ht.DataModel();            g3d = new ht.graph3d.Graph3dView(dm); // 初始化一个3d场景  // 配置网格             g3d.setGridVisible(true);g3d.setGridColor('#29B098');g3d.setGridSize(m);g3d.setGridGap(w);    // 将3D场景添加到body下面view = g3d.getView();            view.className = 'main';document.body.appendChild(view);   // 开启事件监听window.addEventListener('resize', function (e) {  g3d.invalidate(); }, false);                                                                                            g3d.sm().setSelectionMode('none');view.addEventListener(ht.Default.isTouchable ? 'touchstart' : 'mousedown', function(e){                if(isRunning){var p = g3d.getHitPosition(e); // 获取当前鼠标点击点在3D场景中的位置// 根据点击点x,z轴坐标，计算贪吃蛇前进方向if(Math.abs(p[0]) < d && Math.abs(p[2]) < d){if(direction === 'up' || direction === 'down'){direction = p[0] > snake[0].p3()[0] ? 'right' : 'left';                       }else if(direction === 'left' || direction === 'right'){direction = p[2] > snake[0].p3()[2] ? 'down' : 'up';                                             }                        }}else if(ht.Default.isDoubleClick(e)){start(); // 双击启动游戏}                }, false);                        start();            setInterval(function(){ if(isRunning){ isRunning = next(); } }, 200); // 每间隔200ms贪吃蛇往前走一步

创建食物

贪吃蛇每次吃完一个食物，其身体就会增长一段。此时需要创建新的食物并随机放到一个新的位置。创建食物时，其位置不能与上一个位置重合，也不能与当前贪吃蛇身体重复。

/*** 创建食物，并摆放到随机位置。* 食物不能放到贪吃蛇身上，也不能放到上一个食物的位置**/
function createFood(){var x = getRandom(), y = getRandom();// 确保新创建的食物不与贪吃蛇重叠，也不与上一个食物的位置重叠while(touchFood(x, y) || touchSnake(x, y)){ x = getRandom(); y = getRandom(); }if(food) dm.remove(food);            food = createNode(x, y); food.s({'shape3d': 'sphere',  'shape3d.color': 'red'});
}        
/*** x, y是否与snake身体重叠** @param {*} x* @param {*} y* @return {*} */
function touchSnake(x, y){for(var i=0; i

/*** 清空场景。创建贪吃蛇及四周围墙。**/
function start(){dm.clear(); snake = []; score = 0; direction = 'up'; isRunning = true;// 四周围墙shape = new ht.Shape();shape.setPoints(new ht.List([{x: -d, y: d},{x: d, y: d},{x: d, y: -d},{x: -d, y: -d},{x: -d, y: d}]));shape.setThickness(4);shape.setTall(w);shape.setElevation(w/2);shape.s({'all.color': 'rgba(20, 120, 120, 0.5)', 'all.transparent': true, 'all.reverse.cull': true});dm.add(shape);                 // 创建贪吃蛇的身体        for(var i=0; i

/*** 根据direction计算下一个位置。同时：* 1. 检测到达边界或接触自己身体，则游戏结束* 2. 如果吃到食物，则身体增加一段* 3. 继续往前走** @return {*} */
function next(){var node = snake[0], x = node.a('x'), y = node.a('y');if(direction === 'up') y--;if(direction === 'down') y++;       if(direction === 'left') x--;if(direction === 'right') x++;if(x < 0 || x >= m || y < 0 || y >= m || touchSnake(x, y)){ return false; }                        if(touchFood(x, y)){score++;                snake.splice(0, 0, createNode(x, y));                createFood();}else{snake.splice(0, 0, createNode(x, y));dm.remove(snake.pop());                }return true;
}