听说刚学完JavaScript的你，找不到demo来练手？
前言：
这是本蒟蒻这周的web作业，开始觉得选贪吃蛇可能会有点小难，但是自己看了看网站的一些视频后，发现似乎还是挺有意思的，于是打算分享出来，希望对刚学完JavaScript基础知识，正愁没有demo来练手的小伙伴有些许帮助。
文件资源：
资源位置
因为比较简单，所以没有设置c币，只希望大佬留个赞再走呗；
demo的简单介绍：
前言中也提了句，这是一个web版的低配版贪吃蛇单机小游戏
（看到前面那么多前缀，就知道，这真的只是一个demo，因为实在是太低配了）
这是的蛇头，食物、身体都是通过div实现，所以就比较简单了。
这里的JavaScript用的是jquery框架，因为还是可以稍微少点代码量（哈哈哈）
布局：
效果图：
既然选好目标后，我们首先当然是得确定布局：
这是最终需要的效果图。
具体实现：
那么怎么实现呢：
1.地图：
身体，食物都要大小一致，我们还是比较容易想到用table标签，但是table下面不能创建div，这是我们需要注意的。所以我们需要另外开一个div表示真正的地图：这样就可以在地图开生成食物和蛇头了。
但是我们会发现table标签和真正表示地图的div不能重合，于是我们可以用绝对定位，使其重合
2.得分显示区域：
直接用一个div下面封装一个span标签即可，方便之后修改它的值
3.改变速度按钮区域：
直接用四个buton标签即可
4.游戏说明区域：
一个p标签即可
于是html文件和css文件就出来了：
这里对于table的创建，就别一个个cv…
vscode下直接table>tr20>td40按回车即可，
其他操作可以看下面博客：
https://www.cnblogs.com/summit7ca/p/6944215.html
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<link type="text/css" rel="stylesheet" href="index.css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="index.js" type="text/javascript"></script>
</head>
<body>
<!-- 地图500*1000 每个单元格为25*25 (20行，40列）-->
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- 真正的地图 因为table里面不能加div-->
<div id="map"></div>
<div id="scoreDiv">
Score：<span id="score">0</span>
</div>
<div id="buttonGroup">
<button id="quickBtn">快</button>
<button id="midBtn">中</button>
<button id="slowBtn">慢</button>
<button id="restart">重新开始</button>
</div>
<p>
游戏说明：<br>
红色方块表示：蛇头，蓝色方块表示：食物，黄色方块表示：身体。<br>
通过键盘的上、下、左、右键来移动贪吃蛇
</p>
</body>
</html>
css文件：
命名需要为：index.css，而且需要和html在同一目录下，不然html无法调用
（这是讲给像我一样的蒟蒻的，大佬勿喷）
* {
margin: 0;
padding: 0;
}
#scoreDiv {
font-size: 30px;
}
#map {
width: 1000px;
height: 500px;
background-color: black;
}
table {
border: 0;
position: absolute;
left: 0;
top: 0;
}
td {
width: 25px;
height: 25px;
}
button{
width: 25px;
height: 25px;
}
#restart{
background-color: red;
width:100px;
height: 25px;
}
p{
font-size:20px;
}
相关功能实现：
1.产生蛇头、食物div
我们可以对这个操作用一函数封装。
//刷新页面时，不仅要产生地图，而且还要产生 蛇头 和 一个食物
//封装一个方法，用于创建div元素 放入地图
function createDiv(color) {
var div = document.createElement("div"); //创建一个div节点
div.style.width = "25px";
div.style.height = "25px";
div.style.position="absolute"; //为了改变位置，并不独立成行
//位置是随机的 使用js随机数
//Math.random() 产生一个[0,1)的随机数
div.style.left=parseInt(Math.random()*10)*25+"px";
div.style.top=parseInt(Math.random()*10)*25+"px";
div.style.backgroundColor=color;
$("#map").append(div); //JQuery操作
//返回创建出的div
return div;
}
- 这里需要传入一个color是因为，我们对于后面的身体操作有用
- 其中每次游戏蛇头和食物都是随机的，于是我们得用到Math.random()这个函数产生随机数。
2.使用定时器让蛇头动起来
我们可以对我们新产生的div的value值，表示方向，然后对于游戏开始时对蛇头设置一个默认的移动方向，通过对div的位置，来实现蛇头的移动，具体见代码：
//判断当前蛇头的移动方向
switch(headNode.value){
case "左":
headNode.style.left=parseInt(headNode.style.left)-25+"px";
break;
case "右":
headNode.style.left=parseInt(headNode.style.left)+25+"px";
break;
case "上":
headNode.style.top=parseInt(headNode.style.top)-25+"px";
break;
case "下":
headNode.style.top=parseInt(headNode.style.top)+25+"px";
break;
}
3.通过键盘的上下左右键，实现蛇头的移动
- 我们首先得知道键值，左：37，右：39，上：38，下：40
- 调用document的keydown方法，获取当前按下的键值
//通过键盘的按键，来改变蛇头的移动方向
//不同的键值对应不同的键
$(document).keydown(function(e){ //e表示事件对象
//console.log(e.keyCode);
switch(e.keyCode){
case 37:
headNode.value="左"
break;
case 39:
headNode.value="右"
break;
case 38:
headNode.value="上"
break;
case 40:
headNode.value="下"
break;
}
})
4.定义两个数组
-分别存身体和整个蛇，在后面蛇的移动有需要
//放所有身体的数组
var bodyarr=[];
//放整个蛇的数组
var nodes=[];
5.碰撞检测：以改变食物的位置
- 碰撞检测：即div元素重合（蛇头和食物）
- 吃到食物，身体加一
//碰撞检测 即：两个元素重合
//吃到食物,身体加一
if(headNode.style.left==foodNode.style.left&&headNode.style.top==foodNode.style.top){
var bodyNode=createDiv("yellow");
var lastNode;
if(bodyarr.length>0){
lastNode=bodyarr[bodyarr.length-1];
}
else{
lastNode=headNode;
}
switch(lastNode.value){
case "左":
bodyNode.style.left=parseInt(lastNode.style.left)+25+"px";
bodyNode.style.top=lastNode.style.top;
break;
case "右":
bodyNode.style.left=parseInt(lastNode.style.left)-25+"px";
bodyNode.style.top=lastNode.style.top;
break;
case "上":
bodyNode.style.top=parseInt(lastNode.style.top)+25+"px";
bodyNode.style.left=lastNode.style.left;
break;
case "下":
bodyNode.style.top=parseInt(lastNode.style.top)-25+"px";
bodyNode.style.left=lastNode.style.left;
break;
}
bodyNode.value=lastNode.value;
bodyarr.push(bodyNode);
nodes.push(bodyNode);
6.身体随之移动：
- 身体随前一块移动
- 需要逆序遍历身体数组，正序的话会出错，仔细想一想会发现：第一块身体移动方向等于蛇头移动方向，第二块等于第一块，以此类推，所有的身体移动方向都是蛇头移动方向了
//身体移动
if(bodyarr.length>0){
//身体跟随前一块移动 ,逆序遍历
for(var i=bodyarr.length-1;i>=0;i--){
switch(bodyarr[i].value){
case "左":
bodyarr[i].style.left=parseInt(bodyarr[i].style.left)-25+"px";
break;
case "右":
bodyarr[i].style.left=parseInt(bodyarr[i].style.left)+25+"px";
break;
case "上":
bodyarr[i].style.top=parseInt(bodyarr[i].style.top)-25+"px";
break;
case "下":
bodyarr[i].style.top=parseInt(bodyarr[i].style.top)+25+"px";
break;
}
if(i==0){
bodyarr[i].value=headNode.value;
}
else{
bodyarr[i].value=bodyarr[i-1].value;
}
}
}
7.游戏结束
- 撞墙
- 吃到身体
//离开地图,撞墙
if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>975
||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>475){
clearInterval(t);
alert("撞墙了,Game Over!");
}
//吃到自己的身体
if(bodyarr.length>0){
for(var i=0;i<bodyarr.length;i++){
if(bodyarr[i].style.left==headNode.style.left&&bodyarr[i].style.top==headNode.style.top){
clearInterval(t);
alert("咬到身体了,Game Over!");
break;
}
}
}
8.防止更新的食物位置与身体重合
//更新食物位置,防止食物与蛇重合
var x=parseInt(Math.random()*10)*25;
var y=parseInt(Math.random()*10)*25;
for(var i=0;i<nodes.length;i++){
if(parseInt(nodes[i].style.left)==x&&parseInt(nodes[i].style.top)==y){
x=parseInt(Math.random()*10)*25;
y=parseInt(Math.random()*10)*25;
i=-1;
}
}
foodNode.style.left=x+"px";
foodNode.style.top=y+"px";
9.得分增加
直接改变span标签的值即可（每吃一个+10）
//得分增加
$("#score").text(parseInt($("#score").text())+10);
10.对按钮实现相关功能
//对按钮实现相关功能
$("#quickBtn").click(function(){
t=setInterval(move,100);
})
$("#midBtn").click(function(){
t=setInterval(move,500);
})
$("#slowBtn").click(function(){
t=setInterval(move,2000);
})
$("#restart").click(function(){
location.reload();
})
于是基本上这个demo所有功能都实现了
js文件：
同样需要注意下命名：
$(function () {
//放所有身体的数组
var bodyarr=[];
//放整个蛇的数组
var nodes=[];
//蛇移动的速度,默认为中速
var t=setInterval(move,500);
//刷新页面时，不仅要产生地图，而且还要产生 蛇头 和 一个食物
//封装一个方法，用于创建div元素 放入地图
function createDiv(color) {
var div = document.createElement("div"); //创建一个div节点
div.style.width = "25px";
div.style.height = "25px";
div.style.position="absolute"; //为了改变位置，并不独立成行
//位置是随机的 使用js随机数
//Math.random() 产生一个[0,1)的随机数
div.style.left=parseInt(Math.random()*10)*25+"px";
div.style.top=parseInt(Math.random()*10)*25+"px";
div.style.backgroundColor=color;
$("#map").append(div);
//返回创建出的div
return div;
}
//蛇头的移动方向 ，假设默认移动方向向左
//四个方向 左 右 上 下
var headNode=createDiv("red"); //创建一个蛇头
nodes.push(headNode);
headNode.value="右";
var foodNode=createDiv("blue"); //创建一个食物
function move(){
//身体移动
if(bodyarr.length>0){
//身体跟随前一块移动 ,逆序遍历
for(var i=bodyarr.length-1;i>=0;i--){
switch(bodyarr[i].value){
case "左":
bodyarr[i].style.left=parseInt(bodyarr[i].style.left)-25+"px";
break;
case "右":
bodyarr[i].style.left=parseInt(bodyarr[i].style.left)+25+"px";
break;
case "上":
bodyarr[i].style.top=parseInt(bodyarr[i].style.top)-25+"px";
break;
case "下":
bodyarr[i].style.top=parseInt(bodyarr[i].style.top)+25+"px";
break;
}
if(i==0){
bodyarr[i].value=headNode.value;
}
else{
bodyarr[i].value=bodyarr[i-1].value;
}
}
}
//判断当前蛇头的移动方向
switch(headNode.value){
case "左":
headNode.style.left=parseInt(headNode.style.left)-25+"px";
break;
case "右":
headNode.style.left=parseInt(headNode.style.left)+25+"px";
break;
case "上":
headNode.style.top=parseInt(headNode.style.top)-25+"px";
break;
case "下":
headNode.style.top=parseInt(headNode.style.top)+25+"px";
break;
}
//离开地图,撞墙
if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>975
||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>475){
clearInterval(t);
alert("撞墙了,Game Over!");
}
//吃到自己的身体
if(bodyarr.length>0){
for(var i=0;i<bodyarr.length;i++){
if(bodyarr[i].style.left==headNode.style.left&&bodyarr[i].style.top==headNode.style.top){
clearInterval(t);
alert("咬到身体了,Game Over!");
break;
}
}
}
//碰撞检测 即：两个元素重合
//吃到食物,身体加一
if(headNode.style.left==foodNode.style.left&&headNode.style.top==foodNode.style.top){
var bodyNode=createDiv("yellow");
var lastNode;
if(bodyarr.length>0){
lastNode=bodyarr[bodyarr.length-1];
}
else{
lastNode=headNode;
}
switch(lastNode.value){
case "左":
bodyNode.style.left=parseInt(lastNode.style.left)+25+"px";
bodyNode.style.top=lastNode.style.top;
break;
case "右":
bodyNode.style.left=parseInt(lastNode.style.left)-25+"px";
bodyNode.style.top=lastNode.style.top;
break;
case "上":
bodyNode.style.top=parseInt(lastNode.style.top)+25+"px";
bodyNode.style.left=lastNode.style.left;
break;
case "下":
bodyNode.style.top=parseInt(lastNode.style.top)-25+"px";
bodyNode.style.left=lastNode.style.left;
break;
}
bodyNode.value=lastNode.value;
bodyarr.push(bodyNode);
nodes.push(bodyNode);
//得分增加
$("#score").text(parseInt($("#score").text())+10);
//更新食物位置,防止食物与蛇重合
var x=parseInt(Math.random()*10)*25;
var y=parseInt(Math.random()*10)*25;
for(var i=0;i<nodes.length;i++){
if(parseInt(nodes[i].style.left)==x&&parseInt(nodes[i].style.top)==y){
x=parseInt(Math.random()*10)*25;
y=parseInt(Math.random()*10)*25;
i=-1;
}
}
foodNode.style.left=x+"px";
foodNode.style.top=y+"px";
}
}
//通过键盘的按键，来改变蛇头的移动方向
//不同的键值对应不同的键
$(document).keydown(function(e){ //e表示事件对象
//console.log(e.keyCode);
switch(e.keyCode){
case 37:
headNode.value="左"
break;
case 39:
headNode.value="右"
break;
case 38:
headNode.value="上"
break;
case 40:
headNode.value="下"
break;
}
})
//对按钮实现相关功能
$("#quickBtn").click(function(){
t=setInterval(move,100);
})
$("#midBtn").click(function(){
t=setInterval(move,500);
})
$("#slowBtn").click(function(){
t=setInterval(move,2000);
})
$("#restart").click(function(){
location.reload();
})
})
大佬不妨留个赞再走呗。
