贪吃蛇分析和代码（详细版）
贪吃蛇分析：
1， 构造蛇移动的地图====》PC端的游戏 浏览器上运行程序（JS）
（1）使用div 创建地图元素
（2）添加到body中
（3）设置地图的元素的样式；js实现
（4）调用地图显示的方法，从而显示浏览器
2， 构造食物的对象====》PC端的游戏 浏览器上显示（JS）
（1）使用div 创建食物元素
（2）添加到地图元素中
（3）设置食物的元素的样式；====》js实现
（4）调用食物显示的方法，从而显示浏览器div中
3， 构造蛇移动对象====》PC端的游戏 浏览器上运行程序（JS）
（1）创建一个二为数组：用来构造蛇身，位置，颜色
（2）创建显示蛇的方法
---->初始化蛇3节（for循环 创建div元素）
----->添加到地图中
----->设置蛇的样式（二维数组的数据访问）arr[][]
(3)蛇的调用 显示蛇的方法（通过实例化的对象.显示蛇的方法名）
display（）====>创建蛇对象中
（4）创建蛇移动方向的方法
----->考虑：通过那种方式控制蛇的移动 键盘控制
----->传递键码到蛇移动方向中去
----->使用蛇对象中的属性记录蛇移动的方向
（5）创建蛇移动的方法
----->考虑：计时器控制蛇自动移动过程中，全局属性记录的方法传递进该方法
----->判断：蛇的方向
----->最后 重点: 是调用蛇显示的 方法 从而才能改变蛇的位置(bug:蛇头重复的创建)
----->添加计时器 重复调用 注意: 该函数在计时器中是使用对象调用. 不能直接调
4,扩展：
1,碰撞到自己身体 游戏结束;
2,碰撞到墙壁 游戏结束;
3,添加游戏的背景音乐,并且控制暂停和播放;
4,给蛇添加眼睛;
5,设计项目的界面(开始游戏,暂停游戏,记录分数,选择关卡);
5，代码案例
THML文件：
var num=0;
function Map(){
this.width=800;
this.height=600;
this.background='green';
this.div_map=null;
this.display=function(){
this.div_map=document.createElement('div');
this.div_map.style.width=this.width+'px';
this.div_map.style.height=this.height+'px';
this.div_map.setAttribute('class','class_01');
// this.div_map.style.background=this.background;
this.div_map.style.margin='20px auto';
this.div_map.style.position='relative';
document.getElementsByTagName('body')[0].appendChild(this.div_map)
}
}
//按鈕
function Anniu(){
this.width=100;
this.height=100;
this.background='pink';
this.div_anniu=null;
this.display=function(){
this.div_anniu=document.createElement('button');
this.div_anniu.style.width=this.width+'px';
this.div_anniu.style.height=this.height+'px';
this.div_anniu.innerHTML='暫停按鈕'
// this.div_anniu.setAttribute('class','class_01');
this.div_anniu.style.background=this.background;
this.div_anniu.style.position='absolute';
this.div_anniu.style.margin='0px -100px';
this.div_anniu.style.font='bold 30px "微软雅黑"'
div_Map.div_map.appendChild(this.div_anniu)
}
// this.div_anniu.onclick=function(){
// clearTimeout(times)
// }
}
function Anniu1(){
this.width=100;
this.height=100;
this.background='pink';
this.div_anniu1=null;
this.display=function(){
this.div_anniu1=document.createElement('button');
this.div_anniu1.style.width=this.width+'px';
this.div_anniu1.style.height=this.height+'px';
this.div_anniu1.innerHTML='開始按鈕'
// this.div_anniu1.setAttribute('class','class_01');
this.div_anniu1.style.background=this.background;
this.div_anniu1.style.position='absolute';
this.div_anniu1.style.margin='110px -100px';
this.div_anniu1.style.font='bold 30px "微软雅黑"'
div_Map.div_map.appendChild(this.div_anniu1)
}
// this.div_anniu.onclick=function(){
// clearTimeout(times)
// }
}
function Food(){
this.width=20;
this.height=20;
this.background='red';
this.div_food=null;
this.x=0;
this.y=0;
this.display=function(){
if (this.div_food==null) {//为空时进入在碰触蛇的时候只会改变食物位置，不会增加食物
this.div_food=document.createElement('div');
this.div_food.style.width=this.width+'px';
this.div_food.style.height=this.height+'px';
this.div_food.style.background=this.background;
// this.div_food.style.margin='20px auto';
this.div_food.style.position='absolute';
div_Map.div_map.appendChild(this.div_food)
}
this.x=Math.round(Math.random()*35+4);
this.y=Math.round(Math.random()*25+4);
this.div_food.style.left=this.x*this.width+'px';
this.div_food.style.top=this.y*this.height+'px';
}
}
function She(){
this.width=20;
this.height=20;
this.SD=null;
this.kong=null;
// this.jishu=null;
this.arr=[
[9,6,'black',null],
[8,6,'red',null],
[7,6,'black',null]
]
this.display=function(){
for (var i=0;i0;i--) {
if (this.kong!=null) {
this.arr[i][0]=this.arr[i-1][0];
this.arr[i][1]=this.arr[i-1][1];
}
}
switch (this.kong){
case 'zuo':
this.arr[0][0]-=1;
break;
case 'shang':
this.arr[0][1]-=1;
break;
case 'you':
this.arr[0][0]+=1;
break;
case 'xia':
this.arr[0][1]+=1;
break;
default:
break;
}
if (this.arr[0][0]==div_Food.x&&this.arr[0][1]==div_Food.y) {
div_Food.display();
num++;
div_JS.jishu.innerHTML='第'+num+'分數';
// div_JS.display(num++)
// this.JS=function(){
// this.jishu=document.createElement('button');s
// this.jishu.style.width=100+'px';
// this.jishu.style.height=100+'px';
// this.jishu.style.background='pink';
// this.jishu.innerHTML='第'+num+'分數'
// div_Map.div_map.appendChild(this.jishu);
// }
//表示蛇的最后一行
//获取x，y
var x=this.arr[this.arr.length-1][0];
var y=this.arr[this.arr.length-1][1];
this.arr.push([x,y,'pink',null])
}
if(this.arr[0][0]<2||this.arr[0][0]>37||this.arr[0][1]<2||this.arr[0][1]>29){
//alert('游戏结束');
//return false;
//或者用这种方式
if (confirm('是否从新开始')) {
window.location.reload()
} else{
return false;
}
}
for (var i=1;i
var aud=document.createElement('audio');
aud.src='../img/7895.mp3';
aud.autoplay='autoplay';
document.getElementsByTagName('body')[0].appendChild(aud);
document.getElementsByTagName('body')[0].onkeydown=function(event){
div_She.shedong(event.keyCode);
}
}
//按鈕2
id2.onclick=function(){//点击事件
div_01.style.display='none';
div_02.style.display='none';
div_Map=new Map();
div_Map.display();
//暫停按鈕
div_Anniu=new Anniu();
div_Anniu.display();
div_Anniu.div_anniu.onclick=function(){
clearTimeout(times)
aud.pause()
}
//開始按鈕
div_Anniu1=new Anniu1();
div_Anniu1.display();
div_Anniu1.div_anniu1.onclick=function(){
//div_She.display();
//setTimeout(times)
div_She.shedong1()
aud.play()
}
div_Food=new Food();
div_Food.display();
div_She=new She();
div_She.display();
div_She.shedong1();
div_She.SD=200;
// div_She.JS()
//計算的
div_JS=new Js();
div_JS.display();
div_Yanjing=new Yanjing();
div_Yanjing.display()
//音频标签
var aud=document.createElement('audio');
aud.src='../img/7895.mp3';
aud.autoplay='autoplay';
document.getElementsByTagName('body')[0].appendChild(aud);
document.getElementsByTagName('body')[0].onkeydown=function(event){
div_She.shedong(event.keyCode);
}
}
//按鈕3
id3.onclick=function(){//点击事件
div_01.style.display='none';
div_02.style.display='none';
div_Map=new Map();
div_Map.display();
//暫停按鈕
div_Anniu=new Anniu();
div_Anniu.display();
div_Anniu.div_anniu.onclick=function(){
clearTimeout(times)
aud.pause()
}
//開始按鈕
div_Anniu1=new Anniu1();
div_Anniu1.display();
div_Anniu1.div_anniu1.onclick=function(){
//div_She.display();
//setTimeout(times)
div_She.shedong1()
aud.play()
}
div_Food=new Food();
div_Food.display();
div_She=new She();
div_She.display();
div_She.shedong1();
div_She.SD=150;
//div_She.JS()
//計算的
div_JS=new Js();
div_JS.display();
div_Yanjing=new Yanjing();
div_Yanjing.display()
//音频标签
var aud=document.createElement('audio');
aud.src='../img/7895.mp3';
aud.autoplay='autoplay';
document.getElementsByTagName('body')[0].appendChild(aud);
document.getElementsByTagName('body')[0].onkeydown=function(event){
div_She.shedong(event.keyCode);
}
}
//按鈕4
id4.onclick=function(){//点击事件
div_01.style.display='none';
div_02.style.display='none';
div_Map=new Map();
div_Map.display();
//暫停按鈕
div_Anniu=new Anniu();
div_Anniu.display();
div_Anniu.div_anniu.onclick=function(){
clearTimeout(times)
aud.pause()
}
//開始按鈕
div_Anniu1=new Anniu1();
div_Anniu1.display();
div_Anniu1.div_anniu1.onclick=function(){
//div_She.display();
//setTimeout(times)
div_She.shedong1()
aud.play()
}
div_Food=new Food();
div_Food.display();
div_She=new She();
div_She.display();
div_She.shedong1();
div_She.SD=100;
//div_She.JS()
//計算的
div_JS=new Js();
div_JS.display();
div_Yanjing=new Yanjing();
div_Yanjing.display()
//音频标签
var aud=document.createElement('audio');
aud.src='../img/7895.mp3';
aud.autoplay='autoplay';
document.getElementsByTagName('body')[0].appendChild(aud);
document.getElementsByTagName('body')[0].onkeydown=function(event){
div_She.shedong(event.keyCode);
}
}
//按鈕5
id5.onclick=function(){//点击事件
div_01.style.display='none';
div_02.style.display='none';
div_Map=new Map();
div_Map.display();
//暫停按鈕
div_Anniu=new Anniu();
div_Anniu.display();
div_Anniu.div_anniu.onclick=function(){
clearTimeout(times)
aud.pause()
}
//開始按鈕
div_Anniu1=new Anniu1();
div_Anniu1.display();
div_Anniu1.div_anniu1.onclick=function(){
//div_She.display();
//setTimeout(times)
div_She.shedong1()
aud.play()
}
div_Food=new Food();
div_Food.display();
div_She=new She();
div_She.display();
div_She.shedong1();
div_She.SD=50;
//div_She.JS()
//計算的
div_JS=new Js();
div_JS.display();
div_Yanjing=new Yanjing();
div_Yanjing.display()
//音频标签
var aud=document.createElement('audio');
aud.src='../img/7895.mp3';
aud.autoplay='autoplay';
document.getElementsByTagName('body')[0].appendChild(aud);
document.getElementsByTagName('body')[0].onkeydown=function(event){
div_She.shedong(event.keyCode);
}
}
}