Rumah >hujung hadapan web >tutorial js >js Perkongsian kod kesan khas permainan versi web Ular (mencabar sepuluh tahap)_kemahiran javascript
Kesan khas permainan versi web ular js, proses penukaran gambar sangat keren selepas diuji Saya percaya semua orang pasti pernah bermain permainan klasik ini, tetapi bagaimana ia dilaksanakan?
Paparan operasi: -----------------------------
Lihat kesan--------- ------- -------
Kod kesan khas permainan versi web js Snake yang dikongsi dengan anda adalah seperti berikut
<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.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>
Di atas ialah kod kesan khas permainan versi web js Snake yang dikongsi dengan semua orang.