如何使用javascript制作一个网页端3D贪吃蛇游戏（附源码及链接） |
您所在的位置：网站首页 › 贪吃蛇网页版代码 › 如何使用javascript制作一个网页端3D贪吃蛇游戏（附源码及链接） |
|
先来看游戏的最终效果： 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= 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; }到这里，整个贪吃蛇游戏就完成了。双击场景即可启动游戏。点击场景可改变贪吃蛇运动方向。 对于懒得动代码的同学们，也可以点击下面链接直接体验该游戏： 3D网页版贪吃蛇游戏 网页打开后，源码可以直接通过F12获取 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |