拓展需求:
1,添加游戏的背景音乐,并且控制暂停和播放;
2,给蛇添加眼睛(两个眼睛);
3,设计项目的界面(开始游戏,暂停游戏,记录分数,选择关卡(控制速度));
4.控键设置(向前不向后,向左不向右)
贪吃蛇分析(基础部分):
第一步:创建地图
(1)使用div 创建地图元素;
(2)添加到body中;
(3)设置地图元素的样式;
(4)调用地图显示的方法,从而显示浏览器
第二步:创建食物
1.创建div
2.设置样式
3.设置在地图内随机出现
4.把食物添加到地图
第三步:创建蛇
(1)创建二维数组: 用来构造蛇身,位置,颜色;
(2)创建显示蛇的方法;
–>初始化蛇 3节 for循环 创建div元素;
–>添加 到地图的div中;
–>设置蛇的样式 (二维数组的数据访问)
(3)蛇的调用 显示蛇的方法(通过实例化的对象.显示蛇的方法名)
(4)创建蛇移动方向的方法
–>考虑: 通过哪种方式控制蛇的移动 键盘控制
–>传递 键码到蛇移动方向的方法中去;
–>使用蛇对象中的属性记录 蛇移动方向;
(5)创建蛇移动的方法
–>考虑: 计时器控制蛇自动 移动过程中 全局属性记录的方向传递进该方法
–>判断: 蛇的方向, 从而设置 蛇头移动, 紧接着蛇身以及蛇尾移动(bug:蛇身叠加);
–>最后 重点: 是调用蛇显示的 方法 从而才能改变蛇的位置(bug:蛇头重复的创建)
–>添加计时器 重复调用 注意: 该函数在计时器中是使用对象调用. 不能直接调
第四步:添加其余功能
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#id{
width: 600px;
height: 600px;
background: url(../Day08-封闭函数与内置对象/春夏秋冬/imge/夏.jpg);
margin: 0 auto;
text-align: center;
}
#butu0{
width: 400px;
height: 50px;
margin:50px auto;
border-radius: 50%;
font-size: 40px;
color: aqua;
background: greenyellow;
font-family: "宋体";
text-align: center;
position: relative;
}
#butu{
width: 300px;
height: 50px;
margin:100px auto;
border-radius: 50%;
font-size: 30px;
text-align: center;
position: relative;
}
#butu1{
width: 250px;
height: 50px;
border-radius: 50%;
margin: 0;
font-size: 30px;
position: relative;
}
#butu12{
width: 250px;
height: 50px;
border-radius: 50%;
margin: 0;
font-size: 30px;
position: relative;
}
</style>
</head>
<body>
<div id="id">
<button id="butu0">贪吃蛇</button>
<button id="butu">开始游戏</button><br />
<button id="butu1">加速</button><br />
<button id="butu12">极速</button>
</div>
<script type="text/javascript">
var _Map;//声明地图
var _shiwu;//声明食物
var _she;//声明蛇
var _yanjing;//声明眼睛
var time;//定时器
var feng