2024年最新Web前端---HTML+CSS+JS实现的贪吃蛇游戏(1)，腾讯前端面试经验

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

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

//创建蛇身体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样式代码 :

.content {

width: 640px;

height: 640px;

margin: 50px auto 0px auto;

position: relative;

}

.btn {

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

background-color: rgba(0, 0, 0, 0.3);

z-index: 2;

}

.btn button {

background: none;

border: none;

background-size: 100% 100%;

cursor: pointer;

outline: none;

position: absolute;

left: 50%;

top: 50%;

}

.startBtn button {

width: 200px;

height: 80px;

background-image: url(…/images/startGame.png);

margin-left: -100px;

margin-top: -40px;

}

.pauseBtn {

display: none;

}

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

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

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。