JS怎么实现的贪吃蛇游戏-成都创新互联网站建设

成都创新互联网站制作

028-86922220

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

JS怎么实现的贪吃蛇游戏

这篇文章将为大家详细讲解有关JS怎么实现的贪吃蛇游戏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联不能给您低的价格，只能给您高的品质！我们努力坚持得到越来越多的客户认可和追随，这正是我们继续前进的大动力！创新互联专业网站制作公司,为企业提供高端网站建设,营销型网站制作,成都外贸网站建设公司,做网站,网站改版等做网站服务,建网站费用1680元起,成都数百家企业建站公司的选择。

具体如下：

思想：

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

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

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

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

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

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

完整示例：




  
  
  
  Document
  
    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;
    }
  



  开始游戏
  
       var map = document.getElementById('map');     // 使用构造方法创建蛇，     function Snake()     {       // 设置蛇的宽、高、默认走的方向       this.width = 10;       this.height = 10;       this.direction = 'right';       // 记住蛇的状态，当吃完食物的时候，就要加一个，初始为3个小点为一个蛇，       this.body = [         {x:2, y:0},  // 蛇头，第一个点         {x:1, y:0},  // 蛇脖子，第二个点         {x:0, y:0}  // 蛇尾，第三个点       ];       // 显示蛇       this.display = function() {         // 创建蛇         for (var i=0; i0; i--) {           this.body[i].x = this.body[i-1].x;           this.body[i].y = this.body[i-1].y;         }         // 根据方向处理蛇头         switch(this.direction)         {           case "left":             this.body[0].x -= 1;             break;           case "right":             this.body[0].x += 1;             break;           case "up":             this.body[0].y -= 1;             break;           case "down":             this.body[0].y += 1;             break;         }         // 判断是否出界,一蛇头判断,出界的话，         if (this.body[0].x < 0 || this.body[0].x > 79 || this.body[0].y < 0 || this.body[0].y > 39) {           clearInterval(timer);  // 清除定时器，           alert("你瞎吗？撞死了！");           // 删除旧的           for (var i=0; i

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

JS怎么实现的贪吃蛇游戏

关于“JS怎么实现的贪吃蛇游戏”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


本文名称：JS怎么实现的贪吃蛇游戏
转载来源：http://kswsj.cn/article/ppsshd.html

其他资讯