原生js实现的贪吃蛇网页版游戏完整实例

2019-11-20 12:27:05

字体：大中小

来源：转载

供稿：网友

本文实例讲述了原生js实现的贪吃蛇网页版游戏。分享给大家供大家参考。具体实现方法如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>原生js写的贪吃蛇网页版游戏</title></head><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.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></html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：10条建议帮助你创建更好的jQuery插件

下一篇：JQuery中层次选择器用法实例详解