嘛，先贴上js部分源码吧：
var map = document.getElementsByClassName("map")[0];
var score = 0;
//1、封装食物对象-->函数自调用
((function () {
//存放小方块食物
var elements = [];
//写小方块的构造函数-->宽 高 颜色 x轴和y轴
function Food(width,height,color,x,y) {
//不传参时的默认值
this.width = width || 20;
this.height = height || 20;
this.color = color || 'greenyellow';
this.x = x||0;
this.y = y||0;
this.element = document.createElement('div');
}
//通过原型对象显示小方块
Food.prototype.init = function () {
var div = this.element;
//设置小方块的样式
div.style.position = 'absolute';//脱离标准文档流
div.style.width = this.width+'px';//设置小方块的宽
div.style.height = this.height+'px';//设置小方块的高
div.style.backgroundColor = this.color;//设置小方块的颜色
//设置随机横纵坐标
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放到数组里面
elements.push(div);
map.appendChild(div);
};
//暴露给window
window.Food = Food;
})());
//2、封装小蛇
((function () {
//存放小蛇
var elements = [];
//2、写小蛇的构造函数-->宽 高 方向
function Snake(width, height,direction) {
//设置默认值
this.width = width || 20;
this.height = height || 20;
this.direction = direction || 'right';
this.body = [
{x:3,y:2,color:'red'},
{x:2,y:2,color:'orange'},
{x:1,y:2,color:'orange'}
]
}
//在原型中显示小蛇-->需要地图参数
Snake.prototype.init = function () {
remove();
//通听遍历设置每个部位的样式
for (var i=0;i<this.body.length;i++){
//存放小蛇的每一个部位
var obj = this.body[i]
//2、创建一个div
var div = document.createElement('div');
//3、把div添加到地图上
map.appendChild(div);
//4、设置样式
div.style.position = 'absolute'
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.left = this.width*obj.x+'px';
div.style.top = this.height*obj.y+'px';
div.style.backgroundColor = obj.color;
//5、...
elements.push(div)
}
}
Snake.prototype.move = function(food){
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.direction) {
case 'right':
this.body[0].x+=1;
break;
case 'left':
this.body[0].x-=1;
break;
case 'top':
this.body[0].y-=1;
break;
case 'bottom':
this.body[0].y+=1;
break;
}
//判断方向
//获取蛇头的横纵坐标
var headX = this.body[0].x*this.width;
var headY = this.body[0].y*this.height;
//获取食物的横纵坐标
var foodX = food.x;
var foodY = food.y;
if(headX == foodX && headY == foodY){
//获取小蛇的尾巴
var last = this.body[this.body.length-1];
this.body.push({
x:last.x,
y:last.y,
color:last.color
})
//直接调用显示食物的方法
food.init(map);
score++;
}
}
function remove(){
//先删蛇尾-->遍历数组
for(var i = elements.length-1;i>=0;i--){
//获取对应下标的数组的里面的元素
var ele = elements[i];
//删除地图上面的小蛇
ele.parentNode.removeChild(ele);
//删除数组里面的小蛇
elements.splice(i,1);
}
}
window.Snake = Snake;
})());
//3.封装游戏
((function () {
var that = null;
//1、游戏的构造函数
function Game() {
this.food = new Food();
this.snake = new Snake();
that = this;
console.log(that);
}
//通过原型对象添加方法
Game.prototype.init = function () {
//初始化小蛇和食物
this.food.init(map);
this.snake.init(map);
this.runSnake(this.food,map);
this.fang();
}
//通过原型添加定时器
Game.prototype.runSnake = function(food){
var t = setInterval(function () {
//初始化食物和小蛇
this.snake.move(food,map);
this.snake.init(map);
//获取蛇头坐标
var headX = that.snake.body[0].x;
var headY = that.snake.body[0].y;
//获取地图最大的坐标值
var maxX = map.offsetWidth/that.snake.width;
var maxY = map.offsetHeight/that.snake.height;
console.log(that.snake.direction);
for(var i=that.snake.body.length-1;i>0;i--){
if(headX == that.snake.body[i].x && headY == that.snake.body[i].y){
clearInterval(t);
alert('游戏结束~~~分数为：'+score+'~~~');
}
}
//判断
if (headX<0||headX>=maxX){
clearInterval(t);
alert('游戏结束~~~分数为：'+score+'~~~');
}
if (headY<0||headY>=maxY){
clearInterval(t);
alert('游戏结束~~~分数为：'+score+'~~~');
}
}.bind(that),200)
}
//设置方向
Game.prototype.fang = function(){
document.addEventListener('keydown',function (e) {
//console.log(e.keyCode);
switch (event.keyCode) {
case 37:
console.log(this.snake.direction);
if(this.snake.direction == 'right'){
this.snake.direction = 'right'
}else{
this.snake.direction = 'left';
}
console.log(this.snake.direction);
break;
case 38:
if(this.snake.direction == 'botttom'){
this.snake.direction = 'bottom'
}else{
this.snake.direction = 'top';
}
break;
case 39:
if(this.snake.direction == 'left'){
this.snake.direction = 'left'
}else{
this.snake.direction = 'right';
}
break;
case 40:
if(this.snake.direction == 'top'){
this.snake.direction = 'top'
}else{
this.snake.direction = 'bottom';
}
break;
}
}.bind(that))
}
window.Game = Game;
})());
var game = new Game(document.querySelector(".map"));
game.init();在学习过程中可能是对于this、that什么的指向的内容有些问题，纠结了好久，明天还要学相关的新内容，暂且不谈。
在原基础上加了自己吃自己直接结束游戏的功能，但是本来还想做出“禁止反向转向”的功能，按键改变方向的原型函数里加入了判断，但是这里还有bug，明天如果解决了，回来把文章再改改