一、面向对象-贪吃蛇
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Document</title>
</head>
<body>
<button>按钮</button>
</body>
<script type="text/javascript">
var timerId;
document.querySelector("button").onclick = function () {
timerId = setInterval(() => {
s.move();
}, 100);
};
function Map() {
this.map = document.createElement("div");
setStyle(this.map, {
width: "800px",
height: "500px",
background: "pink",
border: "2px solid #000",
position: "relative",
});
document.body.appendChild(this.map);
}
var m = new Map();
function Food() {
this.food = document.createElement("div");
setStyle(this.food, {
width: "10px",
height: "10px",
background: "blue",
position: "absolute",
left: parseInt(getRandom(0, m.map.clientWidth - 10) / 10) * 10 + "px",
top: parseInt(getRandom(0, m.map.clientHeight - 10) / 10) * 10 + "px",
});
m.map.appendChild(this.food);
}
var f = new Food();
function Snake() {
this.body = [
{
x: 0,
y: 0,
},
{
x: 10,
y: 0,
},
{
x: 20,
y: 0,
},
];
this.direction = "right";
this.changeDirection();
this.show();
}
Snake.prototype.changeDirection = function () {
document.onkeypress = (e) => {
var e = e || window.event;
var code = e.keyCode || e.which;
switch (code) {
case 119:
this.direction = "up";
break;
case 115:
this.direction = "down";
break;
case 97:
this.direction = "left";
break;
case 100:
this.direction = "right";
break;
}
};
};
Snake.prototype.move = function () {
console.log(this.direction);
for (var i = 0; i < this.body.length - 1; i++) {
this.body[i].x = this.body[i + 1].x;
this.body[i].y = this.body[i + 1].y;
}
switch (this.direction) {
case "up":
this.body[this.body.length - 1].y -= 10;
break;
case "down":
this.body[this.body.length - 1].y += 10;
break;
case "left":
this.body[this.body.length - 1].x -= 10;
break;
case "right":
this.body[this.body.length - 1].x += 10;
break;
}
this.show();
this.eat();
this.die();
};
Snake.prototype.die = function () {
if (
this.body[this.body.length - 1].x > m.map.clientWidth ||
this.body[this.body.length - 1].x < 0 ||
this.body[this.body.length - 1].y < 0 ||
this.body[this.body.length - 1].y > m.map.clientHeight
) {
clearInterval(timerId);
alert("GAME OVER");
s = new Snake();
}
for (var i = 0; i < this.body.length - 1; i++) {
if (
this.body[i].x === this.body[this.body.length - 1].x &&
this.body[i].y === this.body[this.body.length - 1].y
) {
clearInterval(timerId);
alert("GAME OVER");
s = new Snake();
}
}
};
Snake.prototype.eat = function () {
if (
this.body[this.body.length - 1].x === f.food.offsetLeft &&
this.body[this.body.length - 1].y === f.food.offsetTop
) {
var oneBody = {
x: this.body[0].x,
y: this.body[0].y,
};
this.body.unshift(oneBody);
this.show();
f.food.parentElement.removeChild(f.food);
f = new Food();
}
};
Snake.prototype.show = function () {
var snakes = m.map.querySelectorAll(".snake");
if (snakes.length !== 0) {
for (var i = 0; i < snakes.length; i++) {
snakes[i].parentElement.removeChild(snakes[i]);
}
}
for (var i = 0; i < this.body.length; i++) {
var div = document.createElement("div");
div.className = "snake";
setStyle(div, {
width: "10px",
height: "10px",
background: "#0f0",
position: "absolute",
left: this.body[i].x + "px",
top: this.body[i].y + "px",
});
if (i === this.body.length - 1) {
div.style.background = "red";
}
m.map.appendChild(div);
}
};
var s = new Snake();
function setStyle(ele, styleObj) {
for (var attr in styleObj) {
ele.style[attr] = styleObj[attr];
}
}
function getRandom(min, max) {
if (min > max) {
var tmp = min;
min = max;
max = tmp;
}
return parseInt(Math.random() * (max - min) + 1);
}
</script>
</html>