原生 js貪吃蛇，可選關(guān)挑戰(zhàn)第10關(guān)

2024-09-05 12:21:08

字體：大中小

供稿：網(wǎng)友

原生 js貪吃蛇網(wǎng)頁(yè)小游戲，可選關(guān)挑戰(zhàn)，據(jù)說(shuō)第10關(guān)是不容易過(guò)的了，呵呵，我第6關(guān)就沒(méi)過(guò)，這游戲速度有點(diǎn)快，需要眼疾手快才行，原生JS所寫，相信對(duì)學(xué)習(xí)JavaScript是不錯(cuò)的參考示例。

<title> js貪吃蛇</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><body></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

上一篇：一個(gè)JS寫的射擊游戲框架示例

下一篇：推箱子-Js游戲特效