分析
蛇：每隔一段時間移動一點距離，就是每隔一會兒就重新加載顯示蛇的身體
蛇的組成：由多個小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>