重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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://cqcxhl.com/article/ppsshd.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP