|
用面向对象方法纯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>
|
客服电话
APP下载
官方微信
请发表评论