JavaScript用200行代碼制作打飛機(jī)小游戲?qū)嵗?/h1>
更新時(shí)間：2017年06月21日 09:06:17 作者：baddog_
本篇文章主要介紹了JavaScript用200行代碼制作打飛機(jī)小游戲?qū)嵗?，非常具有?shí)用價(jià)值，需要的朋友可以參考下
我去，我的圖片分?jǐn)?shù)被這個(gè)錄屏軟件的水印蓋上了，扎心。
這個(gè)程序的文件以及代碼全部上傳到了github
這是自己第一次通過(guò)js寫(xiě)的小游戲，那個(gè)時(shí)候?qū)ο蟮脑砀Y(jié)構(gòu)體的概念不是特別的清晰，所以沒(méi)用對(duì)象來(lái)寫(xiě)，所以直接導(dǎo)致后期我對(duì)這個(gè)程序進(jìn)行修改的時(shí)候出現(xiàn)問(wèn)題，太過(guò)于復(fù)雜了，我終于了解什么叫做牽一發(fā)動(dòng)全身了。所以這個(gè)程序教會(huì)我一定一定要用對(duì)象的思想處理以后的問(wèn)題，尤其是這種帶屬性明顯的東西。
當(dāng)然你要問(wèn)我圖片怎么來(lái)的我只能說(shuō)都是我自己畫(huà)的所以這可是原創(chuàng)的原創(chuàng)。
代碼部分我是通過(guò)一個(gè)大的函數(shù)直接進(jìn)行所有的封裝，當(dāng)然寫(xiě)這個(gè)的時(shí)候的我完完全全對(duì)jquery么有一丁點(diǎn)認(rèn)識(shí)，所以自己寫(xiě)了漸隱漸現(xiàn)的函數(shù)。所以開(kāi)始的代碼很簡(jiǎn)單。
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();
}
}
這就是開(kāi)始接入的函數(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);
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
-
在JavaScript中通過(guò)URL傳遞漢字的方法... 2007-04-04
-
![javascript中new Array()和var arr=[]用法區(qū)別](http://img.jbzj.com/images/xgimg/bcimg1.png)
javascript中new Array()和var arr=[]用法區(qū)別
給大家分析一下在javascript中數(shù)組函數(shù)new Array()和var arr=[]用法區(qū)別，一起跟著學(xué)習(xí)一下吧。 2017-12-12
-
JavaScript中止網(wǎng)絡(luò)請(qǐng)求的常見(jiàn)方法
在JavaScript中,中止網(wǎng)絡(luò)請(qǐng)求通常依賴于所使用的網(wǎng)絡(luò)請(qǐng)求庫(kù)或框架,本文給大家介紹了是一些常見(jiàn)的方法和庫(kù),以及它們?nèi)绾沃С种兄咕W(wǎng)絡(luò)請(qǐng)求,并通過(guò)代碼講解的非常詳細(xì),需要的朋友可以參考下 2024-10-10
-
在JavaScript中獲取請(qǐng)求的URL參數(shù)
在ASP.NET后臺(tái)代碼中，對(duì)于這樣的URL請(qǐng)求地址：http://www.abc.com?id=001,我們可以通過(guò)Request.QueryString["id"]的方法很容易的獲取到URL中請(qǐng)求的參數(shù)的值，但是要在前臺(tái)js代碼中獲取請(qǐng)求的參數(shù)的值，應(yīng)該怎么做呢？ 2010-12-12
-
這篇文章主要介紹了，js中將控件隱藏的方法，以及display的屬性，有需要的朋友可以參考一下 2013-07-07
-
這篇文章主要介紹了關(guān)于前端文件下載各類方式大匯總，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。 2022-08-08
-
超級(jí)兔子讓浮動(dòng)層消失的前因后果... 2007-03-03
-
JS創(chuàng)建優(yōu)美的頁(yè)面滑動(dòng)塊效果 - Glider.js
JS創(chuàng)建優(yōu)美的頁(yè)面滑動(dòng)塊效果 - Glider.js... 2007-09-09
-
JavaScript實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下 2022-06-06
-
JS實(shí)現(xiàn)圖文并茂的tab選項(xiàng)卡效果示例【附demo源碼下載】
這篇文章主要介紹了JS實(shí)現(xiàn)圖文并茂的tab選項(xiàng)卡效果,涉及javascript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素屬性的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下 2016-09-09
最新評(píng)論
我去，我的圖片分?jǐn)?shù)被這個(gè)錄屏軟件的水印蓋上了，扎心。
這個(gè)程序的文件以及代碼全部上傳到了github
這是自己第一次通過(guò)js寫(xiě)的小游戲，那個(gè)時(shí)候?qū)ο蟮脑砀Y(jié)構(gòu)體的概念不是特別的清晰，所以沒(méi)用對(duì)象來(lái)寫(xiě)，所以直接導(dǎo)致后期我對(duì)這個(gè)程序進(jìn)行修改的時(shí)候出現(xiàn)問(wèn)題，太過(guò)于復(fù)雜了，我終于了解什么叫做牽一發(fā)動(dòng)全身了。所以這個(gè)程序教會(huì)我一定一定要用對(duì)象的思想處理以后的問(wèn)題，尤其是這種帶屬性明顯的東西。
當(dāng)然你要問(wèn)我圖片怎么來(lái)的我只能說(shuō)都是我自己畫(huà)的所以這可是原創(chuàng)的原創(chuàng)。
代碼部分我是通過(guò)一個(gè)大的函數(shù)直接進(jìn)行所有的封裝，當(dāng)然寫(xiě)這個(gè)的時(shí)候的我完完全全對(duì)jquery么有一丁點(diǎn)認(rèn)識(shí)，所以自己寫(xiě)了漸隱漸現(xiàn)的函數(shù)。所以開(kāi)始的代碼很簡(jiǎn)單。
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();
}
}
這就是開(kāi)始接入的函數(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);
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 在JavaScript中通過(guò)URL傳遞漢字的方法...2007-04-04
-
javascript中new Array()和var arr=[]用法區(qū)別
給大家分析一下在javascript中數(shù)組函數(shù)new Array()和var arr=[]用法區(qū)別，一起跟著學(xué)習(xí)一下吧。2017-12-12 -
JavaScript中止網(wǎng)絡(luò)請(qǐng)求的常見(jiàn)方法
在JavaScript中,中止網(wǎng)絡(luò)請(qǐng)求通常依賴于所使用的網(wǎng)絡(luò)請(qǐng)求庫(kù)或框架,本文給大家介紹了是一些常見(jiàn)的方法和庫(kù),以及它們?nèi)绾沃С种兄咕W(wǎng)絡(luò)請(qǐng)求,并通過(guò)代碼講解的非常詳細(xì),需要的朋友可以參考下2024-10-10 -
在JavaScript中獲取請(qǐng)求的URL參數(shù)
在ASP.NET后臺(tái)代碼中，對(duì)于這樣的URL請(qǐng)求地址：http://www.abc.com?id=001,我們可以通過(guò)Request.QueryString["id"]的方法很容易的獲取到URL中請(qǐng)求的參數(shù)的值，但是要在前臺(tái)js代碼中獲取請(qǐng)求的參數(shù)的值，應(yīng)該怎么做呢？2010-12-12 - 這篇文章主要介紹了，js中將控件隱藏的方法，以及display的屬性，有需要的朋友可以參考一下2013-07-07
- 這篇文章主要介紹了關(guān)于前端文件下載各類方式大匯總，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-08-08
- 超級(jí)兔子讓浮動(dòng)層消失的前因后果...2007-03-03
-
JS創(chuàng)建優(yōu)美的頁(yè)面滑動(dòng)塊效果 - Glider.js
JS創(chuàng)建優(yōu)美的頁(yè)面滑動(dòng)塊效果 - Glider.js...2007-09-09 -
JavaScript實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06 -
JS實(shí)現(xiàn)圖文并茂的tab選項(xiàng)卡效果示例【附demo源碼下載】
這篇文章主要介紹了JS實(shí)現(xiàn)圖文并茂的tab選項(xiàng)卡效果,涉及javascript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素屬性的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09