用面向对象方法纯js写的一个贪吃蛇小游戏，扩展性比较优秀
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 </body> 9 <script type="text/javascript"> 10 // 思路： 11 12 // 1. 创建地图 13 // 宽 高 颜色 14 // createElement("div") 15 // appendChild(); 16 17 // 2. 产生食物 18 // 宽 高 颜色 19 // Math.random() 20 // cppendChild() 21 22 // 3 产生蛇 23 // 把一条蛇分解成每一个节点 24 // 每一个节点 宽 高 位 置 颜色 25 26 // 4. 蛇的移动 27 // 类比鼠标移动后跟一串 蛇的节点从后面的节点开始移动 28 // setInterval(蛇移动函数()); 29 // 监听键盘按键 30 31 // 5 蛇的玩完 32 // 蛇头碰到地图边缘 33 // 蛇头碰到身体 34 35 // 6 计算分数 36 37 38 //定义三个类 39 //地图 isMap() 40 //蛇 isSnake() 41 //食物 isFood() 42 var map;//地图对象 43 var food;//食物对象0 44 var food1;//食物对象1 45 var sum = 0;//分数 46 var timer;//定时器 47 function isMap(){//地图类 48 this.width = 800; 49 this.height = 400; 50 this.position='absolute'; 51 this.color = '#ccc'; 52 this._map = null;//保存地图dom元素 53 this.show = function(){ //创建地图方法 54 this._map = document.createElement('div');//创建div 55 this._map.style.width = this.width+'px'; 56 this._map.style.height = this.height+'px'; 57 this._map.style.position = this.position; 58 this._map.style.backgroundColor = this.color; 59 document.body.appendChild(this._map);//添加div 60 } 61 } 62 function isFood(){ //产生食物 63 this.width = 20; 64 this.height =20; 65 this.position = 'absolute'; 66 this.color='#0f0'; 67 this._food= null; //食物的dom 68 this.x = 0 ; //横向第几个格子 69 this.y = 0 ; //纵向第几个格子 70 this.show = function(){ //如果需要创建多个食物 只需要new多个创建食物对象 但是判断里面必须添加 71 if(this._food==null){ //判断食物有没有 初始化食物 72 this._food = document.createElement('div'); 73 this._food.style.width = this.width+'px'; 74 this._food.style.height = this.height+'px'; 75 this._food.style.position = this.position; 76 this._food.style.backgroundColor = this.color; 77 map._map.appendChild(this._food); 78 //console.log(2); 79 } 80 this.x = Math.floor(Math.random()*40);//800/20 81 this.y = Math.floor(Math.random()*20);//400/20 82 this._food.style.left = this.x*this.width+"px";//给食物定位 83 this._food.style.top = this.y*this.height+"px"; 84 //console.log(3); 85 } 86 //console.log(1); 87 } 88 function isSnake(){ 89 this.width = 20; 90 this.height = 20; 91 this.postion = 'absolute'; 92 this.direct=''; //指向 93 this.body =[[3,2,"red",null],[2,2,"blue",null],[1,2,'blue',null]]; 94 this.setDirect = function(code){//获取鼠标事件 给蛇一个移动方法 95 //alert(code); 96 var directFlag=""; 97 switch(code){//解决 直接反方向按键导致死亡 98 case 37: 99 directFlag='left'; 100 if(this.direct=='right'){ 101 break; 102 }else{ 103 this.direct='left';break; 104 } 105 case 38: 106 directFlag='up'; 107 if(this.direct=='down'){ 108 break; 109 }else{ 110 this.direct='up';break; 111 } 112 case 39: 113 directFlag='right'; 114 if(this.direct=='left'){ 115 break; 116 } 117 else{ 118 this.direct='right';break; 119 } 120 case 40: 121 directFlag='down'; 122 if(this.direct=='up'){ 123 break; 124 }else{ 125 this.direct='down'; 126 break; 127 } 128 } 129 //console.log("是否执行了setDirect"); 130 } 131 this.show = function(){ //显示出蛇 132 for(var i = 0 ; i < this.body.length;i++){ 133 if(this.body[i][3]==null){ //创建dom 初始话蛇的位置 134 this.body[i][3] = document.createElement('div'); 135 this.body[i][3].style.width = this.width+'px'; 136 this.body[i][3].style.height = this.height+'px'; 137 this.body[i][3].style.position = this.postion; 138 this.body[i][3].style.backgroundColor = this.body[i][2]; 139 map._map.appendChild(this.body[i][3]);//创建div 140 //alert(this.body[i][3]); 141 //console.log(this.body[i][3]); 142 } 143 this.body[i][3].style.left=this.body[i][0]*this.width+"px"; 144 this.body[i][3].style.top =this.body[i][1]*this.height+"px"; 145 } 146 //console.log("用了一次show"); 147 } 148 this.move = function(){ 149 //alert(1); 150 var length = this.body.length-1; 151 for(var i = length; i>0;i--){ //把 后面的节点给前面 152 this.body[i][0] = this.body[i-1][0]; 153 this.body[i][1] = this.body[i-1][1]; 154 } 155 switch(this.direct){ //根据蛇的移动指向改变蛇头的值 蛇头的值会影响到后面 156 case 'right': 157 this.body[0][0]=this.body[0][0]+1; //横坐标 158 break; 159 case 'down': 160 this.body[0][1]=this.body[0][1]+1; 161 break; 162 case 'left': 163 this.body[0][0]=this.body[0][0]-1; 164 break; 165 case 'up': 166 this.body[0][1]=this.body[0][1]-1;break; 167 default: 168 return; 169 } 170 //找到食物 171 if(this.body[0][0]==food.x&&this.body[0][1]==food.y){ 172 var x = this.body[length][0]; //保存最后一个节点 173 var y =this.body[length][1]; 174 sum++; 175 this.body.push([x,y,'blue',null]);//添加到body中 节点 176 food.show(); 177 //food.show(); 178 } 179 if(this.body[0][0]==food1.x&&this.body[0][1]==food1.y){ 180 var x = this.body[length][0]; //保存最后一个节点 181 var y =this.body[length][1]; 182 sum++; 183 this.body.push([x,y,'blue',null]);//添加到body中 节点 184 food1.show(); 185 //food.show(); 186 } 187 //判断超出范围 188 if(this.body[0][0]<0||this.body[0][0]>39||this.body[0][1]<0||this.body[0][1]>19){ 189 alert(sum); 190 clearInterval(timer); //关闭计时器 191 return ; 192 } 193 //判断头是不是吃到自己 194 for(var i = 1 ; i < this.body.length;i++){ 195 if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1]){ 196 alert(sum); 197 clearInterval(timer); 198 return ; 199 } 200 } 201 //console.log(timer); 202 this.show(); 203 } 204 } 205 206 window.onload = function(){
console.log("致敬亚华哥"); 207 map = new isMap(); 208 map.show(); 209 food = new isFood(); 210 food.show(); 211 food1 = new isFood(); 212 food1.show(); 213 snake = new isSnake(); 214 snake.show(); 215 //snake.move(); 216 timer = setInterval('snake.move()',100); //放入列队 等待主线程执行 异步操作 217 // 每次循坏的速度影响蛇的移动 218 document.onkeydown = function(event){ // 219 var evt = event || window.event; 220 var code = evt.keyCode; 221 //console.log(code); 222 snake.setDirect(code); 223 } 224 } 225 </script> 226 </html>