<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } .show { width: 400px; margin: 100px auto 0px; } .game { width: 400px; height: 400px; background-color: aqua; position: relative; } .userGame { width: 10px; height: 10px; background-color: #000; position: absolute; top: 0px; left: 0px; } .foot { width: 10px; height: 10px; background-color: red; position: absolute; top: 0px; left: 0px; } </style> </head> <body> <div class="show"> <div class="game"> <div class="foot"></div> <div class="userGame" style="background-color: gold; z-index: 99;"></div> </div> <h1>小蛇长度: <span>1</span> </h1> </div> </body> </html> <script src="./../jquery-3.4.1/jquery_3.4.1.js"></script> <script> $(function () { //记录蛇身体小点的位置 let seatList = [{ "top": 0, "left": 0 }]; //产生事物小点并记录 let footSeat = foot(seatList); //上次操作的方向 //初始向右移动 let direction_before = 39; //上次操作的反方向，避免回头操作 let direction_before_no = 37; //游戏结束标识符(id) let gameFlag = null; gameFlag = window.setInterval(function () { //获得小蛇头部的位置xy坐标 let seat_x = parseInt($(".userGame").eq(0).css("left")); let seat_y = parseInt($(".userGame").eq(0).css("top")); //是否回头操作判断 //判断键盘输入的信息方向键 switch (direction_before) { case 37://上 seat_x -= 10; break; case 38://右 seat_y -= 10; break; case 39://下 seat_x += 10; break; case 40://左 seat_y += 10; break; } //边界移动判断 if (seat_x < 0) seat_x = 390; if (seat_x > 390) seat_x = 0; if (seat_y < 0) seat_y = 390; if (seat_y > 390) seat_y = 0; //将小蛇移动后头部信息添加进蛇身体小点集合中(假设吃到事物) seatList.unshift({ "top": seat_y, "left": seat_x }); //判断是否吃到事物 if (seat_x == footSeat.left & seat_y == footSeat.top) { //添加新的小点 $(".game").append("<div class='userGame'></div>"); //生成新的食物点 footSeat = foot(seatList); //小蛇长度加1 $("span").html(parseInt($("span").text()) + 1); } else { //如果没有吃到事物就删除最后一个小点 seatList.pop(); } //给小蛇的每个点赋予新的位置信息 let userGamelength = $(".userGame").length; for (let i = 0; i < userGamelength; i++) { $(".userGame").eq(i).css({ "top": seatList[i].top + "px", "left": seatList[i].left + "px" }); } //判断是否结束，吃到自己的身体及游戏是否结束 for (let i = 1; i < userGamelength; i++) { if (seat_x == seatList[i].left & seat_y == seatList[i].top) { window.clearInterval(gameFlag); $("h1").html("游戏结束！小蛇长度为:" + $("span").text()); } } }, 100); //移动键盘事件 $(document).keydown(function (event) { //是否回头操作判断 if (event.keyCode != direction_before_no) { //判断键盘输入的信息方向键 switch (event.keyCode) { case 37://上 direction_before = 37; break; case 38://右 direction_before = 38; break; case 39://下 direction_before = 39; break; case 40://左 direction_before = 40; break; } //上次操作记录反方向 switch (event.keyCode) { case 37://上 direction_before_no = 39; break; case 38://右 direction_before_no = 40; break; case 39://下 direction_before_no = 37; break; case 40://左 direction_before_no = 38; break; } } }); }); //事物生成函数 function foot(seatList) { //事物的位置信息 let foot_seat_x = -10; let foot_seat_y = -10; //生成事物，且不能与小蛇身体重合 let userGamelength = seatList.length; for (let i = 0; i < userGamelength; i++) { do { foot_seat_x = Math.floor(Math.random() * 40) * 10; foot_seat_y = Math.floor(Math.random() * 40) * 10; if (foot_seat_x == seatList[i].left & foot_seat_y == seatList[i].top) { i = 0; } else { break; } } while (true); } //事物位置改变 $(".foot").css({ "top": foot_seat_y + "px", "left": foot_seat_x + "px" }); //返回事物位置信息 return { "top": foot_seat_y, "left": foot_seat_x }; } </script>
！！！！！需要导入jquery文件使用