<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 700px;
color: rgb(232, 149, 240);
background-image: url(./xingkong.gif);
background-position: center;
background-size: 350px;
position: relative;
}
.start,.zanTing{
width: 250px;
height: 80px;
background-position: center;
position: absolute;
left: 545px;
top: 260px;
border-radius: 40px;
background-image: url(./start.jpg);
background-size: 276px;
}
.zanTing{
height: 155px;
width: 150px;
position: absolute;
left: 592px;
top: 226px;
background-position: center;
background-image: url(./zt.jpg);
background-size: 194px 251px;
border: none;
display: none;
}
</style>
</head>
<body>
<header id="map"></header>
<button class="start"></button>
<button class="zanTing"></button>
</body>
</html>
<script>
var position = "absolute";
var map1 = document.getElementById("map");
// 食物 宽高 位置 X Y 颜色
function Food(
width = 10,
height = 10,
X = 0,
Y = 0,
backgroundColor = "gold"
) {
this.width = width;
this.height = height;
this.X = X;
this.Y = Y;
this.backgroundColor = backgroundColor;
}
// 随机 渲染
Food.prototype.renderFood = function (map) {
var maxX = map.offsetWidth - this.width;
var maxY = map.offsetHeight - this.height;
var div = document.createElement("div");
div.style.position = "absolute";
div.style.width = this.width + "px";
div.style.height = this.height + "px";
// 随机位置 显示
// 随机食物的位置,map.宽度/food.宽度,总共有多少分food的宽度,随机一下。然后再乘以food的宽度
this.X =
parseInt((Math.random() * map.offsetWidth) / this.width) * this.width;
this.Y =
parseInt((Math.random() * map.offsetHeight) / this.height) * this.height;
div.style.left = this.X + "px";
div.style.top = this.Y + "px";
div.style.backgroundColor = this.backgroundColor;
div.style.borderRadius="50%";
this.foodDom = div;
map.appendChild(div);
};
var food1 = new Food(20, 20, 0, 0, "rgb(253, 0, 76)");
food1.renderFood(map1);
// 蛇的对象 宽 高 left top 蛇身(数组 对象(X,Y,颜色color))
function Snake(width = 10, height = 10, direction) {
this.width = width;
this.height = height;
// 用来保留蛇的dom元素
this.bodyDom = [];
this.direction = "right";
this.body = [
{ X: 2, Y: 1, backgroundColor: "gold" },
{ X: 1, Y: 1, backgroundColor: "rgb(232, 149, 240)" },
{ X: 0, Y: 1, backgroundColor: "rgb(232, 149, 240)" },
];
}
Snake.prototype.renderSnake = function (map) {
for (var i = 0; i < this.body.length; i++) {
var div = document.createElement("div");
div.style.position = "absolute";
div.style.height = this.height + "px";
div.style.width = this.width + "px";
div.style.borderRadius="50%";
div.style.left = this.body[i].X * this.width + "px";
div.style.top = this.body[i].Y * this.height + "px";
div.style.backgroundColor = this.body[i].backgroundColor;
// 保留蛇dom
this.bodyDom.push(div);
map.appendChild(div);
}
};
Snake.prototype.moveSnake = function (food, map) {
console.log(this.body[0].X);
// 如果蛇头超届死亡
if (
this.body[0].X < 0 ||
this.body[0].X >= map.offsetWidth / this.width ||
this.body[0].Y < 0 ||
this.body[0].Y >= map.offsetHeight / this.height
) {
clearInterval(timer1);
alert("结束游戏啦!");
}
// 如果蛇头和食物重合,则蛇身加一
var lastBody = this.body[this.body.length - 1];
if (
this.body[0].X == food.X / food.width &&
this.body[0].Y == food.Y / food.height
) {
// 删除旧的食物,生成新的食物
food.foodDom.remove();
food.renderFood(map);
this.body.push({
X: lastBody.X,
Y: lastBody.Y,
backgroundColor: lastBody.backgroundColor,
});
}
// 蛇身移动
var lastBackgroundColor = this.body[this.body.length - 1].backgroundColor;
for (var i = this.body.length - 1; i > 0; i--) {
this.body[i].X = this.body[i - 1].X;
this.body[i].Y = this.body[i - 1].Y;
this.body[i].backgroundColor = lastBackgroundColor;
}
// 蛇头
if (this.direction == "up") {
this.body[0].Y--;
}
if (this.direction == "down") {
this.body[0].Y++;
}
if (this.direction == "left") {
this.body[0].X--;
}
if (this.direction == "right") {
this.body[0].X++;
}
};
// 删除蛇
Snake.prototype.deleteSnake = function () {
for (var i = 0; i < this.bodyDom.length; i++) {
this.bodyDom[i].remove();
}
};
var snake1 = new Snake(20, 20);
console.log(snake1.bodyDom);
// 监听键盘事件
document.addEventListener("keypress", function (event) {
var event = event || window.event;
// a是97 方向是左
if (event.keyCode == 97) {
snake1.direction = "left";
}
if (event.keyCode == 119) {
snake1.direction = "up";
}
if (event.keyCode == 100) {
snake1.direction = "right";
}
if (event.keyCode == 115) {
snake1.direction = "down";
}
console.log(snake1.direction);
});
//点击开始
var timer1
var start = document.getElementsByClassName("start")[0]
start.onclick = function(){
start.style.display = "none"
snake1.renderSnake(map1);
timer1 = setInterval(function () {
snake1.deleteSnake();
snake1.moveSnake(food1, map1);
snake1.renderSnake(map1);
}, 100);
}
//双击暂停
var zanTing = document.getElementsByClassName("zanTing")[0]
window.ondblclick = function(){
zanTing.style.display = "block"
clearInterval(timer1)
}
zanTing.onclick = function(){
zanTing.style.display = "none"
snake1.renderSnake(map1);
timer1 = setInterval(function () {
snake1.deleteSnake();
snake1.moveSnake(food1, map1);
snake1.renderSnake(map1);
}, 150);
}
// var position = "absolute";
// var map1 = document.getElementById("map");
// // 食物 宽高 位置 X Y 颜色
// function Food(
// width = 10,
// height = 10,
// X = 0,
// Y = 0,
// backgroundColor = "gold"
// ) {
// this.width = width;
// this.height = height;
// this.X = X;
// this.Y = Y;
// this.backgroundColor = backgroundColor;
// }
// // 随机 渲染
// Food.prototype.renderFood = function (map) {
// var maxX = map.offsetWidth - this.width;
// var maxY = map.offsetHeight - this.height;
// var div = document.createElement("div");
// div.style.position = "absolute";
// div.style.width = this.width + "px";
// div.style.height = this.height + "px";
// // 随机位置 显示
// // 随机食物的位置,map.宽度/food.宽度,总共有多少分food的宽度,随机一下。然后再乘以food的宽度
// this.X =
// parseInt((Math.random() * map.offsetWidth) / this.width) * this.width;
// this.Y =
// parseInt((Math.random() * map.offsetHeight) / this.height) * this.height;
// div.style.left = this.X + "px";
// div.style.top = this.Y + "px";
// div.style.backgroundColor = this.backgroundColor;
// div.style.borderRadius="50%";
// this.foodDom = div;
// map.appendChild(div);
// };
// var food1 = new Food(20, 20, 0, 0, "rgb(253, 0, 76)");
// food1.renderFood(map1);
// // 蛇的对象 宽 高 left top 蛇身(数组 对象(X,Y,颜色color))
// function Snake(width = 10, height = 10, direction) {
// this.width = width;
// this.height = height;
// // 用来保留蛇的dom元素
// this.bodyDom = [];
// this.direction = "right";
// this.body = [
// { X: 2, Y: 1, backgroundColor: "gold" },
// { X: 1, Y: 1, backgroundColor: "rgb(232, 149, 240)" },
// { X: 0, Y: 1, backgroundColor: "rgb(232, 149, 240)" },
// ];
// }
// Snake.prototype.renderSnake = function (map) {
// for (var i = 0; i < this.body.length; i++) {
// var div = document.createElement("div");
// div.style.position = "absolute";
// div.style.height = this.height + "px";
// div.style.width = this.width + "px";
// div.style.borderRadius="50%";
// div.style.left = this.body[i].X * this.width + "px";
// div.style.top = this.body[i].Y * this.height + "px";
// div.style.backgroundColor = this.body[i].backgroundColor;
// // 保留蛇dom
// this.bodyDom.push(div);
// map.appendChild(div);
// }
// };
// Snake.prototype.moveSnake = function (food, map) {
// console.log(this.body[0].X);
// // 如果蛇头超届死亡
// if (
// this.body[0].X < 0 ||
// this.body[0].X >= map.offsetWidth / this.width ||
// this.body[0].Y < 0 ||
// this.body[0].Y >= map.offsetHeight / this.height
// ) {
// clearInterval(timer1);
// alert("结束游戏啦!");
// }
// // 如果蛇头和食物重合,则蛇身加一
// var lastBody = this.body[this.body.length - 1];
// if (
// this.body[0].X == food.X / food.width &&
// this.body[0].Y == food.Y / food.height
// ) {
// // 删除旧的食物,生成新的食物
// food.foodDom.remove();
// food.renderFood(map);
// this.body.push({
// X: lastBody.X,
// Y: lastBody.Y,
// backgroundColor: lastBody.backgroundColor,
// });
// }
// // 蛇身移动
// var lastBackgroundColor = this.body[this.body.length - 1].backgroundColor;
// for (var i = this.body.length - 1; i > 0; i--) {
// this.body[i].X = this.body[i - 1].X;
// this.body[i].Y = this.body[i - 1].Y;
// this.body[i].backgroundColor = lastBackgroundColor;
// }
// // 蛇头
// if (this.direction == "up") {
// this.body[0].Y--;
// }
// if (this.direction == "down") {
// this.body[0].Y++;
// }
// if (this.direction == "left") {
// this.body[0].X--;
// }
// if (this.direction == "right") {
// this.body[0].X++;
// }
// };
// // 删除蛇
// Snake.prototype.deleteSnake = function () {
// for (var i = 0; i < this.bodyDom.length; i++) {
// this.bodyDom[i].remove();
// }
// };
// var snake1 = new Snake(20, 20);
// console.log(snake1.bodyDom);
// // 监听键盘事件
// document.addEventListener("keypress", function (event) {
// var event = event || window.event;
// // a是97 方向是左
// if (event.keyCode == 97) {
// snake1.direction = "left";
// }
// if (event.keyCode == 119) {
// snake1.direction = "up";
// }
// if (event.keyCode == 100) {
// snake1.direction = "right";
// }
// if (event.keyCode == 115) {
// snake1.direction = "down";
// }
// console.log(snake1.direction);
// });
// snake1.renderSnake(map1);
// var timer1 = setInterval(function () {
// snake1.deleteSnake();
// snake1.moveSnake(food1, map1);
// snake1.renderSnake(map1);
// }, 100);
</script>