使用JS制作小游戏贪吃蛇

时间:2024-04-30 04:03:16

先看效果图:

使用JS制作小游戏贪吃蛇

过程如下:

  1.首先创建一张画布地图<div class="map"> </div>;

  2.创建食物的自调用函数

  (function (){

    使用JS制作小游戏贪吃蛇

  //定义好食物的属性,在Food的原型上进行初始化      使用JS制作小游戏贪吃蛇

  在每次创建之前都先清除之前的食物,这样,当小蛇在吃到食物的时候,可以直接调用该方法

  使用JS制作小游戏贪吃蛇

  }());

  3.创建小蛇的自调用函数

  使用JS制作小游戏贪吃蛇

  初始化小蛇

  使用JS制作小游戏贪吃蛇

  想办法让小蛇动起来和小蛇的走向问题。

  使用JS制作小游戏贪吃蛇

  判断小蛇有没有吃到食物

  使用JS制作小游戏贪吃蛇

  每当小蛇吃到这个食物的时候,可以复制小蛇最后一个节点,并添加到最后使用JS制作小游戏贪吃蛇

  4.创建一个游戏对象,来初始化食物和小蛇

  使用JS制作小游戏贪吃蛇

  使用JS制作小游戏贪吃蛇

使用JS制作小游戏贪吃蛇

  使用JS制作小游戏贪吃蛇

  唔...有一些乱。。。,具体源码已经上传到码云。大家可以下载下来借鉴。地址:https://gitee.com/han_xiangzi/tanchishe

  当然中间有很多不足的地方,也请大家指出,一起学习