注册 | 登陆

您的位置：阿里西西 > 网页特效 > 实例特效 > 详细内容

原生js写的贪食蛇网页版小游戏特效代码，一共设计了10关

稿源：互联网 2018-09-05 01:49:07 点击： 19187 撤稿纠错

原生js写的贪吃蛇网页版游戏特效代码，一共设计了10关，前面5关速度较慢，第8关开始能打到200分是神人，通过键盘上下左右方向操作！

以下讨论的是和原生js 贪吃蛇游戏相关的原生js写的贪食蛇网页版小游戏特效代码，一共设计了10关教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body><title>原生js写的贪吃蛇网页版游戏特效代码 demo by js.alixixi.com</title></body>
<script> 
  Star = {
    init:function(){
      var bigDiv = this.appendEle(this.addStyle(this.creatEle(),
        {w:'900',h:'600',p:'absolute',t:10,l:500}));
      for(var i = 0; i<600/30;i++){
        Star.data.arrayAll[i] = [];
        for(var j = 0; j<900/30; j++){
          div = this.addStyle(this.creatEle(),{w:(!+[1,] ? 30 :28),h:(!+[1,] ? 30 :28),f:'left',border:'1px solid #666'});
          div.setAttribute('number', i*30+j)
          this.appendEle(div,bigDiv)
          Star.data.arrayAll[i][j] = div;
        }
      }
      bigDiv = this.appendEle(this.addStyle(this.creatEle(),
        {w:'900',h:'600',p:'absolute',t:10,l:500}));


      this.pushEleInSelect(Star.data.arrayAll[9][15],Star.data.arrayAll[9][14],Star.data.arrayAll[9][13])
      this.keyBoard.apply(this,arguments);
      this.appearPoint();
      this.leftGo();
    },
    appearPoint:function(){
      var arrayIn = [];
      var number;
      for(var i = 0; i<600; i++){
        if(!this.hasInArray(Star.data.arrayAll[parseInt(i/30)][i%30].getAttribute('number'),Star.data.arraySelect)){
          arrayIn.push(Star.data.arrayAll[i])
        }
      }
      Star.data.foodNumber = number = parseInt(Math.random()*arrayIn.length);
      this.giveColor(number)
    },
    giveColor:function(number){
      var div = Star.data.arrayAll[parseInt(number/30)][number%30];
      Star.timeInterval.timeB = setInterval(function(){
        if(div.className == 'shanshuo'){
          div.className = ''
          div.style.backgroundColor = '#fff'
        }
        else{
          div.className = 'shanshuo';
          div.style.backgroundColor = '#f00'
        }
      },500)
    },
    disappearColor:function(){
      clearInterval(Star.timeInterval.timeB);
      Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30].style.backgroundColor = '#f00';
    },
    hasInArray:function(number,array){
      for(var i in array){
        if(array[i] instanceof Array){
          if(this.hasInArray(number,array[i])){
            return true;
          }
        }
        if(array[i].getAttribute && array[i].getAttribute('number') == number) return true;
      }
      return false;
    },
    keyBoard:function(){
      var self = this;
      document.onkeydown = function(e){
        e = e? e : window.event;
        switch(e.keyCode){
          case 37: if(Star.keycode == 37 || Star.keycode == 39){return;};  self.leftGo(); break;
          case 38: if(Star.keycode == 38 || Star.keycode == 40){return;};  self.upGo();break;
          case 39: if(Star.keycode == 37 || Star.keycode == 39){return;};  self.rightGo();break;
          case 40: if(Star.keycode == 38 || Star.keycode == 40){return;};  self.downGo();break;
        }
      }
    },
    leftGo:function(){
      var div, number , self = this;
      Star.keycode = 37;
      clearInterval(Star.timeInterval.timeA)
      Star.timeInterval.timeA = setInterval(function(){
        number = Star.data.arraySelect[0].getAttribute('number');
        if(number%30<=0 || self.hasInArray(number-1,Star.data.arraySelect)){
          self.guanle();
        }
        else{
          if(Star.data.foodNumber == number-1){
            self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
            self.disappearColor();
            self.appearPoint();
          }
          else{
            div = Star.data.arraySelect.pop();
            div.style.background = '#fff';

            self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30-1]);
          }
        }
      },Star.timeInterval.speed)
    },
    upGo:function(){
      var div, number , self = this;
      Star.keycode = 38;
      clearInterval(Star.timeInterval.timeA)
      Star.timeInterval.timeA = setInterval(function(){
        number = parseInt(Star.data.arraySelect[0].getAttribute('number'));

        if(parseInt(number/30)<=0 || self.hasInArray(number-30,Star.data.arraySelect)){
          self.guanle();
        }
        else{
          if(Star.data.foodNumber == number-30){
            self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
            self.disappearColor();
            self.appearPoint();
          }
          else{
            div = Star.data.arraySelect.pop();
            div.style.background = '#fff';
            self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)-1][number%30]);
          }
        }
      },Star.timeInterval.speed)
    },
    rightGo:function(){
      var div, number , self = this;
      Star.keycode = 39;
      clearInterval(Star.timeInterval.timeA)
      Star.timeInterval.timeA = setInterval(function(){
        number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
        if(parseInt(number%30)>=29 || self.hasInArray(number+1,Star.data.arraySelect)){
          self.guanle();
        }
        else{
          if(Star.data.foodNumber == number+1){
            self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
            self.disappearColor();
            self.appearPoint();
          }
          else{
            div = Star.data.arraySelect.pop();
            div.style.background = '#fff';
            self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30+1]);
          }
        }
      },Star.timeInterval.speed)
    },
    downGo:function(){
      var div, number , self = this;
      Star.keycode = 40;
      clearInterval(Star.timeInterval.timeA)
      Star.timeInterval.timeA = setInterval(function(){
        number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
        if(parseInt(number/30)>=19 || self.hasInArray(number+30,Star.data.arraySelect)){
          self.guanle();
        }
        else{
          if(Star.data.foodNumber == number+30){
            self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
            self.disappearColor();
            self.appearPoint();
          }
          else{
            div = Star.data.arraySelect.pop();
            div.style.background = '#fff';
            self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)+1][number%30]);
          }
        }
      },Star.timeInterval.speed)
    },
    guanle:function(){
      alert('撞墙了,总分：' + (Star.data.arraySelect.length-3) * parseInt(1000 / Star.timeInterval.speed));
      location.reload();
    },
    creatEle:function(tag){
      var tagName = tag || 'DIV'
      return document.createElement(tagName)
    },
    appendEle:function(ele,father){
      var father = father || document.body || document.documentElement
      father.appendChild(ele)
      return ele;
    },
    addStyle:function(ele,css){
      for(var i in css){
        switch(i){
          case 'b' : ele.style.background = css[i];       break;
          case 'l' : ele.style.left       = css[i]+'px';  break;
          case 'r' : ele.style.right      = css[i]+'px';  break;
          case 't' : ele.style.top        = css[i]+'px';  break;
          case 'd' : ele.style.down       = css[i]+'px';  break;
          case 'p' : ele.style.position   = css[i];       break;
          case 'w' : ele.style.width      = css[i]+'px';  break;
          case 'h' : ele.style.height     = css[i]+'px';  break;
          case 'f' : ele.style.cssFloat   = css[i];  ele.style.styleFloat   = css[i];     break;
          default  : ele.style[i]         = css[i];       break;
        }
      }
      return ele;
    },
    pushEleInSelect:function(){
      for(var i = 0; i<arguments.length; i++){
        Star.data.arraySelect = [arguments[i]].concat(Star.data.arraySelect)
        this.addStyle(arguments[i],{b:'#f00'})
      }
    }
  }
  Star.data={
    arrayAll : [],
    arraySelect:[],
    newPoint:null,
    foodNumber:0
  }
  Star.timeInterval={
    timeA:null,
    timeB:null
  }
  Star.keycode = 0;


  window.onload = function(){
    var select = Star.creatEle('select');
    var optionDefault = Star.creatEle('option');
    optionDefault.innerHTML = '请选择关卡'
    Star.appendEle(optionDefault,select)
    Star.addStyle(select,{w:200,h:30,p:'absolute',left:'40%',top:'40%'})
    for(var i = 0 ; i <10 ; i++){
      var option = Star.creatEle('option');
      option.innerHTML = '第' + (i+1) + '关'
      Star.appendEle(option,select);
    }
    Star.appendEle(select)
    select.onchange = function(){
      selectValue = select.options[select.selectedIndex].value || select.options[select.selectedIndex].innerHTML
      var number = selectValue.match(/d+/)[0]
      Star.timeInterval.speed = parseInt(200/number);
      Star.addStyle(select,{display:'none'});
      Star.init();
    }
  }

</script>

关于原生js写的贪食蛇网页版小游戏特效代码，一共设计了10关的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090591581.shtml方便下次再访问哦。

·上一篇： 用CSS3实现的addidas阿迪达斯标志LOGO特效代码
·下一篇： 原生JS代码制作带记事备忘功能的双月份显示效果的日历月历特效代码

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

最新新闻