因为js是单线程的，所以有js写贪吃蛇可以少考虑很多东西，感觉非常方便。今天给大家介绍一个非常简单的贪吃蛇写法。我说的非常简单勒，就是指没有游戏结束，也不会变长。哈哈，反正就是非常简单了。
大概就是这个样子，可以移动可以随机出现食物，也可以出食物。
先给大家看看HTML代码，这个比较简单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#container{
}
#map{
width: 500px;
height: 500px;
margin: 30px auto;
background-color: antiquewhite;
position: relative;
}
#snake{
width: 10px;
height: 10px;
background-color: red;
position: absolute;
top: 100px;
}
</style>
<body>
<div id="container">
<!-- 地图的div -->
<div id="map">
<div id="snake"></div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
里面就三个div，就不多说了。
然后是js代码，首先获取snake的div：
var snake = document.getElementById("snake");
判断按钮，把方向记录下来（wasd、上左下右）：
//这里的direction、up、down、right、left这些变量是在前面定义的
if(e.keyCode == 119){
//上
direction = up;
}else if(e.keyCode == 115){
//下
direction = down;
}else if(e.keyCode == 100){
//右
direction = right
}else if(e.keyCode == 97){
//左
direction = left;
}
判断方向后，就要开始移动了。这里就需要使用定时器：
//这个的move方法是自己定义的
time = setInterval(move, 200);
然后说一下move方法，先获取snake的div，然后获取div距浏览器上面和左边的距离：
//获取div
var snake = document.getElementById("snake");
//获取div离顶部的距离
var top_length = snake.offsetTop;
//获取div离左边的距离
var left_length = snake.offsetLeft;
然后判断方向移动，这里就写一个方向，其他的也差不多：
//根据先前保存的direction，分辨方向
switch (direction){
case up:
//当top_length>0的时候，说明还没有到顶部，可以继续往上移动
if(top_length > 0){
//每次向上移动10px
top_length -= 10;
//改变snake距顶部的距离
snake.style.top = top_length + "px";
}
break;
｝
移动的时候随机出现食物：
//显示食物
if(food == null){
//当食物为空时，就显示食物。
showFood();
}else{
var map = document.getElementById("map");
//判断蛇是否吃到食物
if(left_length == food.offsetLeft && top_length == food.offsetTop){
//当蛇吃到食物时，移除食物，并致为null
map.removeChild(food);
food = null;
}
}
最后是showFood()方法，先随机产生上左边距：
var food_top = Math.floor(Math.random()*50)*10;
var food_left = Math.floor(Math.random()*50)*10;
创建食物，然后拼接到map上：
//关联Map
var map = document.getElementById("map");
//创建food
food = document.createElement("div");
//拼接food
map.appendChild(food);
然后设置食物的属性：
//设置绝对布局，和上左距离
food.style.width = "10px";
food.style.height = "10px";
food.style.position = "absolute";
food.style.backgroundColor = "blue";
food.style.top = food_top + "px";
food.style.left = food_left + "px";
差不多就是这样了。下面给大家看看全部的js代码：
/**
* Created by Administrator on 2018/11/21.
*/
var time;
var direction;
var up = 1;
var down = 2;
var left = 3;
var right = 4;
var food;
onkeypress = function(e){
window.clearInterval(time);
var snake = document.getElementById("snake");
var top_length = snake.offsetTop;
if(e.keyCode == 119){
//上
direction = up;
}else if(e.keyCode == 115){
//下
direction = down;
}else if(e.keyCode == 100){
//右
direction = right
}else if(e.keyCode == 97){
//左
direction = left;
}
time = setInterval(move, 200);
};
function move(){
var snake = document.getElementById("snake");
var top_length = snake.offsetTop;
var left_length = snake.offsetLeft;
switch (direction){
case up:
if(top_length > 0){
top_length -= 10;
snake.style.top = top_length + "px";
}
break;
case down:
if(top_length < 490){
top_length += 10;
snake.style.top = top_length + "px";
}
break;
case left:
if(left_length > 0){
left_length -= 10;
snake.style.left = left_length + "px";
}
break;
case right:
if(left_length < 490){
left_length += 10;
snake.style.left = left_length + "px";
}
break;
}
//显示食物
if(food == null){
showFood();
}else{
var map = document.getElementById("map");
//alert(left_length + ":" + food.offsetLeft + "|" + top_length + ":" + food.offsetTop);
if(left_length == food.offsetLeft && top_length == food.offsetTop){
map.removeChild(food);
food = null;
}
}
}
/**
* 随即出现食物
*/
function showFood(){
var food_top = Math.floor(Math.random()*50)*10;
var food_left = Math.floor(Math.random()*50)*10;
var map = document.getElementById("map");
food = document.createElement("div");
map.appendChild(food);
food.style.width = "10px";
food.style.height = "10px";
food.style.position = "absolute";
food.style.backgroundColor = "blue";
food.style.top = food_top + "px";
food.style.left = food_left + "px";
}
https://mp.weixin.qq.com/s/0K1aYqxKIBCAssAcWX-Rvw
