JS实现的贪吃蛇游戏完整实例

本文实例讲述了JS实现的贪吃蛇游戏。分享给大家供大家参考，具体如下：

思想：

1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑

2、设计食物：属性宽、高

3、显示蛇：根据状态向地图里加元素

4、蛇跑起来：下一节到前一节的位置，蛇头根据方向变，删除原来的蛇，新建蛇；当出界时，死亡，初始化；当蛇头吃到自己的时候，死亡，初始化

5、食物被吃掉，蛇加一节，去掉原来的食物，生成新的食物

6、添加定时器，绑定按键

完整示例：

  
  
  
  
  
    body {
      margin: 0;
      padding: 0;
    }
    .main {
      width: 800px;
      height: 400px;
      margin: 50px auto;
    }
    .btn {
      width: 100px;
      height: 40px;
    }
    .map {
      position: relative;
      width: 800px;
      height: 400px;
      background: #ccc;
    }
  



  开始游戏
  
  

使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得到如下运行效果：

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript数学运算用法总结》、《Javascript数据结构与算法技巧总结》、《Javascript数组操作技巧总结》、《Javascript排序算法总结》、《Javascript遍历算法与技巧总结》、《Javascript查找算法技巧总结》及《Javascript错误与调试技巧总结》

希望本文所述对大家Javascript程序设计有所帮助。