社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 主體

js貪吃蛇網頁版遊戲特效程式碼分享（挑戰十關）_javascript技巧

WBOY
發布： 2016-05-16 15:43:15
原創
1594 人瀏覽過

js貪吃蛇網頁版遊戲特效，經測試圖片切換過程非常酷，相信大家一定都玩過這個經典小遊戲吧，但是它是怎麼實現的吶，有興趣的朋友快來學習學習吧
運行效果圖：----------------------查看效果---------------- -------

小提示：瀏覽器中如果無法正常運作，可以嘗試切換瀏覽模式。
為大家分享的js貪吃蛇網頁版遊戲特效代碼如下

<body><title>js贪吃蛇网页版游戏特效</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,] &#63; 30 :28),h:(!+[1,] &#63; 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&#63; 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貪吃蛇網頁版遊戲特效程式碼，希望大家可以喜歡。

相關標籤：
贪吃蛇游戏js写法 js实现贪吃蛇游戏 js贪吃蛇 用js写简单的贪吃蛇
來源：php.cn
上一篇：jquery實現的藍色二級導航條效果代碼_jquery 下一篇：純javascript判斷查詢日期是否為有效日期_javascript技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
Array JS 中的 52 張影像 我正在學習IT助理1年，目前我們必須使用JavaScriptHTML和CSS編寫紙牌遊戲。我的問題是：如何在JS中將52張卡片放入一個數組中，僅提供放置這些卡片的所有圖像的資料夾的...
來自於 2024-03-30 21:14:49
0
1
272
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板