复习及今日介绍（贪吃蛇游戏）：
注：主要是利用 案例理解面向对象的思想。
案例：
画地图：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>这是网页标题</title>
6 <style>
7 .map{
8 width: 800px;
9 height: 600px;
10 background-color: #ccc;
11 position: relative; /*注意，蛇 和 食物都是脱离文档流的，它们的父类也要脱离，并且是相对定位*/
12 }
13 </style>
14 </head>
15 <body>
16 <!-- 地图-->
17 <div class="map"></div>
18
19
20
21 <script src="js/common.js"></script>
22 <script>
23
24 </script>
25
26 </body>
27 </html>
创建食物：
食物都是先删掉（当蛇碰到食物时删！）之前的食物，然后再创建一个新的。
两种自调用方式：
下面的方式更好一些。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>这是网页标题</title>
6 <style>
7 .map{
8 width: 800px;
9 height: 600px;
10 background-color: #ccc;
11 position: relative;
12 }
13 </style>
14 </head>
15 <body>
16 <!-- 地图-->
17 <div class="map" id="map"></div>
18
19
20
21 <script src="js/common.js"></script>
22 <script>
23 //1食物 食物就是一个对象，有宽，有高，有颜色，有横纵坐标 。
24 (function () { //它也是自调用函数 。
25 var arrs_Food = []; //用来存放每个小食物！
26 //食物类
27 function Food(x, y, width, height, color) {
28 this.x = x || 0;
29 this.y = y || 0;
30 this.width = width || 20;
31 this.height = height || 20;
32 this.color = color || "green";
33 }
34 //为Food原型添加 初始化函数，以便能够显示在 地图上！
35 Food.prototype.init = function(map){
36 removeFood(); //每次init() 前都首先清空所有食物，然后再创建一个。
37
38 //创建div 食物
39 var divFood = document.createElement("div");
40 divFood.style.width = this.width + "px";
41 divFood.style.height = this.height +"px";
42
43 //横纵坐标 要是随机值，而且食物要脱离文档流。
44 var min_w = 0; //[0,39]
45 var max_w = map.offsetWidth/ this.width -1;
46 var min_h = 0; //[0.29]
47 var max_h = map.offsetHeight/this.height -1;
48 this.x = parseInt( Math.random()*(max_w-min_w+1)+min_w);
49 this.y = parseInt( Math.random()*(max_h-min_h+1)+min_h);
50 divFood.style.left = this.x*this.width +"px";
51 divFood.style.top = this.y*this.height +"px";
52 divFood.style.position = "absolute";
53 divFood.style.backgroundColor = this.color;
54 map.appendChild(divFood);
55 arrs_Food.push(divFood);
56 };
57
58 //如果多次调用init() 的话，会产生多个食物在界面上，如何解决？
59 //定义一个 私有的函数 用来清除食物--1，数组中清除 2，地图上也不显示
60 function removeFood(){
61 /*该函数 外部无法访问！！！*/
62 for (var i =0;i<arrs_Food.length;i++){
63 //1,地图上不再显示该元素。
64 arrs_Food[i].parentNode.removeChild(arrs_Food[i]);
65 //2,数组中也要删除这个食物
66 arrs_Food.splice(i,1); //从数组中删除该索引的 元素。
67 }
68 }
69
70
71 //为了能在外面使用Food , 将食物类 绑定到window上
72 window.Food = Food;
73 }());
74
75 //创建对象 food
76 var food = new Food(); //默认参数！
77 food.init(document.querySelector(".map")); //通过类选择器 获取地图的div对象
78 //food.init(document.querySelector(".map")); //通过类选择器 获取地图的div对象
79
80
81
82
83 </script>
84
85 </body>
86 </html>
创建小蛇：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>这是网页标题</title>
6 <style>
7 .map{
8 width: 800px;
9 height: 600px;
10 background-color: #ccc;
11 position: relative;
12 }
13 </style>
14 </head>
15 <body>
16 <!-- 地图-->
17 <div class="map" id="map"></div>
18
19
20
21 <script src="js/common.js"></script>
22 <script>
23 //1食物 食物就是一个对象，有宽，有高，有颜色，有横纵坐标 。
24 (function () { //它也是自调用函数 。
25 var arrs_Food = []; //用来存放每个小食物！
26 //食物类
27 function Food(x, y, width, height, color) {
28 this.x = x || 0;
29 this.y = y || 0;
30 this.width = width || 20;
31 this.height = height || 20;
32 this.color = color || "green";
33 }
34 //为Food原型添加 初始化函数，以便能够显示在 地图上！
35 Food.prototype.init = function(map){
36 removeFood(); //每次init() 前都首先清空所有食物，然后再创建一个。
37
38 //创建div 食物
39 var divFood = document.createElement("div");
40 divFood.style.width = this.width + "px";
41 divFood.style.height = this.height +"px";
42
43 //横纵坐标 要是随机值，而且食物要脱离文档流。
44 var min_w = 0; //[0,39]
45 var max_w = map.offsetWidth/ this.width -1;
46 var min_h = 0; //[0.29]
47 var max_h = map.offsetHeight/this.height -1;
48 this.x = parseInt( Math.random()*(max_w-min_w+1)+min_w);
49 this.y = parseInt( Math.random()*(max_h-min_h+1)+min_h);
50 divFood.style.left = this.x*this.width +"px";
51 divFood.style.top = this.y*this.height +"px";
52 divFood.style.position = "absolute";
53 divFood.style.backgroundColor = this.color;
54 map.appendChild(divFood);
55 arrs_Food.push(divFood);
56 };
57
58 //如果多次调用init() 的话，会产生多个食物在界面上，如何解决？
59 //定义一个 私有的函数 用来清除食物--1，数组中清除 2，地图上也不显示
60 function removeFood(){
61 /*该函数 外部无法访问！！！*/
62 for (var i =0;i<arrs_Food.length;i++){
63 //1,地图上不再显示该元素。
64 arrs_Food[i].parentElement.removeChild(arrs_Food[i]);
65 //2,数组中也要删除这个食物
66 arrs_Food.splice(i,1); //从数组中删除该索引的 元素。
67 }
68 }
69
70
71 //为了能在外面使用Food , 将食物类 绑定到window上
72 window.Food = Food;
73 }());
74
75 //创建对象 food
76 var food = new Food(); //默认参数！
77 food.init(document.querySelector(".map")); //通过类选择器 获取地图的div对象
78 // food.init(document.querySelector(".map"));
79
80 var num = 0;
81 //2小蛇 小蛇有宽，有高，有方向，宽高指的是 组成蛇身体的小方块的 宽高
82 (function () {
83 var arr_Body = []; //存放小蛇的 身体部分。 （蛇走的实质是 将头向前移，然后删除尾）
84
85 function Snake(width,height,direction) {
86 this.width = width || 20;
87 this.height = height || 20;
88 this.direction = direction ||"right";
89
90 //小蛇的身体
91 this.body = [
92 {x:3,y:2,color:"red"},//头
93 {x:2,y:2,color:"orange"},//身体
94 {x:1,y:2,color:"orange"},//身体
95 ];
96
97 }
98 //为Snake的原型添加方法
99 Snake.prototype.init = function (map) {
100 num++;
101 //init 前先 remove();
102 remove();
103 //目前的蛇有三个部分， 三个div
104 for (var i = 0;i<this.body.length;i++){
105 var div = document.createElement("div");
106 //div 要脱离文档流
107 div.style.width = this.width+"px";
108 div.style.height = this.height+"px";
109 div.style.position = "absolute";
110 div.style.left = this.body[i].x*this.width+num*100+"px";
111 div.style.top = this.body[i].y*this.height +"px";
112 div.style.backgroundColor = this.body[i].color;
113 map.appendChild(div);
114
115
116 //把div 加入到arr_Body数组中去，目的也是为了， 当多次init的时候不创建的多个
117 arr_Body.push(div);
118 }
119
120
121 };
122
123 //定义个私有函数， 清除蛇的每个部分，达到 多次init 而不会显示多个
124 function remove(){
125 // console.log(arr_Body.length);
126
127 var arr_len = arr_Body.length; //不能直接放下面 做判断条件 ，会出错！
128 console.log(arr_len);
129 for (var i =arr_len-1;i >=0 ;i--){
130 console.log("ha");
131 var div = arr_Body[i];
132 // div.parentNode
133 div.parentElement.removeChild(div);
134 //数组中也要删掉它自己
135 arr_Body.splice(i,1);
136 }
137 // console.log(arr_Body.length);
138 }
139 window.Snake = Snake;
140 }());
141 var snake = new Snake();
142 snake.init(document.querySelector(".map"));
143 snake.init(document.querySelector(".map"));
144 snake.init(document.querySelector(".map"));
145
146
147
148
149
150
151
152 </script>
153
154 </body>
155 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>这是网页标题</title>
6 <style>
7 .map{
8 width: 800px;
9 height: 600px;
10 background-color: #ccc;
11 position: relative;
12 }
13 </style>
14 </head>
15 <body>
16 <!-- 地图-->
17 <div class="map" id="map"></div>
18
19
20
21 <script src="js/common.js"></script>
22 <script>
23 //1食物 食物就是一个对象，有宽，有高，有颜色，有横纵坐标 。
24 (function () { //它也是自调用函数 。
25 var arrs_Food = []; //用来存放每个小食物！
26 //食物类
27 function Food(x, y, width, height, color) {
28 this.x = x || 0;
29 this.y = y || 0;
30 this.width = width || 20;
31 this.height = height || 20;
32 this.color = color || "green";
33 }
34 //为Food原型添加 初始化函数，以便能够显示在 地图上！
35 Food.prototype.init = function(map){
36 removeFood(); //每次init() 前都首先清空所有食物，然后再创建一个。
37
38 //创建div 食物
39 var divFood = document.createElement("div");
40 divFood.style.width = this.width + "px";
41 divFood.style.height = this.height +"px";
42
43 //横纵坐标 要是随机值，而且食物要脱离文档流。
44 var min_w = 0; //[0,39]
45 var max_w = map.offsetWidth/ this.width -1;
46 var min_h = 0; //[0.29]
47 var max_h = map.offsetHeight/this.height -1;
48 this.x = parseInt( Math.random()*(max_w-min_w+1)+min_w);
49 this.y = parseInt( Math.random()*(max_h-min_h+1)+min_h);
50 divFood.style.left = this.x*this.width +"px";
51 divFood.style.top = this.y*this.height +"px";
52 divFood.style.position = "absolute";
53 divFood.style.backgroundColor = this.color;
54 map.appendChild(divFood);
55 arrs_Food.push(divFood);
56 };
57
58 //如果多次调用init() 的话，会产生多个食物在界面上，如何解决？
59 //定义一个 私有的函数 用来清除食物--1，数组中清除 2，地图上也不显示
60 function removeFood(){
61 /*该函数 外部无法访问！！！*/
62 for (var i =0;i<arrs_Food.length;i++){
63 //1,地图上不再显示该元素。
64 arrs_Food[i].parentElement.removeChild(arrs_Food[i]);
65 //2,数组中也要删除这个食物
66 arrs_Food.splice(i,1); //从数组中删除该索引的 元素。
67 }
68 }
69
70
71 //为了能在外面使用Food , 将食物类 绑定到window上
72 window.Food = Food;
73 }());
74
75 //创建对象 food
76 var food = new Food(); //默认参数！
77 food.init(document.querySelector(".map")); //通过类选择器 获取地图的div对象
78 // food.init(document.querySelector(".map")); //测试用
79
80 //2小蛇 小蛇有宽，有高，有方向，宽高指的是 组成蛇身体的小方块的 宽高
81 (function () {
82 var arr_Body = []; //存放小蛇的 身体部分。 处理当多次init 产生的问题！
83
84 function Snake(width,height,direction) {
85 this.width = width || 20;
86 this.height = height || 20;
87 this.direction = direction ||"right";
88
89 //小蛇的身体
90 this.body = [
91 {x:3,y:2,color:"red"},//头
92 {x:2,y:2,color:"orange"},//身体
93 {x:1,y:2,color:"orange"},//身体
94 ];
95
96 }
97 //为Snake的原型添加方法
98 Snake.prototype.init = function (map) {
99 //init 前先 remove();
100 remove();
101 //目前的蛇有三个部分， 三个div
102 for (var i = 0;i<this.body.length;i++){
103 var div = document.createElement("div");
104 //div 要脱离文档流
105 div.style.width = this.width+"px";
106 div.style.height = this.height+"px";
107 div.style.position = "absolute";
108 div.style.left = this.body[i].x*this.width+"px";
109 div.style.top = this.body[i].y*this.height +"px";
110 div.style.backgroundColor = this.body[i].color;
111 map.appendChild(div);
112
113 //把div 加入到arr_Body数组中去，目的也是为了， 当多次init的时候不创建的多个
114 arr_Body.push(div);
115 }
116
117
118 };
119
120 //定义个私有函数， 清除蛇的每个部分，达到 多次init 而不会显示多个
121 function remove(){
122 var arr_len = arr_Body.length; //不能直接放下面 做判断条件 ，会出错（因为下面 出现了操作 arr_Body数组，所以如果还直接让它作为条件就会出错了!!! 一定要注意）！
123 console.log(arr_len);
124 for (var i =arr_len-1;i >=0 ;i--){
125 var div = arr_Body[i];
126 // div.parentNode
127 div.parentElement.removeChild(div);
128 //数组中也要删掉它自己
129 arr_Body.splice(i,1); //要从后往前删！
130 }
131 }
132 window.Snake = Snake;
133 }());
134 var snake = new Snake();
135 snake.init(document.querySelector(".map"));
136 // snake.init(document.querySelector(".map")); //测试用
137 // snake.init(document.querySelector(".map"));
138
139 </script>
140
141 </body>
142 </html>