3D web version of Snake game! Let’s talk about how to implement it in detail.
The game is made using Hightopo's SDK, with a total of more than 100 lines of code. Students without WebGL knowledge can quickly master it.
Scene initialization
First, we initialize the page, including initializing the 3D scene, setting the ground grid, and turning on event listening. The main code and comments are as follows:
Create food
Every time a greedy snake eats a piece of food, its body will grow. At this point, new food needs to be created and randomly placed in a new location. When creating food, its position cannot coincide with the previous position, nor can it overlap with the current snake body.
/**
* 创建食物，并摆放到随机位置。
* 食物不能放到贪吃蛇身上，也不能放到上一个食物的位置
*
*/
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<snake.length; i++){
if(snake[i].a('x') === x && snake[i].a('y') === y){ return true; }
}
return false;
}
/**
* x, y是否与食物身体重叠
*
* @param {*} x
* @param {*} y
* @return {*}
*/
function touchFood(x, y){
return food && food.a('x') === x && food.a('y') === y;
}
function getRandom(){
return parseInt(Math.random() * m);
}
/**
* 创建一个节点，调整其位置和大小
*
* @param {*} x
* @param {*} y
* @return {*}
*/
function createNode(x, y){
var node = new ht.Node();
node.a({ x: x, y: y });
node.s3(w*0.9, w*0.9, w*0.9);
node.p3(-w*m/2+w*x+w/2, w/2, -w*m/2+w*y+w/2);
dm.add(node);
return node;
}Create the snake and its surrounding walls
In the first step of initialization, we set the grid size and spacing. This also determines the length and width of the entire grid and the size of each block of the snake. In this step, we add boundaries to the mesh and generate the snake.
/**
* 清空场景。创建贪吃蛇及四周围墙。
*
*/
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<m/2; i++) { snake.push(createNode(m/2 + i, m/2)); }
createFood();
}Dealing with snake walking logic
After having the snake and food, the next step is to deal with the snake's walking logic. include:
* 1. If it detects reaching the boundary or touching your own body, the game will end.
* 2. If you eat food, your body will grow by one segment
* 3. Otherwise, keep moving forward
/**
* Calculate the next position based on direction. at the same time:
* 1. If it detects reaching the boundary or touching your own body, the game will end.
* 2. If you eat food, your body will grow by one segment
* 3. Keep moving forward
*
* @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;
}At this point, the entire Snake game is complete. Double-click the scene to start the game. Click on the scene to change the direction of the snake's movement.