js贪吃蛇网页版游戏特效代码分享（挑战十关）

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,] ? 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.documentElementfather.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].innerHTMLvar number = selectValue.match（/d+/）[0]Star.timeInterval.speed = parseInt（200/number）;Star.addStyle（select,{display:"none"}）;Star.init（）; } }</script>
以上就是为大家分享的js贪吃蛇网页版游戏特效代码，希望大家可以喜欢。