我去，我的圖片分?jǐn)?shù)被這個(gè)錄屏軟件的水印蓋上了，扎心。
這個(gè)程序的文件以及代碼全部上傳到了github
這是自己第一次通過js寫的小游戲，那個(gè)時(shí)候?qū)ο蟮脑砀Y(jié)構(gòu)體的概念不是特別的清晰，所以沒用對(duì)象來寫，所以直接導(dǎo)致后期我對(duì)這個(gè)程序進(jìn)行修改的時(shí)候出現(xiàn)問題，太過于復(fù)雜了，我終于了解什么叫做牽一發(fā)動(dòng)全身了。所以這個(gè)程序教會(huì)我一定一定要用對(duì)象的思想處理以后的問題，尤其是這種帶屬性明顯的東西。
當(dāng)然你要問我圖片怎么來的我只能說都是我自己畫的所以這可是原創(chuàng)的原創(chuàng)。
代碼部分我是通過一個(gè)大的函數(shù)直接進(jìn)行所有的封裝，當(dāng)然寫這個(gè)的時(shí)候的我完完全全對(duì)jquery么有一丁點(diǎn)認(rèn)識(shí)，所以自己寫了漸隱漸現(xiàn)的函數(shù)。所以開始的代碼很簡單。
window.onload = function(){ var Base = new base(); var start = document.getElementById('start'); start.onclick = function(){ Base.fadehide('start'); getId('path').style.display='block'; Base.fadeshow('path'); Base.createBullteAndMovePlain(); }}這就是開始接入的函數(shù)。漸隱漸現(xiàn)的函數(shù)是這個(gè)。
this. fadehide = function (name){ var i = 1; var odiv = document.getElementById(name); function show(){ odiv.style.opacity = i; i-=0.1; if(i<0){odiv.style.display = 'none';clearInterval(t); } } var t = setInterval(show,10); return this; } this.fadeshow = function (name){ var i = 0; var odiv = document.getElementById(name); function show(){ odiv.style.opacity = i; i+=0.1; if(i>1){clearInterval(t);} } var t = setInterval(show,100); return this; }剩下的代碼，懶得解釋了，里面有注釋。
//生成子彈 this.createBullteAndMovePlain = function (){ var arr= []; var bulletNum=[]; var way = path.getElementsByClassName('way'); var play =document.getElementById('bullet'); var flag =0; var score=0; //獲取按鍵 document.onkeydown = function(evt){ var ev = evt||event; //left keyCode is 39 //right keyCode is 37 switch(ev.keyCode){ case 39: flag=(flag+1)%5; break; case 37: if(flag==0){ flag=Math.abs(flag-4); }else if(flag>0){ flag=(flag-1)%5; } break; } //移動(dòng)飛機(jī) function movePlain (){ var plain = document.getElementById('player'); switch(flag){ case 0:player.style.left='0px';break; case 1: player.style.left='100px';break; case 2: player.style.left='200px';break; case 3: player.style.left='300px';break; case 4:player.style.left='400px';break; } } movePlain(); } function createBulltes(){ //生成敵人 var newenemy = document.createElement('img'); newenemy.src = 'img/enemy.png'; newenemy.style.position='absolute'; newenemy.style.zIndex='5'; var enemyTop=0; var sign=0; var randomNum = Math.random()*5; sign=Math.floor(randomNum); newenemy.style.top='0px'; switch(sign){ case 0:newenemy.style.left='0px';break; case 1: newenemy.style.left='100px';break; case 2: newenemy.style.left='200px';break; case 3: newenemy.style.left='300px';break; case 4:newenemy.style.left='400px';break; }way[0].appendChild(newenemy); arr.unshift(newenemy); //生成子彈 var bullet = document.getElementById('bullet'); var newbullet = document.createElement('img'); var plain = document.getElementById('player'); newbullet.className='bullet'; newbullet.style.position='absolute'; newbullet.style.top='560px'; newbullet.src='img/bullet.png'; newbullet.style.zIndex='4'; var bulletTop=0; switch(flag){ case 0: newbullet.style.left='45px';player.style.left='0px';;break; case 1: newbullet.style.left='145px';player.style.left='100px';;break; case 2: newbullet.style.left='245px';player.style.left='200px';break; case 3: newbullet.style.left='345px';player.style.left='300px';break; case 4: newbullet.style.left='445px';player.style.left='400px';break; }way[2].appendChild(newbullet); bulletNum.unshift(newbullet); //分?jǐn)?shù)圖片 function scoreup(score){ var imgs = document.getElementsByClassName('score'); var imgsnum=score.toString().split(''); for(var i=0; i<imgsnum.length; i++){ imgs[4-i].src='img/'+imgsnum[i]+'.png'; } } //判定觸碰 function decide(){ for(var i = 0;i<arr.length; i++){ for(var j=0; j<bulletNum.length; j++) if(arr[i].offsetLeft==(bulletNum[j].offsetLeft-45)&&((arr[i].offsetTop+98)>bulletNum[j].offsetTop-10&&(arr[i].offsetTop+98)<bulletNum[j].offsetTop+10)){ score++; scoreup(score); arr[i].parentNode.removeChild(arr[i]); bulletNum[j].parentNode.removeChild(bulletNum[j]); } } var player=document.getElementById('player'); for(var i=0; arr.length; i++){ if(arr[i].offsetLeft==player.offsetLeft&&(arr[i].offsetTop+70)==player.offsetTop){ alert('game over');location.reload(); } } } //放在一起的移動(dòng) function bulletmove (){ bulletTop=newbullet.offsetTop; enemyTop=newenemy.offsetTop; // alert('buller:'+newbullet.offsetLeft); // alert(newenemy.offsetLeft); function move (){ bulletTop-=6; enemyTop+=1; newbullet.style.top=bulletTop+'px'; newenemy.style.top=enemyTop+'px'; decide(); if(bulletTop==0&&enemyTop==560){ newbullet.style.opacity='0'; newenemy.style.opacity='0'; clearInterval(t); }else if(bulletTop==0){ newbullet.parentNode.removeChild(newbullet); bulletNum.pop(); }else if(enemyTop==560){ newenemy.parentNode.removeChild(newenemy);arr.pop(); } } var t = setInterval(move,20); } bulletmove(); } var s=setInterval(createBulltes,3000); } }以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
