Skip to content
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
js
_config.yml
index.html
lee.ico
readme.md

readme.md

简易贪吃蛇

链接地址

  • 沙箱模式封装图片加载函数,对外暴露loadImg(imgUrl,Fn)函数, 其中imgUrl为图片地址(对象),Fn为回调函数。
  • 创建整个游戏函数,封装为DrawSnake,单例模式对外暴露DrawSnake()
    • 原型中创建随机生成食物函数food,思路为把20(整个游戏以20为一个单位)的倍数放入数组,随机取出其中一个。
    • 初始化蛇身
    • 蛇头移动(headMove())
      • 每次移动之前获取当前的蛇头坐标
      • 重新获取蛇身节点
      • 若屏幕宽度小于768,则认为是手机端,显示控制按钮,否则为键盘控制
      • 初始化四个方向布尔值,按钮或键盘改变的是布尔值真假,每次只有一个为真
      • 若蛇头碰撞到四周,则over为true;若蛇头碰到蛇身,则over为true。
    • 蛇身移动
      • bodyMoveDelete(),未吃到食物,则删除蛇尾,并把蛇尾添加到蛇头
      • bodyMoveClone(),吃到食物,则复制蛇头节点为新节点,修改坐标为原蛇头坐标,添加到蛇头,并重新生成食物
    • bodyArr()
      • 所有蛇身坐标存入数组,用以判断蛇头是否撞到蛇身,即蛇头坐标等于数组其中的一个
      • 用蛇身的长度来确定得分
  • 设置游戏难度
    通过点击难度按钮修改定时器执行时间
You can’t perform that action at this time.