贪吃蛇小游戏
作者：互联网
<!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 () {
//获得小蛇头部的位置x\y坐标
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文件使用
标签：seatList,seat,break,小游戏,let,贪吃蛇,foot,before 来源： https://www.cnblogs.com/-Archenemy-/p/12535572.html