爱站程序员基地一个使用JQuery，CSS写成的一个贪吃蛇小游戏，还有很多问题待改进，就目前而言已经尽我最大可能写了成了这样，以后有机会我会回头再来完善它。
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Curtain</title><style>body {background-image: linear-gradient(#ff0092, #fff900);background-size: auto 200%;background-position: 0 100%;transition: background-position 0.5s;text-align: center;height: 1500px;font-family: Monaco;}body:hover {background-position: 0 0;}#name {font-size: 200px;font-weight: 900;color: #8c888b;background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);-moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);-ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);color: transparent;/*设置字体颜色透明*/-webkit-background-clip: text;/*背景裁剪为文本形式*/animation: ran 10s linear infinite;/*动态10s展示*/}#boundary {position: relative;bottom: 800px;background-image: linear-gradient(to right, #9e00ff 0%, #e900e0 100%);height: 1500px;width: 1500px;margin: 0 auto;border-radius: 15px 15px 15px 15px;}#menu {position: relative;top: 400px;left: 15%;width: 400px;height: 1000px;border-radius: 25px 25px 25px 25px;background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);}#start {top: 700px;position: absolute;right: 110px;font-size: 40px;border-radius: 5%;background-color: lightcyan;border-radius: 15px 15px 15px 15px;}#newGame {top: 800px;position: absolute;right: 110px;font-size: 40px;border-radius: 5%;background-color: lightcyan;border-radius: 15px 15px 15px 15px;}#menu>span {top: 100px;position: absolute;right: 110px;font-size: 40px;border-radius: 5%;}#d1 {left: 10px;font-weight: 700;}#d2 {font-weight: 800;}.food {position: absolute;height: 50px;width: 50px;transition: opacity 3s ease-in 2s;}#snake>div {position: absolute;height: 50px;width: 50px;transition:all 0.05s ease}#heard {position: absolute;left: 100px;background-color: lightcyan;border-radius: 15px 15px 15px 15px;}#body1 {position: absolute;left: 50px;background-color: #2C3E50;border-radius: 5px 5px 5px 5px;}#body2 {position: absolute;background-color: #2C3E50;border-radius: 5px 5px 5px 5px;}</style><script type=\"application/javascript\" src=\"jquery/jquery-3.3.1.js\"></script><script>//页面加载完寻找头和身体，如果没有则创建$(function () {if($(\"#snake\").length<3){$(\"#snake\").prepend($(\"<div id=\'body2\'></div>\"));$(\"#snake\").prepend($(\"<div id=\'body1\'></div>\"));$(\"#snake\").prepend($(\"<div id=\'heard\'></div>\"));}$(\"#d2\").css(\"color\",\"#00CCFF\");});//开始游戏function startGame() {//随机色函数function randomHexColor() { //随机生成十六进制颜色var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位hex = \'0\' + hex;}return \'#\' + hex; //返回‘#\'开头16进制颜色}//每次移动的距离let lattice=50;let numright=0;//往左增加right值let numtop=0;//往下增加top值let numbottom=0;//往上增加bottom的值let numleft=2;//往右增加left的值// console.log(\"左坐标：\"+$(\"#first\").css(\"left\"));// console.log(\"上坐标：\"+$(\"#first\").css(\"top\"));// console.log(\"右坐标：\"+$(\"#first\").css(\"right\"));// console.log(\"下坐标：\"+$(\"#first\").css(\"bottom\"));// $(\"#heard\").css(\"left\",100+\"px\");document.onkeyup = function() {//键盘弹上事件，考虑到如果持续按下或点击过快都会导致蛇跑出边界//这里的边界我没有做碰到结束游戏，for (let i=$(\"#snake>div\").length-1;i>0;i--) {$(\"#snake>div\").eq(i).css(\"top\",$(\"#snake>div\").eq(i-1).css(\"top\"));$(\"#snake>div\").eq(i).css(\"left\",$(\"#snake>div\").eq(i-1).css(\"left\"));}//获得键盘的ASCII值let keyNum = event.keyCode;//如果按键值为37，并且距离左边界不为0px则可以向左移动，下方同理if(keyNum==37&&$(\"#heard\").css(\"left\")!==\"0px\"){numright++;numleft--;$(\"#heard\").css(\"right\",lattice*numright+\"px\");$(\"#heard\").css(\"left\",lattice*numleft+\"px\");console.log(\"左坐标：\"+$(\"#heard\").css(\"left\"));// console.log(\"上坐标：\"+$(\"#first\").css(\"top\"));// console.log(\"右坐标：\"+$(\"#first\").css(\"right\"));// console.log(\"下坐标：\"+$(\"#first\").css(\"bottom\"));console.log(\"距离初始位置往左移了：\"+$(\"#heard\").css(\"right\"));collision();eat();}if(keyNum==38&&$(\"#heard\").css(\"top\")!==\"0px\"){numbottom++;numtop--;$(\"#heard\").css(\"bottom\",lattice*numbottom+\"px\");$(\"#heard\").css(\"top\",lattice*numtop+\"px\");// console.log(\"左坐标：\"+$(\"#first\").css(\"left\"));// console.log(\"上坐标：\"+$(\"#first\").css(\"top\"));// console.log(\"右坐标：\"+$(\"#first\").css(\"right\"));// console.log(\"下坐标：\"+$(\"#first\").css(\"bottom\"));console.log(\"距离初始位置往上移了：\"+$(\"#heard\").css(\"bottom\"));collision();eat();}if(keyNum==39&&$(\"#heard\").css(\"right\")!==\"-1350px\"){numleft++;numright--;$(\"#heard\").css(\"left\",lattice*numleft+\"px\");$(\"#heard\").css(\"right\",lattice*numright+\"px\");// console.log(\"左坐标：\"+$(\"#first\").css(\"left\"));// console.log(\"上坐标：\"+$(\"#first\").css(\"top\"));// console.log(\"右坐标：\"+$(\"#first\").css(\"right\"));// console.log(\"下坐标：\"+$(\"#first\").css(\"bottom\"));console.log(\"距离初始位置往右移了：\"+$(\"#heard\").css(\"left\"));collision();eat();}if(keyNum==40&&$(\"#heard\").css(\"bottom\")!==\"-1450px\"){numtop++;numbottom--;$(\"#heard\").css(\"top\",lattice*numtop+\"px\");$(\"#heard\").css(\"bottom\",lattice*numbottom+\"px\");// console.log(\"左坐标：\"+$(\"#first\").css(\"left\"));// console.log(\"上坐标：\"+$(\"#first\").css(\"top\"));// console.log(\"右坐标：\"+$(\"#first\").css(\"right\"));// console.log(\"下坐标：\"+$(\"#first\").css(\"bottom\"));console.log(\"距离初始位置往下移了：\"+$(\"#heard\").css(\"top\"));collision();eat();}};//吃食物let num=0;function eat(){//获取所有CLSS为food的对象let food=$(\".food\");// console.log(food);//遍历获得每一个对象for(let i=0;i<food.length;i++){let $food=$(food[i]);// console.log(\"Y:\"+$food.css(\"top\")+\"X:\"+$food.css(\"left\"));//如果该对象的上左坐标与蛇头坐标相同，则证明此事蛇头吃到了食物if($food.css(\"top\")===$(\"#heard\").css(\"top\")&&$food.css(\"left\")===$(\"#heard\").css(\"left\")){console.log($food);//每次吃到则添加一个div进蛇的身体中$(\"#snake\").append(\"<div></div>\");//为此div设置样式，颜色继承该食物//此事注意，需要将创建的div的坐标继承尾巴的位置$(\"#snake>div\").eq($(\"#snake>div\").length-1).css(\"backgroundColor\",$food.css(\"backgroundColor\"));$(\"#snake>div\").eq($(\"#snake>div\").length-1).css(\"top\",$food.css(\"top\"));$(\"#snake>div\").eq($(\"#snake>div\").length-1).css(\"left\",$food.css(\"left\"));$(\"#snake>div\").eq($(\"#snake>div\").length-1).css(\"borderRadius\",\"5px 5px 5px 5px\");//创建完后，执行删除操作，删除食物div$food.remove();//计数，并给计数器赋值num++;$(\"#d2\").text(num);$(\"#d2\").css(\"color\",\"#FC9D99\")}}}//随机生成食物（生成新的食物div），调用随机色，设置样式，每次随机时间setInterval(function () {let numtop=Math.floor(Math.random()*1499+1);let numleft=Math.floor(Math.random()*1499+1);while (numtop%50!=0||numleft%50!=0) {numtop=Math.floor(Math.random()*1499+1);numleft=Math.floor(Math.random()*1499+1);}let $food =$(\"<div class=\'food\'></div>\");$food.css(\"left\",numtop+\"px\");$food.css(\"top\",numleft+\"px\");$food.css(\"borderRadius\",\"50%\");$food.css(\"backgroundColor\",randomHexColor());$(\"#boundary\").append($food)},3000);}//重新开始游戏，刷新页面，游戏失败时也会触发该函数function newGame() {location.reload();}</script></head><body><span id=\"name\">Curtain</span><div ><div id=\"menu\"><input id=\"start\" onmousedown=\"startGame()\" type=\"button\"value=\"开始游戏\"><input id=\"newGame\" onmousedown=\"newGame()\" type=\"button\"value=\"重新开始\"><span id=\"d1\">得分：</span><span id=\"d2\">0</span></div><script>function collision() {let snake=$(\"#snake>div\");for (let i = 4; i < snake.length; i++) {let $snake = $(snake[i]);console.log(\"Y:\" + $snake.css(\"top\") + \"X:\" + $snake.css(\"left\"));if ($snake.css(\"top\") === $(\"#heard\").css(\"top\") && $snake.css(\"left\") === $(\"#heard\").css(\"left\")) {alert(\"GameOver!\"+$(\"#menu>span\").text());location.reload();}}}</script></div><div id=\"boundary\"><div id=\"snake\"></div></div></body></html>
