JavaScript原生編寫《飛機大戰(zhàn)坦克0》

最近在陸續(xù)整理自己以前寫過的東西颅夺,盡量放在簡書上朋截,供更多的初學(xué)者參考交流。
以前寫的飛機大戰(zhàn)吧黄,整理了一下部服,放出來,給大家個參考稚字。

開始界面.gif

思路:
1.打開頁面饲宿,背景開始走動;
2.點擊開始胆描,飛機開始不斷發(fā)射子彈瘫想,敵人隨機出現(xiàn)在上方;
3.當(dāng)敵人碰到子彈昌讲,敵人消失国夜;
4.當(dāng)敵人和飛機相遇,飛機死亡短绸,結(jié)束游戲车吹;

html頁面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飛機大戰(zhàn)</title>
    <link rel="stylesheet" type="text/css" href="飛機大戰(zhàn).css">
</head>
<body>
    <div id="mainScreen">
<!-- 背景圖片 -->
        <div id="bgImg1" class="bg"></div>
        <div id="bgImg2" class="bg"></div>
<!-- 飛機 -->
        <div id="airplane"></div>
<!-- 開始按鈕 -->
        <div id="startMenu">
            <a href="#" id="start">Start</a>
        </div>
<!-- 重新開始按鈕 -->
        <div id="restartMenu">
            <a href="#" id="restart">Game Over!<br/>重新開始</a>
        </div>
<!-- 敵人 -->
        <div class="enemy"></div>
        <div class="enemy"></div>
        <div class="enemy"></div>
        <div class="enemy"></div>
        <div class="enemy"></div>
<!-- 子彈 -->
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
    </div>

    <script type="text/javascript" src="sunckBase.js"></script>
    <script type="text/javascript" src="飛機大戰(zhàn).js"></script>
</body>
</html>
css樣式
*{
    margin: 0;
    padding: 0;
    font-family: "微軟雅黑";
}
#mainScreen{
    width: 512px;
    height: 768px;
    margin:0 auto;
    position: relative;
    overflow: hidden;
}
.bg{
    width: 512px;
    height:768px;
    position: absolute;
    background: url(bg.jpg);
}
#bgImg2{
    top:-768px;
}

#airplane{
    width: 109px;
    height: 82px;
    position: absolute;
    background: url(hero.png);
    left: 215px;
    top: 668px;
}

.enemy{
    position: absolute;
    width: 30px;
    height: 30px;
    left: -100px;
    top: 0px;

    background: url(enemy.png);
    background-size: 30px 30px;
}

.bullet{
    position: absolute;
    width: 5px;
    height: 10px;
    left: -100px;
    top: -100px;
    background: url(bullet.png);
    background-size: 5px 10px;
}
#startMenu, #restartMenu{
    position: absolute; 
    width: 512px; 
    text-align: center; 
    left: 0; 
    top: 300px;
}
#start, #restart{
    line-height:50px; 
    font-size:30px; 
    font-weight:bold; 
    color:#F00; 
    display:block; 
    text-decoration:none;
}
#restartMenu{
    display: none;
}

進(jìn)入頁面時筹裕,背景開始動

//給背景設(shè)置定時器,讓背景不停的動窄驹,形成動感
var bgTimer = setInterval(bgRun, 10);
function bgRun() {
    jsBg1.style.top = jsBg1.offsetTop + 1 + "px";
    jsBg2.style.top = jsBg2.offsetTop + 1 + "px";
    if (jsBg1.offsetTop >= 768) {
        jsBg1.style.top = "-768px";
    } else {
        if (jsBg2.offsetTop >= 768) {
            jsBg2.style.top = "-768px";
        }
    }
}

點擊開始朝卒,進(jìn)入游戲

游戲中.gif

注:其實子彈和敵人的標(biāo)簽沒有幾個,但是我們使用定時器乐埠,開始之前抗斤,現(xiàn)將表現(xiàn)都放在屏幕外,進(jìn)入游戲需要時候再改變標(biāo)簽定位丈咐,將其放入到頁面中瑞眼。

var jsStartBox=document.getElementById("startMenu")
jsStart.onclick = function startGame(){
    jsStartBox.style.display="none";
    var baseX = 0;
    var baseY = 0;
    var moveX = 0;
    var moveY = 0;
    jsAirplane.onmousedown = function(e) {
        var evt = e || window.event;
        baseX = evt.pageX;
        baseY = evt.pageY;
        jsDivBox.onmousemove = function(v) {
            var vt = v || window.event;
            moveX = vt.pageX - baseX;
            baseX = vt.pageX;
            moveY = vt.pageY - baseY;
            baseY = vt.pageY;
            jsAirplane.style.left = jsAirplane.offsetLeft + moveX + "px";
            jsAirplane.style.top = jsAirplane.offsetTop + moveY + "px";
        };
    };
    jsAirplane.onmouseup = function() {
        mainScreen.onmousemove = null;
    }
    //找到可用的子彈
    var findBulletTimer = setInterval(findBullet, 300);
    function findBullet() {
        for (var i = 0; i < jsBullets.length; i++) {
            if (jsBullets[i]["isShow"] == false) {
                jsBullets[i]["isShow"] = true;
                //將子彈移動到飛機頭
                jsBullets[i].style.left = jsAirplane.offsetLeft + jsAirplane.offsetWidth / 2 + "px";
                jsBullets[i].style.top = jsAirplane.offsetTop + "px";
                break;
            }
        }
    }
    // //讓子彈飛
    var bulletFlyTimer = setInterval(bulletFlay, 100);
    function bulletFlay() {
        for (var j = 0; j < jsBullets.length; j++) {
            if (jsBullets[j]["isShow"] == true) {
                if (jsBullets[j].offsetTop > -20) {
                    jsBullets[j].style.top = jsBullets[j].offsetTop - 20 + "px";
                } else {
                    jsBullets[j].style.left = "-100px";
                    jsBullets[j].style.top = "-100px";
                    jsBullets[j]["isShow"] = false;
                }
            }
        }
    }



    //找到可用敵人
    var findEnemyTimer = setInterval(findEnemy, 500);
    function findEnemy(){
        //找到一個沒有在屏幕中的敵人
        for (var i = 0; i < jsEnemys.length; i++) {
            if (jsEnemys[i]["isShow"] == false) {
                //標(biāo)記敵人已經(jīng)使用
                jsEnemys[i]["isShow"] = true;
                //將敵人移動到屏幕
                var left = randomNum(0, 482);
                jsEnemys[i].style.left = left + "px";
                jsEnemys[i].style.top = 0 + "px";
                break;
            }
        }
    }
    // //讓敵人下落
    var enemyLandTimer = setInterval(enemyLand, 100);
    function enemyLand() {
        for (var j = 0; j < jsEnemys.length; j++) {
            if (jsEnemys[j]["isShow"] == true) {
                var a = randomNum(4, 20);
                if (jsEnemys[j].offsetTop <= 768) {
                    jsEnemys[j].style.top = jsEnemys[j].offsetTop + a + "px";
                } else {
                    jsEnemys[j].style.left = "-100px";
                    jsEnemys[j].style.top = "0px";
                    jsEnemys[j]["isShow"] = false;
                }
            }
        }
    }   
}

打中怪物
用頁面上存在每一個敵人和每一個子彈的定位進(jìn)行簡則,如果相撞棵逊,那么怪物消失

var perishEnemyTimer = setInterval(perishEnemy, 50);
function perishEnemy() {
    for (var i = 0; i < jsBullets.length; i++) {
        if (jsBullets[i]["isShow"] == true) {
            for (var j = 0; j < jsEnemys.length; j++) {
                if (jsEnemys[j]["isShow"] == true) {
                    var ret = pzjcFunc(jsBullets[i], jsEnemys[j]);
                    if (ret) {
                        jsBullets[i].style.left = "-100px";
                        jsBullets[i].style.top = "-100px";
                        jsBullets[i]["isShow"] = false;

                        jsEnemys[j].style.left = "-100px";
                        jsEnemys[j].style.top = "-100px";
                        jsEnemys[j]["isShow"] = false;
                    }
                }
            }
        }
    }
}

死亡檢測

游戲結(jié)束.gif

用頁面上存在每一個敵人和飛機的定位進(jìn)行檢測伤疙,如果兩者相遇,那么結(jié)束游戲辆影。
注:檢測時考慮取反徒像,坦克在飛機上面,在飛機下面蛙讥,在飛機左邊厨姚,在飛機右邊是沒有碰到的時候,那么我們?nèi)》淳褪钦f明兩者已經(jīng)相遇了键菱。

//死亡檢測
var dieTimer = setInterval(die, 50);
var jsStop = document.getElementById("restartMenu")
function die() {
    for (var i = 0; i < jsEnemys.length; i++) {
        if (jsEnemys[i]["isShow"] == true) {
            var isDie = pzjcFunc(jsAirplane, jsEnemys[i]);
            if (isDie) {
                jsStop.style.display="block";
                jsAirplane.onmouseup = function() {
                    mainScreen.onmousemove = null;
                }
            }
        }
    }
}

上述兩步中用到的檢測兩者是否碰撞的函數(shù)

//死亡檢測的函數(shù)
function pzjcFunc(obj1, obj2){
    var obj1Left = obj1.offsetLeft;
    var obj1Width = obj1Left + obj1.offsetWidth;
    var obj1Top = obj1.offsetTop;
    var obj1Height = obj1Top + obj1.offsetHeight;

    var obj2Left = obj2.offsetLeft;
    var obj2Width = obj2Left + obj2.offsetWidth;
    var obj2Top = obj2.offsetTop;
    var obj2Height = obj2Top + obj2.offsetHeight;

    if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
        return true;
    } 
    return false;
}

點擊重新開始之后刷新頁面

var jsRestart=document.getElementById("restart");
jsRestart.onclick=function(){
    jsStop.style.display="none";
    window.location.reload();//刷新頁面
}

好的谬墙,現(xiàn)在我們的游戲就可以玩了,這個游戲的有些寫作思想有些是我們在以后的項目中可以學(xué)習(xí)的经备。
比如拭抬,頁面之外的空間的運用;
比如侵蒙,檢測碰撞造虎。

累不,給你個笑話聽聽纷闺,緩解一下~

我是個程序員算凿,一天我坐在路邊一邊喝水一邊苦苦檢查程序。 這時一個乞丐在我邊上坐下了犁功,開始要飯氓轰,我覺得可憐,就給了他1塊錢浸卦。 然后接著調(diào)試程序署鸡。他可能生意不好,就無聊的看看我在干什么,然后過了一會靴庆,他緩緩地指著我的屏幕說时捌,這里少了個分號。

01.PNG
02.PNG

任何時候不要吝嗇您的贊美炉抒,喜歡就贊咯奢讨,互粉互粉~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市焰薄,隨后出現(xiàn)的幾起案子禽笑,更是在濱河造成了極大的恐慌,老刑警劉巖蛤奥,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異僚稿,居然都是意外死亡凡桥,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進(jìn)店門蚀同,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缅刽,“玉大人,你說我怎么就攤上這事蠢络∷ッ停” “怎么了?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵刹孔,是天一觀的道長啡省。 經(jīng)常有香客問我,道長髓霞,這世上最難降的妖魔是什么卦睹? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮方库,結(jié)果婚禮上结序,老公的妹妹穿的比我還像新娘。我一直安慰自己纵潦,他們只是感情好徐鹤,可當(dāng)我...
    茶點故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著邀层,像睡著了一般返敬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上寥院,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天救赐,我揣著相機與錄音,去河邊找鬼。 笑死经磅,一個胖子當(dāng)著我的面吹牛泌绣,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播预厌,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼阿迈,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了轧叽?” 一聲冷哼從身側(cè)響起苗沧,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎炭晒,沒想到半個月后待逞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡网严,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年识樱,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片震束。...
    茶點故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡怜庸,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出垢村,到底是詐尸還是另有隱情割疾,我是刑警寧澤,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布嘉栓,位于F島的核電站宏榕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏侵佃。R本人自食惡果不足惜担扑,卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望趣钱。 院中可真熱鬧涌献,春花似錦、人聲如沸首有。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽井联。三九已至卜壕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間烙常,已是汗流浹背轴捎。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工鹤盒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人侦副。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓侦锯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親秦驯。 傳聞我的和親對象是個殘疾皇子尺碰,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內(nèi)容