js原生--贪吃蛇（基本功能版）

最新推荐文章于 2024-05-23 22:21:26 发布

oOo!!!!!----蔚楠

最新推荐文章于 2024-05-23 22:21:26 发布

阅读量418

点赞数

本文链接：https://blog.csdn.net/weixin_45105458/article/details/98669519

版权

拓展需求：
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

最低0.47元/天解锁文章

oOo!!!!!----蔚楠

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js原生--贪吃蛇（基本功能版）

拓展需求：1,添加游戏的背景音乐,并且控制暂停和播放;2,给蛇添加眼睛(两个眼睛);3,设计项目的界面(开始游戏,暂停游戏,记录分数,选择关卡（控制速度）);4.控键设置（向前不向后，向左不向右）贪吃蛇分析（基础部分）：第一步：创建地图(1)使用div 创建地图元素;(2)添加到body中;(3)设置地图元素的样式;(4)调用地图显示的方法,从而显示浏览器第二步：创建食物1...
复制链接

扫一扫