原生js 运用面向对象编程————编写贪吃蛇小游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
function Map() {
this.w = 800;
this.h = 400;
this.c = "#ccc";
this.init();
}
Map.prototype.init = function() {
this.m = document.createElement("div");
this.m.style.cssText = `${this.w}px;height:${this.h}px;background:${this.c};position:relative;margin:100px auto;`;
document.body.appendChild(this.m);
}
// new Map();
function Food() {
this.w = 20;
this.h = 20;
this.c = "yellow";
this.init();
}
Food.prototype = {
constructor: Food,
init: function() {
this.f = document.createElement("div");
this.f.style.cssText = `${this.w}px;height:${this.h}px;background:${this.c};position:absolute;`;
map.m.appendChild(this.f);
this.random();
},
random: function() {
this.x = random(0, map.w / this.w - 1);
this.y = random(0, map.h / this.h - 1);
this.f.style.left = this.x * this.w + "px";
this.f.style.top = this.y * this.h + "px";
}
}
function random(a, b) {
return Math.round(Math.random() * (a - b) + b)
}
function randomColor() {
return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
}
// 蛇对象
function Snake() {
this.w = 20;
this.h = 20;
this.body = [{
x: 6,
y: 3,
c: "lightblue"
}, {
x: 5,
y: 3,
c: "green"
}, {
x: 4,
y: 3,
c: "yellow"
}];
// 方法属性，默认向右走
this.direct = "right";
// 开始创建
this.init()
}
Snake.prototype.init = function() {
for (var i = 0; i < this.body.length; i++) {
if (!this.body[i].s) {
this.body[i].s = document.createElement("div");
this.body[i].s.style.cssText = `${this.w}px;height:${this.h}px;background:${this.body[i].c};position:absolute;`;
map.m.appendChild(this.body[i].s);
}
// 如果已经创建，只能设置位置
this.body[i].s.style.left = this.body[i].x * this.w + "px";
this.body[i].s.style.top = this.body[i].y * this.h + "px";
}
// 给蛇头何蛇尾加标志
this.body[0].s.innerHTML = "0";
this.body[this.body.length - 1].s.innerHTML = "-";
// 延时行走，时间决定难度
setTimeout(function() {
this.move();
}.bind(this), 200)
}
Snake.prototype.move = function() {
// 先让尾巴向前走
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;
}
switch (this.direct) {
case "left":
this.body[0].x -= 1;
break;
case "top":
this.body[0].y -= 1;
break;
case "right":
this.body[0].x += 1;
break;
case "bottom":
this.body[0].y += 1;
}
// 撞到食物：食物的位置更新，蛇节增加一个，放在蛇尾处
if (this.body[0].x == food.x && this.body[0].y == food.y) {
food.random();
var last = {
x: this.body[this.body.length - 1].x,
y: this.body[this.body.length - 1].y
}
this.body.push({
x: last.x,
y: last.y,
c: randomColor()
})
}
// 边界设定
if (this.body[0].x < 0 || this.body[0].y < 0 || this.body[0].x > 39 || this.body[0].y > 19) {
alert("撞墙死");
return;
}
// 撞到自己的身体
for (var i = 1; i < this.body.length; i++) {
if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
alert("自生自灭");
return;
}
}
this.init();
}
Snake.prototype.direction = function(code) {
switch (code) {
case 65:
this.direct = "left";
break;
case 87:
this.direct = "top";
break;
case 68:
this.direct = "right";
break;
case 83:
this.direct = "bottom";
break;
}
}
// 工具类函数
function random(a, b) {
return Math.round(Math.random() * (a - b) + b);
}
function randomColor() {
return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
}
// 创建地图
var map = new Map();
// 创建食物
var food = new Food();
// 创建蛇
var snake = new Snake();
// 根据键盘按下的方向建，绝定蛇的方向
document.onkeydown = function(eve) {
var e = eve || window.event;
var code = e.keyCode || e.which;
snake.direction(code)
}
</script>
</html>