贪吃蛇的使命之零基础入门贪吃蛇游戏（附演示地址）

作者： C you again，从事软件开发努力在IT搬砖路上的技术小白
公众号： 【C you again】，分享计算机类毕业设计源码、IT技术文章、游戏源码、网页模板、程序人生等等。公众号回复【粉丝】进博主技术群，与大佬交流，领取干货学习资料
关于转载：欢迎转载博主文章，转载时表明出处
求赞环节：创作不易，记得点赞+评论+转发谢谢你一路支持

零基础入门贪吃蛇游戏

贪吃蛇是一款最常见、最经典、最受欢迎的小游戏之一。本篇文章带你零基础实现贪吃蛇游戏，一条蛇的使命从这里开始。

演示地址：贪吃蛇演示，可能会提示危险操作，请忽略，放心访问。

源码获取：公众号：C you again ，回复“贪吃蛇”免费获取

1、游戏描述

贪吃蛇是一款非常经典的休闲类游戏。在一块固定大小的区域内，游戏玩家通过控制贪吃蛇的移动去吃食物，吃到食物的蛇身体变长。食物被蛇吃到后立马消失，并再次随机产生。蛇撞到四周墙壁或者自己身体时死亡。

2、前期准备

2.1 具备技能

本游戏所说是零基础，但你具备以下技能最佳：
1、 HTML（主要是div盒子模型，canvas画布）
2、CSS （为你好看的游戏界面做准备）
3、JavaScript （让小蛇动起来，逻辑代码实现）

2.2 开发工具

为提高开发速率，选择一款优秀的开发工具也很重要，这里小编推荐 sublime text3,轻巧方便，可以去百度下载，也可以关注小编公众号“C you again”,私信获取破解中文版。当然你足够优秀，使用记事本小编也不拦着。

3、实现目标

本篇文章欲带你实现以下功能
1、基本贪吃蛇（蛇的移动，吃食物，产生食物，增加分数）
2、增加暂停游戏/继续游戏功能
3、再来一局功能（贪吃蛇死亡后有再来一局提示）

4、按键约定

为方便玩家游戏，对操作按键做以下约定：
1、上、下、左、右按键分别操作贪吃蛇的四个运动方向
2、“+”、“-”按键分别代表贪吃蛇的加速、减速
3、空格键代表游戏暂停/继续

5、实现原理

1、利用canvas画布完成运动场地、食物、贪吃蛇的展示
2、利用数组存储贪吃蛇的坐标位置
3、利用上、下、左、右键改变贪吃蛇的蛇头坐标
4、不断重新绘制页面，造成贪吃蛇运动的错觉

6、实现逻辑

//伪代码
function 初始化数据（）{1、初始化贪吃蛇运动区域大小2、初始化canvas画布山下文对象3、初始化贪吃蛇的坐标4、初始化贪吃蛇运动的方向5、初始化玩家分数6、初始化贪吃蛇的速度7、初始化食物8、初始化蛇9、初始化蛇的状态}
function 开始游戏（）{interval = setInterval(运动方法（）, speed);document.onkeydown = function(event) {var event = event || window.event;按键监控方法(event.keyCode);}
}function 按键监控方法（key）{switch(key){case: 37左break;case: 38上break;case: 39右break;case: 40下break;case: 32开始/暂停break;case: 107加速break;case: 109减速break;}
}function 运动方法（）{switch(moveTo){case 0:向左运动代码；break;case 1:向上运动代码；break;case 2:向右运动代码；break;case 3:向下运动代码；break;}画地图方法（）;画食物方法（）;画蛇方法（）;是否吃到食物方法（）;是否死亡方法（）;
}function 画地图方法（）{画地图代码实现.....
}function 画食物方法（）{画食物代码实现.....
}function 画蛇方法（）{画蛇代码实现.....
}
function 是否吃到食物方法（）{if(蛇头左上角的坐标==食物左上角的坐标){//吃到食物1、分数加一;2、重新绘制食物3、增加蛇身}
}function 是否死亡方法（）{1、判断蛇头左上角坐标是否越过上、下、左、右任一墙壁;2、判断蛇头左上角坐标是否与自己身体相撞;
}

7、实现过程

7.1 全局变量的定义与解释

变量名称	说明
ROWS	行数
COLS	列数
CONTEXT	canvas上下文对象
BLOCK_SIZE	贪吃蛇运动的格子大小
snake[]	保存蛇的坐标
snakeCount	蛇身长度
foodX, foodY	食物的坐标
interval	计时
moveTo	蛇移动的方向
isStop	是否暂停
score	分数
speed	运动速度

7.2 方法的定义与解释

方法名称	参数	返回值	说明
init()	无	无	初始化方法
start()	无	无	游戏启动方法
reLoad()	无	无	页面重新加载方法
keydown(keyCode)	按键的码值	无	交互响应方法
isDie()	无	无	判断是否死亡方法
isEat()	无	无	判断是否吃到食物方法
addSnake()	无	无	增加蛇身方法
addFood()	无	无	制造食物方法
move()	无	无	移动方法
drawMap()	无	无	绘制运动区域方法
drawFood()	无	无	绘制食物方法
drawSnake()	无	无	绘制蛇方法

7.3 主要实现代码

1、初始化方法的实现

function init() {ROWS = 35; //初始化行数COLS = 25; //初始化列数BLOCK_SIZE = 20;snakeCount = 3;moveTo = 2;score=0;document.getElementById("score").innerHTML=score;CONTEXT = document.getElementById('canvas').getContext('2d'); //初始化画布上下文对象的引用for(var i = 0; i < snakeCount; i++) {snakes[i] = {x: i * BLOCK_SIZE,y: 0};}isStop=false;speed=500;addFood();drawMap(); //初始化场地drawSnake(); //初始化蛇drawFood(); //初始化食物
}

2、绘制运动区域方法的实现

function drawMap() {CONTEXT.clearRect(0, 0, BLOCK_SIZE * ROWS, BLOCK_SIZE * COLS);//画横线for(var i = 0; i < COLS; i++) {CONTEXT.beginPath();CONTEXT.moveTo(0, i * BLOCK_SIZE);CONTEXT.lineTo(BLOCK_SIZE * ROWS, i * BLOCK_SIZE);CONTEXT.strokeStyle = "gray";CONTEXT.lineWidth=1;CONTEXT.stroke();}//画竖线for(var i = 0; i < ROWS; i++) {CONTEXT.beginPath();CONTEXT.moveTo(i * BLOCK_SIZE, 0);CONTEXT.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * COLS);CONTEXT.strokeStyle = "gray";CONTEXT.lineWidth=1;CONTEXT.stroke();}}

3、判断是否死亡方法的实现

function isDie() {if(snakes[snakeCount - 1].x == -20 || snakes[snakeCount - 1].x == BLOCK_SIZE * ROWS ||snakes[snakeCount - 1].y == -20 || snakes[snakeCount - 1].y == BLOCK_SIZE * COLS) {clearInterval(interval);document.getElementById("model2").style.display='block';}for(var i = 0; i < snakeCount - 1; i++) {if(snakes[snakeCount - 1].x == snakes[i].x && snakes[snakeCount - 1].y == snakes[i].y) {clearInterval(interval);document.getElementById("model2").style.display='block';}}
}

4、绘制蛇方法的实现

function drawSnake() {for(var i = 0; i < snakes.length; i++) {CONTEXT.beginPath();CONTEXT.fillStyle = "red";CONTEXT.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE);CONTEXT.moveTo(snakes[i].x, snakes[i].y);CONTEXT.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y);CONTEXT.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE);CONTEXT.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE);CONTEXT.closePath();CONTEXT.strokeStyle = "gray";CONTEXT.stroke();}
}

8、结果演示

8.1 运行

8.2 暂停

8.3 死亡

9、最后

1、至此贪吃蛇已制作完成，谢谢你的支持
2、本教程纯属个人思想构建，避免不了出现一些缺陷或错误，欢迎你批评指正
3、如果你对那部分不太理解或有更好的解决办法，请在公众号“C you again”私信与我交流
4、获取源码请搜索公众号“C you again”或扫描下面二维码，回复“贪吃蛇”
5、转载请标明来源
6、其它游戏教程请公众号私信获取