课程视频 js>Day-9
1、分析
小游戏中共有三个对象。一个是地图（Map）、一个是食物（Food）、一个是蛇（Snake）。
以面向对象的方式来开发，应该创建三个对象。
每个对象的特点：
地图Map：
宽width
高height
背景颜色backgroundColor
显示方法：show
食物Food：
宽width
高height
背景颜色backgroundColor
x轴坐标：0~29(每个坐标实际像素是20px)
y轴坐标：0~19（每个坐标实际像素是20px）
蛇Snake：
身体body（默认有三个div组成，其中一个蛇头，两段蛇身，都有颜色）
能够移动move
能够拐弯，改变移动方向
能够吃食物，变长
2、创建地图
3、创建食物
创建一食物，让它显示在body中。
食物没有和地图对齐，解决办法是让父级元素地图position是relative，让子元素食物position是absolute，并且让食物显示在地图中，而不是显示在body中。
所以修改Map，添加position属性，并且用一个属性_map来保存地图：
然后修改食物，让其显示在地图中即可：
4、创建蛇
蛇的每一节用一个div来表示，每一节都有宽度、高度、背景颜色、坐标。创建蛇，并让它显示到地图上。
5、让蛇移动
移动方向：默认先向右移动
这样做有个问题，当蛇移动的时候，会调用show方法，让蛇从新显示。调用show方法，会一直循环创建div。所以看到的效果是蛇移动了，但是越走越长。
解决办法：
6、让蛇拐弯
控制蛇头即可，因为身体一直跟着蛇头走。
蛇头的方向肯定是上下左右四个方向，可以用一个属性来表示蛇的移动方向。
当蛇移动的时候，根据方向修改蛇头的坐标：
下面添加键盘事件，修改蛇的运行方向：
7、让蛇吃食物
蛇头和食物重叠，才算吃到食物。即在移动过程中，如果发现蛇头的坐标和食物的坐标一样，才表示吃到食物。
这样做，吃完食物，发现食物没有从新显示。修改Food函数：
8、让蛇加速
当蛇吃到食物的时候，让时间变小，速度加快：
/********************** 创建地图 *************************/
function Map(){
//地图特点
this.width = '600px';
this.height = '400px';
this.backgroundColor = '#dddddd';
this.position = 'relative';
this.ditu = null; //该属性用于保存地图那个div
//show方法用于显示地图
this.show = function(){
this.ditu = document.createElement('div');
this.ditu.style.width = this.width;
this.ditu.style.height = this.height;
this.ditu.style.backgroundColor = this.backgroundColor;
this.ditu.style.position = this.position;
//将div放到body中
document.body.appendChild(this.ditu);
}
}
//实例化地图，创建对象
var map = new Map();
//调用show，显示地图
map.show();
/********************** 创建食物 *************************/
function Food(){
this.width = 20;
this.height = 20;
this.backgroundColor = 'green';
this.position = 'absolute';
this.x = null;
this.y = null;
this.shiwu = null; //它表示食物那个div
//show方法，显示食物
this.show = function () {
if(this.shiwu == null){
this.shiwu = document.createElement('div');
this.shiwu.style.width = this.width + 'px';
this.shiwu.style.height = this.height + 'px';
this.shiwu.style.backgroundColor = this.backgroundColor;
this.shiwu.style.position = this.position;
}
this.x = Math.floor(Math.random()*30); // 0~29的随机数
this.y = Math.floor(Math.random()*20); // 0~19的随机数
this.shiwu.style.left = this.x * this.width + 'px';
this.shiwu.style.top = this.y * this.height + 'px';
map.ditu.appendChild(this.shiwu);
}
}
//实例化食物对象
var food = new Food();
food.show();
/********************** 创建蛇 *************************/
function Snake(){
this.body = [[3,2,'red', null], [2,2,'blue', null], [1,2,'blue', null]];
this.width = 20; //每一节的宽度
this.height = 20;//每一节的高度
this.position = 'absolute';
this.direction = 'right'; //表示蛇的移动方向，默认向右
//定义方法show，让蛇显示
this.show = function () {
for(var i=0; i<this.body.length; i++){
if(this.body[i][3] == null){
this.body[i][3] = document.createElement('div');
this.body[i][3].style.width = this.width + 'px';
this.body[i][3].style.height = this.height + 'px';
this.body[i][3].style.backgroundColor = this.body[i][2];
this.body[i][3].style.position = this.position;
}
this.body[i][3].style.left = this.body[i][0] * this.width + 'px';
this.body[i][3].style.top = this.body[i][1] * this.height + 'px';
//把创建的每个div放到地图中
map.ditu.appendChild(this.body[i][3]);
}
};
//定义move方法，让蛇移动
this.move = function () {
//移动过程中，判断，如果蛇的坐标和食物的坐标完全一样，表示吃到食物
if(this.body[0][0] == food.x && this.body[0][1] == food.y){
//蛇变长
this.body.push([0,0,'blue',null]);
//从新让食物显示
food.show();
//让t变小，移动速度加快
if(t > 150){
t -= 50;
dingshi();
}
}
//除蛇头以外，其他节修改坐标等于它前一节的坐标即可。
for(var i=this.body.length-1; i>0; i--){
this.body[i][0] = this.body[i-1][0];
this.body[i][1] = this.body[i-1][1];
}
//蛇头单独设置
if(this.direction == 'right'){
this.body[0][0] += 1; //向右移动，修改横坐标
}else if(this.direction == 'left'){
this.body[0][0] -= 1; //向左移动，修改横坐标
}else if(this.direction == 'up'){
this.body[0][1] -= 1; //向上移动，修改纵坐标
}else if(this.direction == 'down'){
this.body[0][1] += 1; //向下移动，修改纵坐标
}
//修改完坐标，让蛇从新显示
this.show();
};
}
//如果把成员方法写到原型对象上也是可以的。
/*Snake.prototype = {
show:function(){
},
move:function(){
}
};*/
//实例化蛇
var snake = new Snake();
//让蛇显示
snake.show();
//定义一个时间，这个时间表示蛇移动的速度
var t = 500;
var timer; //它表示当前的定时器
//定时器，让蛇移动
function dingshi(){
clearInterval(timer);
timer = setInterval('snake.move()', t);
}
dingshi();
//给页面绑定键盘事件
document.onkeydown = function(evt){
var e = window.event||evt;
var keyCode = e.keyCode;
if(keyCode == 37 && snake.direction != 'right'){
snake.direction = 'left';
}else if(keyCode == 38 && snake.direction != 'down'){
snake.direction = 'up';
}else if(keyCode == 39 && snake.direction != 'left'){
snake.direction = 'right';
}else if(keyCode == 40 && snake.direction != 'up'){
snake.direction = 'down';
}
}
