童年的回忆小游戏来了——贪吃蛇，快来自己动手写一个属于自己的小游戏吧

贪吃蛇小游戏

在我的记忆里，小时候经常趁父母不在家的时候，偷偷拿爷爷奶奶的手机玩贪吃蛇，推箱子等游戏，这是童年记忆里的游戏。现在我已经好久没有玩过这个游戏了，但是！！！马上就可以拥有一个独一无二是属于自己的贪吃蛇了，快来和博主一起动手设计这个简易的贪吃蛇游戏吧

前提准备

游戏区域：一个大盒子.bigBox 宽高都为640px(可以跟随自己的想法设置)
食物：属性有宽：20px 、高：20px
蛇头：属性：宽：20px 、高：20px 、direction（蛇头的方向）：right（初始方向）
蛇身：属性：宽：20px 、高：20px
start按钮：属性：宽：200px 、高：150px
stop按钮：属性：宽：70px 、高：70px （一开始需要隐藏起来）
样式如下图所示：

需要完成的需求

1. 开始游戏功能

当用户进入游戏主界面时，可在界面中下方显眼的位置找到“**start”按钮，**点击后用户可进行新游戏。

2. 运动功能

默认运动功能
当用户点击”开始游戏“按钮后，蛇的方向默认从左到右方向移动。
键盘控制方向运动功能（重点）
用户可通过使用键盘上的上下左右方位键控制 蛇的移动方向，蛇在控制的方向上进行直线前进。

3. 吃食物功能

当界面任意位置出现食物，用户使用方位键控制蛇移动到食物周围，当蛇头碰到食物时则表示贪吃蛇吃到此食物，界面上会在任意位置出现下一个食物，用户再次控制蛇去吃这一食物。
蛇吃到食物自身会增加一个节点

死亡判定功能

当蛇头在前进方向上撞到墙壁或蛇头吃到蛇身时，给出死亡判定，并弹框给出用户本次游戏得分。

暂停/继续游戏功能

当用户使用软件时，由于个人原因需要暂停游戏进程，用户可点击游戏界面时及时“暂停”游戏，此时会出现“游戏暂停”的按钮，当再次点击“暂停”按钮则继续之前的游戏。

代码部分

html部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><<link rel="stylesheet" href="css/index.css"><script src="js/snake.js"></script>
</head><body><div class="bigBox"><div class="start"><img src="data:images/btn1.gif" alt=""></div><div class="stop"><img src="data:images/btn4.png" alt=""></div><div class="con"></div></div>
</body></html>

css部分

 * {margin: 0;padding: 0;box-sizing: border-box;}.bigBox {position: relative;width: 640px;height: 640px;margin: 50px auto;background-color: #fce4ec;border: 20px solid #f8bbd0;box-sizing: border-box;}.start {width: 200px;height: 150px;}.start,.stop {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.stop {display: none;width: 70px;height: 70px;}img {width: 100%;height: 100%;}

js部分

window.addEventListener('load', function () {var bigBox = this.document.querySelector('.bigBox');var start = this.document.querySelector('.start');var stop = this.document.querySelector('.stop');var con = this.document.querySelector('.con');function Snake() {//设置蛇的宽、高、方向this.width = 20;this.height = 20;this.direction = 'right';//设置初始状态  一个头加两个身体this.body = [{ x: 2, y: 0 }, //蛇头{ x: 1, y: 0 }, //蛇身{ x: 0, y: 0 } //蛇身]//将贪吃蛇显示在游戏区域内this.display = function () {for (var i = 0; i < this.body.length; i++) {if (this.body[i].x != null) {var s = document.createElement('div');this.body[i].flag = s;s.style.height = this.height + 'px';s.style.width = this.width + 'px';s.style.borderRadius = '10px';//通过蛇头的方向，对舌头进行旋转，确保蛇头的方向和行走的方向一致if (i == 0) {if (this.direction == 'up') {s.style.transform = 'rotate(-90deg)';}if (this.direction == 'down') {s.style.transform = 'rotate(90deg)';}if (this.direction == 'left') {s.style.transform = 'rotate(-180deg)';}if (this.direction == 'right') {s.style.transform = 'rotate(0deg)';}s.style.backgroundImage = 'url(./images/snake.png)';s.style.backgroundSize = '25px 20px ';s.style.backgroundPosition = 'center center';} else {s.style.backgroundColor = '#9ccc65';}s.style.position = 'absolute';s.style.left = this.body[i].x * this.width + 'px';s.style.top = this.body[i].y * this.height + 'px';con.appendChild(s);}}}//蛇移动，后一个元素到前一个元素的位置this.run = function () {//蛇头另外根据方向处理，所以 i 不等于0for (var i = this.body.length - 1; i > 0; i--) {this.body[i].x = this.body[i - 1].x;this.body[i].y = this.body[i - 1].y;}//根据方向处理蛇头的转向switch (this.direction) {case 'left': this.body[0].x -= 1;break;case 'right': this.body[0].x += 1;break;case 'up': this.body[0].y -= 1;break;case 'down': this.body[0].y += 1;break;}//判断是否出界if (this.body[0].x < 0 || this.body[0].x > 29 || this.body[0].y < 0 || this.body[0].y > 29) {clearInterval(timer);//清除定时器alert('你的得分是：' + score);//删除旧的贪吃蛇for (var i = 0; i < this.body.length; i++) {if (this.body[i].flag != null) {con.removeChild(this.body[i].flag);}}//初始化this.body = [{ x: 2, y: 0 }, //蛇头，第一个点{ x: 1, y: 0 }, //蛇身{ x: 0, y: 0 } //蛇身];this.direction = 'right';score = 0;start.style.display = 'block'; //结束显示开始按键con.removeChild(food.flag);return false;}//蛇头吃到食物  xy的坐标相等if (this.body[0].x == food.x && this.body[0].y == food.y) {//蛇加一节  因为根据最后节点定，下面display时会更新this.body.push({ x: null, y: null, flag: null });score++;//清除食物再重新生成食物con.removeChild(food.flag);food.display();}//吃到自己死亡，从第五个开始判断for (var i = 4; i < this.body.length; i++) {if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {clearInterval(timer);alert('你的得分是：' + score);//删除旧的贪吃蛇for (var i = 0; i < this.body.length; i++) {if (this.body[i].flag != null) {con.removeChild(this.body[i].flag);}}//初始化this.body = [{ x: 2, y: 0 }, //蛇头，第一个点{ x: 1, y: 0 }, //蛇身{ x: 0, y: 0 } //蛇身];this.direction = 'right';score = 0;btn.style.display = 'block'; //结束显示开始按键con.removeChild(food.flag);// this.display();return false;//结束}}//先删除旧的蛇再显示新蛇for (var i = 0; i < this.body.length; i++) {if (this.body[i].flag != null) {//当吃到食物时， flag等于 null,且不能删除con.removeChild(this.body[i].flag);}}this.display();}}//构造食物 并设置食物出现的位置function Food() {this.width = 20;this.height = 20;this.name = 'zhangsan';this.display = function () {var f = document.createElement('div');this.flag = f;f.style.width = this.width + 'px';f.style.height = this.height + 'px';f.style.backgroundImage = 'url(./images/food2.png)';f.style.backgroundSize = '100% 100%';f.style.position = 'absolute';this.x = Math.floor(Math.random() * 30);this.y = Math.floor(Math.random() * 30);f.style.left = this.x * this.width + 'px';f.style.top = this.y * this.height + 'px';console.log(this.x);console.log(this.y);con.appendChild(f);}}//调用函数，游戏开始var timer = null;var flag = false;var score = 0;var snake = new Snake();var food = new Food();var flag1 = false;start.addEventListener('click', function (e) {e.stopPropagation();start.style.display = 'none';snake.display();food.display();timer = setInterval(function () {snake.run();}, 200)//键盘按键事件   document.addEventListener('keydown', function (e) {switch (e.keyCode) {case 38:if (snake.direction != 'down') {snake.direction = 'up';}break;case 40:if (snake.direction != 'up') {snake.direction = 'down';}break;case 37:if (snake.direction != 'right') {snake.direction = 'left';}break;case 39:if (snake.direction != 'left') {snake.direction = 'right';}break;}})flag1 = true;flag = true;})// 游戏开始后，点击游戏界面可以暂停游戏，再点击继续游戏bigBox.addEventListener('click', function () {console.log('+++++' + flag1);console.log('====' + flag);if (flag1) {if (flag) {clearInterval(timer);stop.style.display = 'block';flag = false;} else {clearInterval(timer);timer = setInterval(function () {snake.run();}, 200)stop.style.display = 'none';flag = true;}}})
})

结尾

快去动手试试吧，相信这对于你来说就是小菜一碟