须要具有学问：
1.html、css基本
2.jquery基本
详细完成要领：
- 建立游戏界面
.bts
{
display: flex;
}
.bt
{
width: 60px;
height: 24px;
line-height: 24px;
font-size: 18px;
text-align: center;
background: #ede;
margin-left: 20px;
}
.bg
{
width: 400px;
height: 400px;
background: #ddd;
margin-top: 30px;
position: relative;
}
<div class="bts">
<div class="start bt" onclick="start()">最先</div>
<!-- <div class="pause bt" onclick="pause()">停息</div> -->
</div>
<div class="bg">
</div>个中bts是按钮组，因为最先盘算写个停息，背面摒弃了，bt是按钮，bg是游戏界面（大小最好为10,15，20的倍数，比较轻易盘算游戏内方块的）,个中bg（游戏界面背景）是才用relative定位，蛇与食品采纳用absolute定位。
- 定义游戏重要函数
起首，假定游戏内方块的个数为2020，每一个方块的大小为20px20px（固然为了适配手机，能够转换为rem去适配网页大小），蛇与食品的大小为一个方块的大小(food为食品，snakes为蛇）
个中因为border会在div的表面去衬着，所以，大小为20的方块，现实宽高为18px，加上高低各1px的边框，一个食品与蛇的大小为20px*20px
.snakes,.food
{
position: absolute;
width: 18px;
height: 18px;
border: solid 1px #444;
}
.snakes
{
background: red;
}
.food
{
background: yellow;
}- 定义游戏中的变量，
var snakes = []; //存储蛇的位置
var stepX = 20; //默许向X行走的像素
var stepY = 0; //默许向Y行走的像素
var live = false; //是不是存活
var isPause = false; //是不是停息 ，未用
var food = {}; //食品的位置
var keydown = 'right'; //默许方向为右start()函数，点击最先游戏时刻，实行的操纵start = function(){ //最先
if(!live)
{
stepX = 20;
stepY = 0;
keydown = 'right';
live = true;
$(".snakes").remove();
snakes = [];
drawSnake(3); //初始化蛇
snakeMove(); //挪动蛇，游戏重要历程
createFood(); //建立食品
}
isPause = false;
}起首点击游戏最先的时刻，须要去初始化一下蛇，让他天生在游戏区域内的左上角，因为采纳的是absolute定位，所以，默许的第一个点的位置为top:0;left:0; (算作坐标轴的话，右上角的原点为0,0），定义一个蛇的方块，经由过程for轮回，将蛇画在屏幕的左上角，个中num为默许蛇的长度。然后将建立的元素存成json花样的，push在snakes数组内里。因为push()是往最背面去增加元素，所以蛇的头是snakes内里末了的一个元素
drawSnake = function(num){ //初始化蛇身材
var item = '<div class="snakes"></div>'
for(var i=0;i<num;i++)
{
$(".bg").append(item)
$(".snakes").eq(i).css({
top:0,
left:20*i
})
item1 = {
top:0,
left:20*i
}
snakes.push(item1)
//console.log(snakes);
}
}运用setTimeout(),去驱动蛇，因为蛇头是存在数组的末了一名，所以蛇头现实上是snakes[snakes.length-1]这个元素，然后，经由过程for轮回，去让蛇的第i个元素的值即是第i+1个值（蛇头是末了一个，所以假如蛇长度为三个的话，先把第一个的位置挪动到第第二个的位置，第二个的位置挪动到第一个的位置，然后再将蛇头往其他地方挪动，就申明蛇挪动了），然后setTimeout内里继承递归挪用该函数，蛇就会最先挪动snakeMove = function(){ //挪动蛇
if(live){ //推断蛇是不是存活，假如存活，则挪动蛇,不然弹出游戏完毕
for(var i=0;i<snakes.length-1;i++)
{
$(".snakes").eq(i).css({
top:snakes[i+1].top,
left:snakes[i+1].left
})
snakes[i].top = snakes[i+1].top
snakes[i].left = snakes[i+1].left
}
var first = snakes.length-1
$(".snakes").eq(first).css({
top:snakes[first].top+stepY,
left:snakes[first].left+stepX
})
snakes[first].top = snakes[first].top+stepY;
snakes[first].left = snakes[first].left+stepX;
if(!isLive(snakes[first].top,snakes[first].left))
{
live = false;
alert("游戏完毕");
}
else
{
eatFood(snakes[first].top,snakes[first].left);
setTimeout("snakeMove()",100);
}
}
}
将蛇驱动后，最先掌握蛇的挪动与游戏完毕。isLive = function(top,left){
if(top>380||top<0||left>380||left<0) //假如蛇挪动到画布表面，则游戏完毕，最先坐标是0，0，所以边境值是380,380
{
return false;
}
else
{
for(var i=0;i<snakes.length-1;i++) //轮回蛇每一个元素，推断蛇头是不是与他们重合，重合的话，则申明蛇撞到本身，游戏完毕
{
if(top==snakes[i].top&&left==snakes[i].left)
{
return false;
break;
}
}
return true;
}
}
document.onkeydown = function(event) { //推断点击的按钮，让蛇往差别的方向去走(注重右上角是坐标原点，往下是Y，往右是X)
//console.log(event);
if(event.keyCode==38) //上
{
if(keydown!='down') //假如往下走，就不能只能摁上，假如直接倒着走，会撞到本身，完毕游戏
{
keydown='up';
stepX=0;
stepY=-20;
}
}
else if(event.keyCode==40) //下
{
if(keydown!='up')
{
keydown='down';
stepX=0;
stepY=20;
}
}
else if(event.keyCode==37) //左
{
if(keydown!='right')
{
keydown='left';
stepX=-20;
stepY=0;
}
}
else if(event.keyCode==39) //右
{
if(keydown!='left')
{
keydown='right'
stepX=20;
stepY=0;
}
}
}将完毕游戏与蛇挪动处置惩罚完后，最先处置惩罚建立食品与推断是不是吃掉食品createFood = function(){ //建立食品
$(".food").remove(); //起首清算掉最先默许的食品（背面吃掉食品的时刻，也会用该函数举行建立）
isCreate = true //设置一个状况去推断食品是不是建立胜利
do
{
food={ //天生食品的位置，用随机数天生（边境值为380,380 上面说过）
top:Math.round(Math.random()*19)*20,
left:Math.round(Math.random()*19)*20
}
for(var i=0;i<snakes.length;i++) //轮回蛇身材，让天生的食品不能天生在蛇身上，假如天生胜利了，就跳出do while (没有做通关的推断，因为觉得没人能玩到通关)
{
if(food.top==snakes[i].top&&food.left==snakes[i].left)
{
isCreate = false;
break;
}
else
{
isCreate = true;
}
}
}
while(!isCreate)
var foodItem ='<div class="food"></div>'
$(".bg").append(foodItem);
$(".food").css({
top:food.top,
left:food.left
})
}
eatFood = function(top,left){ //是不是吃到食品
if(top==food.top&&left==food.left) //假如蛇吃到食品，那末蛇头的坐标与食品坐标重合，然后将食品谁人点作为蛇头，append一个蛇元素到游戏内里，再把坐标push到蛇内里，然后建立一个新的食品
{
var item = '<div class="snakes"></div>'
snakes.push({top:top,left:left})
$(".bg").append(item)
$(".snakes").last().css({
top:top,
left:left
})
createFood();
}
}项目源码：<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style type="text/css" media="screen">
.bts
{
display: flex;
}
.bt
{
width: 60px;
height: 24px;
line-height: 24px;
font-size: 18px;
text-align: center;
background: #ede;
margin-left: 20px;
}
.bg
{
width: 400px;
height: 400px;
background: #ddd;
margin-top: 30px;
position: relative;
}
.snakes,.food
{
position: absolute;
width: 18px;
height: 18px;
border: solid 1px #444;
}
.snakes
{
background: red;
}
.food
{
background: yellow;
}
</style>
</head>
<body>
<div class="bts">
<div class="start bt" onclick="start()">最先</div>
<!-- <div class="pause bt" onclick="pause()">停息</div> -->
</div>
<div class="bg">
</div>
</body>
<script type="text/javascript">
var snakes = [];
var stepX = 20;
var stepY = 0;
var live = false;
var isPause = false;
var food = {};
var keydown = 'right'; //默许方向为右
start = function(){ //最先
if(!live)
{
stepX = 20;
stepY = 0;
keydown = 'right';
live = true;
$(".snakes").remove();
snakes = [];
drawSnake(5);
snakeMove();
createFood();
}
isPause = false;
}
pause = function(){ //停息
isPause = true;
}
drawSnake = function(num){ //初始化蛇身材
var item = '<div class="snakes"></div>'
for(var i=0;i<num;i++)
{
$(".bg").append(item)
$(".snakes").eq(i).css({
top:0,
left:20*i
})
item1 = {
top:0,
left:20*i
}
snakes.push(item1)
//console.log(snakes);
}
}
snakeMove = function(){ //挪动蛇
if(live){
for(var i=0;i<snakes.length-1;i++)
{
$(".snakes").eq(i).css({
top:snakes[i+1].top,
left:snakes[i+1].left
})
snakes[i].top = snakes[i+1].top
snakes[i].left = snakes[i+1].left
}
var first = snakes.length-1
$(".snakes").eq(first).css({
top:snakes[first].top+stepY,
left:snakes[first].left+stepX
})
snakes[first].top = snakes[first].top+stepY;
snakes[first].left = snakes[first].left+stepX;
if(!isLive(snakes[first].top,snakes[first].left))
{
live = false;
alert("游戏完毕");
}
else
{
eatFood(snakes[first].top,snakes[first].left);
setTimeout("snakeMove()",100);
}
}
}
isLive = function(top,left){
if(top>380||top<0||left>380||left<0)
{
return false;
}
else
{
for(var i=0;i<snakes.length-1;i++)
{
if(top==snakes[i].top&&left==snakes[i].left)
{
return false;
break;
}
}
return true;
}
}
createFood = function(){ //建立食品
$(".food").remove();
isCreate = true
do
{
food={
top:Math.round(Math.random()*19)*20,
left:Math.round(Math.random()*19)*20
}
for(var i=0;i<snakes.length;i++)
{
if(food.top==snakes[i].top&&food.left==snakes[i].left)
{
isCreate = false;
break;
}
else
{
isCreate = true;
}
}
}
while(!isCreate)
var foodItem ='<div class="food"></div>'
$(".bg").append(foodItem);
$(".food").css({
top:food.top,
left:food.left
})
}
eatFood = function(top,left){ //是不是吃到食品
if(top==food.top&&left==food.left)
{
var item = '<div class="snakes"></div>'
snakes.push({top:top,left:left})
$(".bg").append(item)
$(".snakes").last().css({
top:top,
left:left
})
createFood();
}
}
document.onkeydown = function(event) {
//console.log(event);
if(event.keyCode==38) //上
{
if(keydown!='down')
{
keydown='up';
stepX=0;
stepY=-20;
}
}
else if(event.keyCode==40) //下
{
if(keydown!='up')
{
keydown='down';
stepX=0;
stepY=20;
}
}
else if(event.keyCode==37) //左
{
if(keydown!='right')
{
keydown='left';
stepX=-20;
stepY=0;
}
}
else if(event.keyCode==39) //右
{
if(keydown!='left')
{
keydown='right'
stepX=20;
stepY=0;
}
}
}
</script>
</html>