基于JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲的示例代碼
演示
技術(shù)棧
今天沒(méi)有什么特別要講的,要不我們提前介紹下次要做的技術(shù)吧。你不說(shuō)話(huà)就是同意了。我們開(kāi)始了。 下圖是正則表達(dá)式的一些總結(jié)大家可以先看看哦
(function() { /** * 1. JavaScript使用正則式的函數(shù) */ const str = "abchelloasdasdhelloasd"; // 1. 查找 console.log(str.search("h")); // 3 // 2. 替換 console.log(str.replace(/a/, "s")); // sbchelloasdasdhelloasd // 3. 切割 console.log(str.split(/ab/)); // ["", "bchello", "sd", "sdhello", "sd"] // 4. RegExp.prototype.test方法:檢測(cè)該字符串是否包含指定串 console.log(/hello/.test("abchello")); // true // 5. RegExp.prototype.exec方法:將滿(mǎn)足條件的字符串放到數(shù)組 let reg=/hello/g; reg.exec("abchelloasdasdhelloasd"); // ["hello"] }());
源碼
<div id='box'></div>
定義敵方戰(zhàn)機(jī)
//敵方戰(zhàn)機(jī) 'enemy' : function(){ var oEnemy = Game.ctE('img'); oEnemy.src='images/enemy.png'; oEnemy.className='enemy'; Game.box.appendChild(oEnemy); var left = Math.random()*(Game.box.clientWidth-Game.getstyle(oEnemy,'width')/2); var top = Game.getstyle(oEnemy,'top'); oEnemy.style.left=left+'px'; oEnemy.timer=setInterval(function(){ /*敵軍下落速度*/ top+=3; oEnemy.style.top=top+'px'; if(top>Game.box.clientHeight){ clearInterval(oEnemy.tiamr); if(!oEnemy.parentNode){ return; }else{ oEnemy.parentNode.removeChild(oEnemy); }; }else{ var allB = Game.getclass(Game.box,'img','bullet'); for(var i=0;i<allB.length;i++){ if(Game.pz(oEnemy,allB[i])){ allB[i].parentNode.removeChild(allB[i]); oEnemy.src='images/boom.png'; clearInterval(oEnemy.timer); setTimeout(function(){ if(!oEnemy.parentNode){ return; }else{ oEnemy.parentNode.removeChild(oEnemy); }; },500); Game.num+=10; Game.oScore.innerHTML=Game.num+'分'; Game.fenshu=Game.oScore.innerHTML; }; }; if(Game.pz(oEnemy,Game.oPlane)){ oEnemy.src='images/boom.png'; clearInterval(oEnemy.timer); setTimeout(function(){ if(!oEnemy.parentNode){ return; }else{ oEnemy.parentNode.removeChild(oEnemy); }; },500); Game.oPlane.src='images/boom2.png'; clearInterval(Game.bTimer); clearInterval(Game.start.timer); document.onmousemove=null; setTimeout(function(){ Game.over(); },3000); }; }; },30); },
定義我方戰(zhàn)機(jī)
'plane' : function(ev,t,c){ Game.box.appendChild(Game.oPlane); var bT = Game.box.offsetTop + Game.oPlane.clientHeight/2 + (Game.box.offsetHeight-Game.getstyle(Game.box,'height'))/2; var bL = Game.box.offsetLeft + Game.oPlane.clientWidth/2 + (Game.box.offsetWidth-Game.getstyle(Game.box,'width'))/2; var top = ev.pageY - bT; var left = ev.pageX - bL; Game.oPlane.style.cssText='top:'+top+'px;left:'+left+'px;'; var topMax = Game.getstyle(Game.box,'height')-Game.oPlane.clientHeight/2; var leftMin = -Game.oPlane.clientWidth/2; var leftMax = Game.getstyle(Game.box,'width')-Game.oPlane.clientWidth/2; document.onmousemove = function(ev){ ev = ev||event; top = ev.pageY - bT; left = ev.pageX - bL; if(top<0){ top=0; }else if(top>topMax){ top = topMax; }; if(left<leftMin){ left = leftMin; }else if(left>leftMax){ left = leftMax; }; Game.oPlane.style.cssText='top:'+top+'px;left:'+left+'px;'; }; /*子彈生成速度 */ Game.bTimer=setInterval(function(){Game.bullet(top,left,c);},t); },
碰撞檢測(cè)
//碰撞檢測(cè) 'pz' : function(obj1,obj2){ var T1 = Game.getstyle(obj1,'top'); var B1 = T1+Game.getstyle(obj1,'height'); var L1 = Game.getstyle(obj1,'left'); var R1 = L1+Game.getstyle(obj1,'width'); var T2 = Game.getstyle(obj2,'top'); var B2 = T2+Game.getstyle(obj2,'height'); var L2 = Game.getstyle(obj2,'left'); var R2 = L2+Game.getstyle(obj2,'width'); if(T1>B2||L1>R2||B1<T2||R1<L2){ return false; }else{ return true; }; },
到此這篇關(guān)于基于JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲的示例代碼的文章就介紹到這了,更多相關(guān)JS飛機(jī)大戰(zhàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
不使用XMLHttpRequest實(shí)現(xiàn)異步加載 Iframe和script
運(yùn)用Iframe和script可以實(shí)現(xiàn)簡(jiǎn)單的異步加載,沒(méi)有使用XMLHttpRequest,需要的朋友可以參考下2012-10-10JsonServer安裝及啟動(dòng)過(guò)程圖解
這篇文章主要介紹了JsonServer安裝及啟動(dòng)過(guò)程圖解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02JavaScript類(lèi)型系統(tǒng)之正則表達(dá)式
正則又叫規(guī)則或模式,是一個(gè)強(qiáng)大的字符串匹配工具。javascript通過(guò)RegExp類(lèi)型來(lái)支持正則表達(dá)式,本文給大家介紹javascript類(lèi)型系統(tǒng)之正則表達(dá)式,對(duì)js正則表達(dá)式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01JS來(lái)動(dòng)態(tài)的修改url實(shí)現(xiàn)對(duì)url的增刪查改
通過(guò)get方式提交post表單等方式來(lái)動(dòng)態(tài)修改url存在諸多的不妥,因此,想到了通過(guò)JS來(lái)動(dòng)態(tài)的修改url,來(lái)實(shí)現(xiàn)對(duì)url的增刪查改2014-09-09利用原生JS實(shí)現(xiàn)懶加載lazyLoad的三種方法總結(jié)
加載頁(yè)面的時(shí)候,圖片一直都是流量大頭,針對(duì)圖片的性能方法也挺多的比如base64、雪碧圖等;懶加載也是其中一種,這篇文章主要給大家介紹了關(guān)于利用原生JS實(shí)現(xiàn)懶加載lazyLoad的三種方法,需要的朋友可以參考下2021-07-07跟我學(xué)Nodejs(一)--- Node.js簡(jiǎn)介及安裝開(kāi)發(fā)環(huán)境
這篇文章主要介紹了Node.js簡(jiǎn)介及安裝開(kāi)發(fā)環(huán)境,需要的朋友可以參考下2014-05-05JavaScript實(shí)現(xiàn)點(diǎn)擊切換驗(yàn)證碼及校驗(yàn)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊切換驗(yàn)證碼及校驗(yàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果
這篇文章主要為大家詳細(xì)介紹了bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12