利用js制作简单的贪吃蛇游戏
首先，我们先来分析一下整个页面的构成。一看可知，游戏框内是一个盒子里面有许多的小方块，我们可以利用 ul和li标签来制作蛇和食物。右侧就是简单的 2个p标签·一个select标签· 2个input标签而已。代码如下
最佳历史纪录:0
当前长度:0
因为我们需要很多的小格子，所以 li标签 我们将用利用js里的for循环来创建，这样会使我们的代码量减少，减轻我们的工作量，我们在介绍js代码会详细介绍，现在先不多说。我们接下来要为html文档加上样式，因为代码比较简单，所以我们可以将样式随意写在什么地方。css代码如下：
*{ margin: 0; padding: 0;}input{ outline: none; margin: auto; } .box{ width: 3.2rem; margin: auto; float: left;}.oul{ width: 3.14rem; height: 3.14rem; border:0.03rem solid peru;}.oul li{ list-style: none; width: 5%; height: 5%; float: left;}.box1{ width: 2rem; height: 1rem; padding-top: 0.3rem; font-size: 0.2rem; margin: auto; float: left;}#level{ width: 100%; height: 0.4rem;}#ls{ color:paleturquoise; margin-left: 0.1rem;}#dqcd{ color:paleturquoise; margin-left: 0.01rem;}#btn1{ width: 50%; height:0.3rem; margin-left: 0.4rem; margin-top: 0.2rem; background: palegreen; color: #fff; }#btn2{ width: 50%; height: 0.3rem; margin-left: 0.4rem; margin-top: 0.2rem; background: palegreen; color: #fff;} 因为我们需要兼容移动端设备和pc端设备，所以我们需要在css前加上媒体查询样式，并且在使用单位时，需要用到rem而不是px。
媒体查询代码如下：@media screen and (min-width: 320px) { html { font-size: 100px; } } @media screen and (min-width: 360px) {html { font-size: 113px; } } @media screen and (min-width: 375px) {html { font-size: 117px; } }@media screen and (min-width: 384px) {html { font-size: 120px; } } @media screen and (min-width: 412px) {html { font-size: 128px; } }@media screen and (min-width: 414px) {html { font-size: 129px; } }@media screen and (min-width: 440px) {html { font-size: 138px; } }@media screen and (min-width: 480px) {html { font-size: 150px; } } 上面我们已经将基本样式都写好，下面我们就要编辑js代码
因为我们需要兼容移动端设备，而现在的移动设备大多数没有键盘，所以我们需要引入一些库来支持手指划动，比如 bammer.js或者touch.js等等。我们这里使用的是touch.js。在上面，我们并没有在html文档中建立 li标签，所以我们需要在js里建立，利用for循环：
var oul = document.getElementById("oul"); var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");var bgaudio = document.getElementById("bgaudio");var si = document.getElementById("go");var chi = document.getElementById("chi");var dqcd = document.getElementById("dqcd");var ls = document.getElementById("ls");var level = document.getElementById("level");// 首先我们先获取各个标签的id，在后面会用到 var ox = document.createDocumentFragment();function ab (){ for(var i = 0 ; i<400 ; i++){ var oli = document.createElement("li") ox.appendChild(oli) }}ab();oul.appendChild(ox); 如果你建立后看的不直观，你可以给 li标签 一个边框，以便于观看，由于我们需要看到每一个小格子的索引，所以我们在循环内添加（oli.innerHTML = i），我们就可以清楚的看到每一个格子的索引值。
建立了游戏外边框后，我们开始建立蛇的身体和蛇的食物。在每一次的刷新后，我们会发现蛇身体和食物的颜色都会随机变化，所以我们需要建立一个随机颜色的函数,在每一次使用时直接调用就可以了。
function co (){ return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"} 建立蛇身，蛇身长五，所以我们初始化一个变量,然后利用for循环建立
var snk = [];snk = oul.children;var snkbody = [];var ox = document.createDocumentFragment();for(var i=0;i<5;i++){ snkbody.push({pos:i,color:co()})}// 创建蛇身function cd (){ for(var j=0,l=snkbody.length;j 然后我们为你为蛇建立食物，但是我们需要注意食物不能与蛇身在初始化到一起，所以我们需要如下代码：
var food = [{pos:0,color:"red"}];function isin (index){ for(var j=0,l=snkbody.length;j 下面我们就需要让蛇动起来
var snkh = snkbody.slice(-1)[0].pos;var snkw = snkbody.slice(0,1)[0].pos;// 获取蛇头蛇尾位置for(var k=0,l=snkbody.length;k
然而我们像现在发现蛇虽然会走了，但是蛇尾的颜色并不会改变，所以我们还需要将蛇尾的颜色改变。
snk[snkw].style.background=0;
如果我们需要改变蛇的前进方向，我们需要清楚我们的设备，如果是移动设备，我们需要使用手指滑动方法，如果是pc设备，我们需要识别按键，所以我就使用了获取body.width的方法，如果大于1024，即识别为pc端，否则为移动端。
var bodywid = document.body.offsetWidth;if(bodywid>1024){ document.addEventListener("keydown",function(e){ e=e||window.event; switch(e.keyCode){ case 37:{ // left if(fxg==39)return false; fxg=e.keyCode; break; } case 38:{ if(fxg==40)return false; fxg=e.keyCode; break; // up } case 39:{ if(fxg==37)return false; fxg=e.keyCode; break; // right } case 40:{ if(fxg==38)return false; fxg=e.keyCode; break; // down } } },false); // 识别按键}else{ oul.touch({ swipeLeft:function(){ kkk(37) }, swipeRight:function(){ kkk(39) }, swipeUp:function(){ kkk(38) }, swipeDown:function(){ kkk(40) }, }); // 划动改变函数kkk的值，使蛇改变方向 function kkk (e){ switch(e){ case 37:{ // left if(fxg==39)return false; fxg=e; break; } case 38:{ if(fxg==40)return false; fxg=e; break; // up } case 39:{ if(fxg==37)return false; fxg=e; break; // right } case 40:{ if(fxg==38)return false; fxg=e; break; // down } } } // 39：右 1：40 2：37 3：38}if(fxg==40){ snkbody[l-1].pos=snkbody[l-1].pos+20; }else if(fxg==37){ snkbody[l-1].pos=snkbody[l-1].pos-1; } else if(fxg==38){ snkbody[l-1].pos=snkbody[l-1].pos-20; } else if(fxg==39){ snkbody[l-1].pos=snkbody[l-1].pos+1; }// 根据我们的索引可以看出，向下就是依次+20，向上就是-20，向左就是-1，向右就是+1，所以我们在按键之后改变蛇头的方向即可 我们的蛇现在就可以走了，我们还想让他能够吃到食物
if(snkh==food.pos){ snkbody.unshift({pos:snkw,color:food.color}); // 将食物放到蛇尾 snkfood(); // 再次刷新食物 chi.play(); // 播放吃食物音效 var snkbodycd = snkbody.length-5; // 获取分数 dqcd.innerText=snkbodycd; // 刷新当前分数} 我们在平时玩贪吃蛇的时候，碰壁也会死亡，所以我们还需要做一下碰壁处理
// 我们的小格子边框是20个，所以我们要在全局建立个数变量var geshu = 20;// 之后根据索引找出各个边框处小格子的规律，并且识别蛇头方向，进行碰壁处理var fxg = 39;// 初始化方向为向右if((snkh+1)%geshu==0&&fxg==39){ sile(); }else if(snkh>=400-geshu&&fxg==40){ sile(); }else if(snkh%geshu==0&&fxg==37){ sile(); }else if(snkh 我们在识别完墙壁后，我们还需要识别自己，让蛇撞上自己之后，也会死亡。
for(var i =0,l=snkbody.length;i
这样我们的贪吃蛇游戏已经完成了大半
下面就是我们将制作点击按钮和暂停按钮btn1.onclick=function(){ sudu = level.value // 设置速度 clearInterval(ddd) // 首先清除定时器，防止多次点击定时器冲突 ddd=setInterval(function(){ fzhs (); },sudu) // 将以上蛇开始运动的代码放入一个名为fzhs的代码中循环 bgaudio.play(); // 播放背景音乐}// 点击开始btn2.onclick=function(){ clearInterval(ddd); // 清除定时器 bgaudio.pause(); // 声音暂停} 在蛇死亡后，还需要死亡音效，弹出框，页面刷新
function sile(){ var l = snkbody.length-5; // 计算蛇吃了几个食物 var score = localStorage.getItem("score") if(l>score){ localStorage.setItem("score",l) } // 如果当前分数大于历史最高分数，我们要将历史最高分数设置为当前分数 si.play(); // 播放死亡音乐 alert("GameOver"); // 弹出GameOver location.reload(); 页面刷新 return false; } 我们还需要设置历史最高分数
var score = localStorage.getItem("score")||0;ls.innerHTML = score; 这样一个贪吃蛇小游戏就做完了，你还可以对样式和js进行改进，并告诉我，让我们共同进步！！！
最后，我的github游戏奉上，希望你喜欢。