自作JavaScript飛機大戰小遊戲

2021-09-13 10:10:33 字數 2312 閱讀 9979

做遊戲就要有素材的啦 ,以下是在愛給網找到的素材:

首先3個頁面的開啟我們用div來做,通過更改div的隱藏屬性display: none;與顯示display: block來達到頁面切換的效果:

確定

就這麼短短的幾行樣式**足夠啦!

設定完css樣式後我們就可以開始js**的編寫。

首先我們建立好各個檔案,儲存相應的材料及**

var one = document.getelementbyid('one'),

haemal = one.queryselector("p"),

score = one.getelementsbyclassname("score")[0],

tow = document.getelementbyid('tow'),

three = document.getelementbyid('three'),

air = tow.queryselectorall(".plane li"),

start = tow.queryselectorall(".list li"),

air = 0, //代表哪架飛機

plane = 0, //第幾形態

index;

var arrplane = [['img/my1.png','img/my11.png','img/my111.png'],['img/my2.png','img/my22.png','img/my222.png'],['img/my3.png','img/my33.png','img/my333.png'],['img/my4.png','img/my44.png','img/my444.png']],

arrbullet = [['img/pd1.png','img/pd11.png','img/pd111.png'],['img/pd2.png','img/pd22.png','img/pd222.png'],['img/pd3.png','img/pd33.png','img/pd333.png'],['img/pd4.png','img/pd44.png','img/pd444.png']];

for (let i=0; istartgame(air,i)遊戲開始函式傳遞2個引數,air代表選則的飛機,i代表選則的關卡,接下來我們將寫遊戲開始函式

//開始遊戲

function startgame(air,index)

dio.src = music[n];

dio.autoplay = "autoplay";

dio.loop = "loop";

if (n==1) ,800)

}}

如何實現生成我方飛機呢,接下來我們來看看:

function myair(air)

} //觸控移動事件

one.ontouchstart = function(e)else

}

讓我們來生成子彈吧

//生成子彈

one.bullettimer = setinterval(function()else

} },400);

設定完我方飛機我們就開始製作 生成敵軍 啦,這個故事是乙個漫長的事情,讓我們來簡單分析一下:

1.生成敵軍,也就是通過建立img標籤實現 位置math.random()實現

2.敵軍下落,通過改變img標籤的top值可以實現哦

3.敵軍與我方子彈碰撞 敵軍消失 子彈消失 生成**效果img標籤

4.生成我軍補給 子彈擊中公升級我軍的 形態 與 子彈形態

4.敵軍撞到我方飛機 關閉所有運動函式 背景聲音 遊戲結束 彈出得分

下面是碰撞判斷

//敵軍與子彈碰撞

for(let i=0; i接下來我們來了解以下碰撞判斷函式: iscollision()

//碰撞過程

function iscollision(obj,enemy)

通過乙個矩形體左邊距離是否大於另乙個矩形右邊距離的方法來監測是否沒有碰撞: return false(沒有碰撞) / true(碰撞)

這是比較重要的一步哦 **並不難好好理解以下吧!

以下是飛機大戰小遊戲**連線 永久有效哦 拿去玩玩吧 不過要用谷歌瀏覽器開啟哦 沒做相容呢!

javascript常見四大排序

氣泡排序 var arr 23,34,11,22,19,18 氣泡排序的思路分析 第1輪 第1步 23,34,11,22,19,18 第1輪 第2步 23,11,34,22,19,18 第1輪 第3步 23,11,22,34,19,18 第1輪 第4步 23,11,22,19,34,18 第1輪 第...

利用python語言製作乙個簡單的飛機大戰小遊戲

第二步驟 當飛機大戰所需要的素材包準備完成後,下面我們開始對玩家操控的飛機的程式進行編寫 程式如下 import pygame import random import time class regou definit self,plane,screen self.screen screen sel...

JavaScript 最新特性實現的三大黑科技

有時候,我們希望批量執行一組非同步任務,但是不是 並行 而是依次執行,這組任務是動態的,在乙個陣列裡,當然我們可以用 for 迴圈然後乙個乙個 await 執行,但是還有另外一種方式 js bin on jsbin.com 在上面的例子裡,我們定義了乙個 taskreducer async func...