分析
蛇：每隔一段时间移动一点距离，就是每隔一会儿就重新加载显示蛇的身体
蛇的组成：由多个小div组成每一节的身体
蛇的移动：从蛇头开始，每隔一个小div的座标，给下一节身体的座标
方向控制：往右：蛇头的x座标+1，左：蛇头的x座标-1，下，蛇头的y座标+1，上：蛇头的y座标-1.其他身体部分都是以将自己的座标给下一个身体
键盘事件：控制上下左右
食物：显示 被吃 消失 再显示
地图：显示蛇、食物，有一定的区域
分3个对象
蛇：身体组成部分，显示身体方法 吃食物，死亡方法
地图：创建地图
食物：组成部分，显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<button id="btn">开始</button>
<span>分数:<b>0</b></span>
</body>
<script>
// 点击开始按钮
document.querySelector('#btn').onclick = function () {
snake.timer = setInterval(function () {
snake.move()
}, 200)
}
//设置样式
function setStyle(ele, setObj) {
for (var attr in setObj) {
ele.style[attr] = setObj[attr]
}
}
//获取随机数
function getRandom(a, b) {
var max = Math.max(a, b)
var min = Math.min(a, b)
return parseInt(Math.random() * (max - min)) + min;
}
//获取随机颜色
function getColor() {
return `rgb(${getRandom(0, 256)},${getRandom(0, 256)},${getRandom(0, 256)})`
}
// 创建地图
function Map() {
this.map = document.createElement('div')
setStyle(this.map, {
width: '800px',
height: '400px',
border: '5px solid #ccc',
backgroundColor: '#abcdef',
position: "relative",
})
// 将地图放入body里
document.body.appendChild(this.map)
}
var map = new Map();
//食物
function Food() {
this.food = document.createElement("div");
setStyle(this.food, {
width: "10px",
height: "10px",
backgroundColor: "red",
position: "absolute",
left: parseInt(getRandom(0, map.map.clientWidth - 10) / 10) * 10 + "px",
top: parseInt(getRandom(0, map.map.clientHeight - 10) / 10) * 10 + "px"
});
// 将食物放到地图中
map.map.appendChild(this.food);
}
var food = new Food()
// 蛇
function Snake() {
// 身体的组成部分 用数组存放
this.body = [
{
x: 20,
y: 0,
},
{
x: 10,
y: 0,
},
{
x: 0,
y: 0,
}
];
// 分数
this.score = 0;
// 蛇移动的方向
this.direction = 'right';
// 定时器
this.timer = null;
// 设置开关
this.flag = true;
// 监听键盘事件
var that = this;
document.onkeypress = e => {
var e = e || window.event;
var keycode = e.keyCode || e.which;
console.log(keycode); // 119 115 97 100
switch (keycode) {
case 119:
this.direction = "up";
break;
case 115:
this.direction = "down";
break;
case 97:
this.direction = "left";
break;
case 100:
this.direction = "right"
break;
}
}
// 让蛇显示
this.show()
}
// 死亡现场
Snake.prototype.die = function () {
// 撞墙
if (this.body[0].x < 0 || this.body[0].y < 0 || this.body[0].x >= map.map.clientWidth || this.body[0].y >= map.map.clientHeight) {
alert("死亡");
this.flag = false;
clearInterval(this.timer)
}
// 撞自己的身体 判断蛇头是否和其他身体的座标一致
for (var i = 1; i < this.body.length; i++) {
if (this.body[i].x == this.body[0].x && this.body[i].y == this.body[0].y) {
alert("死亡");
this.flag = false;
clearInterval(this.timer)
}
}
}
// 吃食物
Snake.prototype.eat = function () {
//蛇头的座标和食物座标一致被吃
if (this.body[0].x == food.food.offsetLeft && this.body[0].y == food.food.offsetTop) {
// 吃到了 - 让食物消失、创建新的食物
// 从地图中将这个食物删掉
map.map.removeChild(food.food);
// 创建新食物
food = new Food();//赋值给对象food 而不是他的属性food.food
// g给身体加一节
this.body.push({
x: this.body[this.body.length - 1].x,
y: this.body[this.body.length - 1].y
})
this.score++;
console.log(this.score);
document.querySelector("span b").innerHTML = this.score;
}
}
// 蛇的移动
Snake.prototype.move = function () {
// 根据方向移动
// 让蛇的每一节身体的座标给到下一节就好
for (var i = this.body.length - 1; i > 0; i--) {
// this.body[i] = this.body[i-1];
// this.body[i] === 这是一个对象 ，对象的赋值就是将地址复制给另一个变量
this.body[i].x = this.body[i - 1].x;
this.body[i].y = this.body[i - 1].y;
}
// 根据方向进行移动 - 设置蛇头的座标
switch (this.direction) {
case "right":
this.body[0].x += 10;
break;
case "left":
this.body[0].x -= 10;
break;
case "up":
this.body[0].y -= 10;
break;
case "down":
this.body[0].y += 10;
break;
}
// 将移动后的身体座标展示出来
if (this.flag) {
this.show();
this.die();
this.eat();
}
}
// 蛇要显示的方法
Snake.prototype.show = function () {
// 倒着删除身体
// 获取地图中原来的身体div
var snakes = document.querySelectorAll('.snake');
if (snakes.length != 0) {
for (var i = snakes.length - 1; i >= 0; i--) {
map.map.removeChild(snakes[i]);
}
}
// 通过遍历创建身体
// 遍历body属性
for (var i = 0; i < this.body.length; i++) {
var div = document.createElement("div");
div.className = "snake"
setStyle(div, {
width: "10px",
height: "10px",
background: "#000",
position: "absolute",
left: this.body[i].x + "px",
top: this.body[i].y + "px"
});
if (i == 0) {
setStyle(div, {
background: "red",
borderRadius: "50%"
})
}
// 将创建好的每一节蛇的身体放到地图中
map.map.appendChild(div)
}
}
var snake = new Snake()
// console.log(snake);
</script>
</html>