复习及今日介绍（贪吃蛇游戏）：
注：主要是利用 案例理解面向对象的思想。
案例：
画地图：
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>