2024年最全Web前端---HTML+CSS+JS实现的贪吃蛇游戏，大厂架构师经验分享

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• 

this.tail = null; //存一个蛇尾的信息

this.pos = []; //存储蛇身上的每一个方块的位置

this.directionNum = { //存储蛇走的方向，用一个对象来表示

left: {

x: -1,

y: 0,

rotate: 180 //蛇头在不同的方向中应该进行旋转，要不始终是向右

},

right: {

x: 1,

y: 0,

rotate: 0

},

up: {

x: 0,

y: -1,

rotate: -90

},

down: {

x: 0,

y: 1,

rotate: 90

},

}

}

Snake.prototype.init = function() {

//创建蛇头

var snakeHead = new square(2, 0, “snakeHead”);

snakeHead.create();

this.head = snakeHead; //存储蛇头信息

this.pos.push([2, 0]) //把蛇头的位置存起来

//创建蛇身体1

var snakebody1 = new square(1, 0, “snakeBody”);

snakebody1.create();

this.pos.push([1, 0]); //把蛇身的位置存起来

//创建蛇身体2

var snakebody2 = new square(0, 0, “snakeBody”);

snakebody2.create();

this.tail = snakebody2; //把蛇尾的信息存起来

this.pos.push([0, 0]); //把蛇身的位置存起来

//形成链表关系

snakeHead.last = null;

snakeHead.next = snakebody1;

snakebody1.last = snakeHead;

snakebody1.next = snakebody2;

snakebody2.last = snakebody1;

snakebody2.next = null;

//给蛇添加一条属性，用来表示蛇走的方向

this.direction = this.directionNum.right; //默认让蛇往右走

}

//这个方法用来获取蛇头的下一个位置对应的元素，要根据素材做不同的事情

Snake.prototype.getNextPos = function() {

var nextPos = [ //蛇头要走的下一个点的坐标

this.head.x / sw + this.direction.x,

this.head.y / sh + this.direction.y

]

//下个点是自己，代表撞到了自己，游戏结束

var selfCollied = false;

this.pos.forEach(function(value) {

if (value[0] == nextPos[0] && value[1] == nextPos[1]) {

//如果数组中的两个数组都相等，就说明下一个点在蛇身上里面能找到，代表捡到自己了

selfCollied = true;

}

})

if (selfCollied) {

console.log(“撞到自己了！”);

this.strategies.die.call(this);

return;

}

//下个点是围墙，游戏结束

if (nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) {

console.log(“撞墙了！”);

this.strategies.die.call(this);

return;

}

//下个点是食物，吃

if (food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) {

//如果这个条件成立说明现在蛇头要走的的下一个点是食物的那个点

console.log("撞到食物了！ ");

this.strategies.eat.call(this);

return;

}

//下个点什么都不是，走

this.strategies.move.call(this);

}

//处理碰撞后要做的事

Snake.prototype.strategies = {

move: function(format) { //这个参数用于决定要不要删除最后一个方块（蛇尾）。当传了这个参数后就表示要做的事情是吃

//创建新身体（在旧蛇头的位置）

var newBody = new square(this.head.x / sw, this.head.y / sh, “snakeBody”);

//更新链表的关系

newBody.next = this.head.next;

newBody.next.last = newBody;

newBody.last = null;

this.head.remove(); //把旧蛇头原来的位置删除

newBody.create();

//创建一个新蛇头（蛇头下一个要走到的点nexpos）

var newHead = new square(this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y, “snakeHead”);

//更新链表的关系

newHead.next = newBody;

newHead.last = null;

newBody.last = newHead;

newHead.viewContent.style.transform = “rotate(” + this.direction.rotate + “deg)”

newHead.create();

//蛇身上的每一个方块的坐标也要更新

this.pos.splice(0, 0, [this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y, ]);

this.head = newHead; //还要把this.head的信息更新一下

if (!format) { //如果format的值为lafse，表示需要删除（除了吃之外的操作）

this.tail.remove();

this.tail = this.tail.last;

this.pos.pop();

}

},

eat: function() {

this.strategies.move.call(this, true);

createFood();

game.score++;

},

die: function() {

game.over();

}

}

snake = new Snake();

//创建食物

function createFood() {

//食物小方块的随机坐标

var x = null;

var y = null;

var include = true; //循环跳出的条件，true表示食物的坐标在蛇身上（需要继续循环）。false表示食物的坐标不在蛇身上（不循环了）

while (include) {

x = Math.round(Math.random() * (td - 1));

y = Math.round(Math.random() * (tr - 1));

snake.pos.forEach(function(value) {

if (x != value[0] && y != value[1]) {

//这个条件成立说明现在随机出来的这个坐标，在蛇身上并没有找到。

include = false;

}

})

}

//生成食物

food = new square(x, y, “food”);

food.pos = [x, y]; //存储一下食物生成的坐标，用于跟蛇头要走的下一个点做对比

var foodDom = document.querySelector(‘.food’);

if (foodDom) {

foodDom.style.left = x * sw + “px”;

foodDom.style.top = y * sh + “px”;

} else {

food.create();

}

}

//创建游戏逻辑

function Game() {

this.timer = null;

this.score = 0;

}

Game.prototype.init = function() {

snake.init();

// snake.getNextPos();

createFood();

document.onkeydown = function(ev) {

if (ev.which == 37 && snake.direction != snake.directionNum.right) { //用户按下左键的时候，这条蛇不能是正下往右走

snake.direction = snake.directionNum.left;

} else if (ev.which == 38 && snake.direction != snake.directionNum.down) {

snake.direction = snake.directionNum.up;

} else if (ev.which == 39 && snake.direction != snake.directionNum.left) {

snake.direction = snake.directionNum.right;

} else if (ev.which == 40 && snake.direction != snake.directionNum.up) {

snake.direction = snake.directionNum.down;

}

}

this.start();

}

Game.prototype.start = function() { //开始游戏

this.timer = setInterval(function() {

snake.getNextPos();

}, 200);

}

Game.prototype.pause = function() {

clearInterval(this.timer);

}

Game.prototype.over = function() {

clearInterval(this.timer);

alert(“你的得分为：” + game.score);

//游戏回到最初的状态

var snakewrap = document.getElementById(“snakeWrap”);

snakewrap.innerHTML = “”;

snake = new Snake();

game = new Game();

var startBtnWrap = document.querySelector(“.startBtn”);

startBtnWrap.style.display = “block”;

}

//开启游戏

game = new Game();

var startBtn = document.querySelector(“.startBtn button”);

startBtn.onclick = function() {

startBtn.parentNode.style.display = “none”;

game.init();

}

//暂停

var snakewrap = document.getElementById(“snakeWrap”);

var pauseBtn = document.querySelector(“.pauseBtn”);

snakewrap.onclick = function() {

game.pause();

pauseBtn.style.display = “block”;

}

pauseBtn.onclick = function() {

game.start();

pauseBtn.style.display = “none”;

}

CSS样式代码 :

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

n.style.display = “none”;

}

CSS样式代码 :

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：