javascript实现简单飞机大战小游戏

Camille ·

更新时间:2024-09-21

· 105 次阅读

本文实例为大家分享了javascript实现飞机大战小游戏的具体代码，供大家参考，具体内容如下

效果图

html文件

<!DOCTYPE html>
<html lang='zh'>
<head>
    <meta charset='UTF-8'>
    <title>mm</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
            user-select:none;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <!-- 游戏等级 -->
        <div id="level">
            <h1>飞机大战 Lv1</h1>
            <p>简答模式</p>
            <p>一般模式</p>
            <p>困难模式</p>
            <p>地狱模式</p>
        </div>
        <!-- 游戏界面 -->
        <div id="map">
            <!-- 我军飞机 -->
            <!-- 敌军飞机1 -->
            <!-- 敌军飞机2 -->
            <div class="allFire">
                <!-- 我军子弹 -->
            </div>
        </div>
        <!-- 游戏得分 -->
        <div id="score">0</div>
        <!-- 结束游戏的界面 -->
        <div id="settlement">
            <div>最终得分:<span class="totalscore">10</span></div>
            <div>获得评价:<span class="appraise">青铜</span></div>
            <button>重新开始</button>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>

css文件

.wrap{
    position:relative;
    width: 400px;
    height: 600px;
    margin:10px auto;
    overflow:hidden;
}
/* 游戏等级 */
#level{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width:100%;
    height:100%;
    font-family:"楷体";
    background:url(../img/bg_1.jpg)repeat 0/cover;
}
#level h1{
    width:100%;
    color:#fff;
    text-align:center;
    padding:100px 0;
}
#level p{
    text-align:center;
    padding:10px 20px;
    letter-spacing:5px;
    font-weight:bold;
    background-color:#fff;
    margin:30px 120px;
    border-radius:5px;
    box-shadow:1px 1px 10px 1px #aaa;
}
#level p:hover{
    cursor:pointer;
    background-color:#4D6BA2;
    color:#fff;
}
/*  游戏界面  */
#map{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(../img/bg_2.jpg)repeat 0/cover;
}
#map .plane,/*我军飞机*/
    .enemy,/*敌军飞机*/
    .boom,/*敌军飞机爆炸*/
    .boom2,/*我军飞机爆炸*/
    .fire{/*我军飞机子弹*/
        position:absolute;
}
#map .plane,.enemy{
    z-index:5;
}
#map .boom{
    z-index:6;
    animation : enemyDisappear 0.8s 1;
    animation-fill-mode : forwards;/*显示最后一个关键帧*/
}
#map .boom2{
    z-index:6;
    animation : planeDisappear 2s 1;
    animation-fill-mode : forwards;
}
#map .fire{
    z-index:7;
}
/* 敌军消失的动画 */
@keyframes enemyDisappear {
    from { opacity : 1; }
    to{ opacity : 0; }
}
/* 我军消失的动画 */
@keyframes planeDisappear {
    0% { opacity : 1; }
    20%{ opacity : 0; }
    40%{ opacity : 1; }
    60%{ opacity : 0; }
    80%{ opacity : 1; }
    100%{ opacity : 0; }
}
/*  游戏得分  */
#score{
    display:none;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
    padding:10px 20px;
    color:#fff;
}
/* 结束游戏的界面 */
#settlement{
    display:none;
    position:absolute;
    top:30%;
    left:0;
    z-index:100;
    width:100%;
    height:35%;
    font-family:"楷体";
}
#settlement div{
    margin:20px 0;
    text-align:center;
    font-size:20px;
    color:#fff;
}
#settlement div span{
    font-size:24px;
}
#settlement div .totalscore{
    color:red;
}
#settlement div .appraise{
    color:green;
}
#settlement button{
    margin:30px 34% 0;
    padding:10px 20px;
    background-color:rgba(255,255,255,.8);
    letter-spacing : 2px;
    border:none;
    font-family:"楷体";
    font-size:20px;
    font-weight:bold;
    border-radius:5px;
}
#settlement button:hover{
    cursor:pointer;
    background-color:rgba(255,255,255,1);
}

js文件

let oWrap = document.querySelector(".wrap"),
    oLevel = document.getElementById("level"),//游戏等级盒子
    oLevelList = document.querySelectorAll("#level p"),//游戏等级
    oMap = document.getElementById("map"),//游戏界面
    oAllFire = document.querySelector(".allFire"),//子弹盒子
    oScore = document.getElementById("score"),//游戏得分
    oSettlement = document.getElementById("settlement"),//结算界面
    oButton =  oSettlement.querySelector("button");//重新开始
for(let i=0; i<oLevelList.length; i++){
    oLevelList[i].onclick = function(e){
        startGame(i,
            {
                x : e.clientX - oWrap.offsetLeft,//获取鼠标到游戏界面的位置
                y : e.clientY - oWrap.offsetTop
            }
        )
    };
}
//重新开始
oButton.onclick = function aginGame(){
    //背景图停止移动
    cancelAnimationFrame(oWrap.timer);
    //隐藏得分界面
    oSettlement.style.display = "none";
    //显示等级
    oLevel.style.display = "block";
    //分数清0
    oScore.innerHTML = 0;
    //
    oMap.innerHTML = `<div id="allFire"></div>`;
    oAllFire = document.getElementById("allFire");
}
//开始游戏
function startGame(level,pos){
    hiddenShow();
    bgImgMove(level);
    let myPlane = createPlane(level,pos);
    createEnemy(level,myPlane);
    oWrap.score = 0;
}
//点击游戏等级的消失与隐藏
function hiddenShow(){
    oLevel.style.display = "none";
    oMap.style.display = "block";
    oScore.style.display = "block";
}
//背景图移动
function bgImgMove(level){
    oMap.style.backgroundImage = `url(./img/bg_${level+1}.jpg)`;
    let bgMove = 0;
    (function bgMoveTimer(){
        bgMove++;
        oMap.style.backgroundPositionY = bgMove + "px";
        oWrap.timer = requestAnimationFrame(bgMoveTimer);
    })();
}
//我军飞机飞机
function createPlane(level,pos){
    //创建我军飞机
    let oImgPlane = new Image();
    oImgPlane.src = "./img/plane_0.png";
    oImgPlane.width = 70;
    oImgPlane.height = 70;
    oImgPlane.className = "plane";
    oImgPlane.style.left = pos.x - oImgPlane.width / 2  + "px";
    oImgPlane.style.top = pos.y - oImgPlane.height / 2 + "px";
    oMap.appendChild(oImgPlane);
    //鼠标移动是飞机不断获取鼠标位置
    let minLeft = -oImgPlane.width/2,
        minTop = 0,
        maxLeft = oMap.clientWidth - oImgPlane.width/2,
        maxTop = oMap.clientHeight - oImgPlane.height/2;
    document.onmousemove = function(e){
        let left = e.clientX - oWrap.offsetLeft - oImgPlane.width / 2,
            top = e.clientY - oWrap.offsetTop - oImgPlane.height / 2;
        left = Math.min(left,maxLeft);
        left = Math.max(left,minLeft);
        top = Math.min(top,maxTop);
        top = Math.max(top,minTop);
        oImgPlane.style.left = left + "px";
        oImgPlane.style.top = top + "px";
    }
    fire(level,oImgPlane)
    return oImgPlane;
}
//子弹
function fire(level,oImgPlane){
    //创建子弹
    function createFires(isDouble,n){
        let createFire = new Image();
        createFire.src = "./img/fire.png";
        createFire.width = 30;
        createFire.height = 30;
        createFire.className = "fire"
        let left = oImgPlane.offsetLeft + oImgPlane.width/2 - createFire.width/2 ,
            top = oImgPlane.offsetTop - oImgPlane.height/2;
        if(isDouble){
            left = left + oImgPlane.width/3*n;
        }
        createFire.style.left = left + "px";
        createFire.style.top = top + "px";
        oAllFire.appendChild(createFire);
        // 子弹运动
        function fireMove(){
            if(createFire.parentNode){
                top -= 10;
                if(top< -createFire.height){
                    oAllFire.removeChild(createFire);
                }else{
                    createFire.style.top = top + "px";
                    requestAnimationFrame(fireMove);
                }
            }
        }
        setTimeout(()=>{
            requestAnimationFrame(fireMove);
        },20);
    }
    //定时生成子弹的频率
    oWrap.fireTimer = setInterval(()=>{
        if(oWrap.score>=100){
            createFires(true,-1);
            createFires(true,+1);
        }else{
            createFires();
        }
    },[200,150,100,50][level])
}
//创建敌军
let enemyNum = 1;
function createEnemy(level,myPlane){
    let speed = [4,6,8,10][level];//游戏模式相对应的的等级飞机下落的速度
        MapW = oMap.clientWidth,
        MapH = oMap.clientHeight;
    oWrap.enemyTimer = setInterval(()=>{
        let createEnemy = new Image();
        createEnemy.index = enemyNum%20 ? 1:0;
        createEnemy.src = `./img/enemy_${["big","small"][createEnemy.index]}.png`;
        createEnemy.width = [100,50][createEnemy.index];
        createEnemy.height = [100,50][createEnemy.index];
        //敌军的血量
        createEnemy.hp = [4,1][createEnemy.index];
        createEnemy.className = "enemy"; 
        //敌军首次出现的位置
        let enemyTop = -createEnemy.height;
        createEnemy.style.top = enemyTop + "px";
        createEnemy.style.left = Math.random()*MapW - createEnemy.width/2 + "px";
        oMap.appendChild(createEnemy);
        enemyNum++;
        console.log(createEnemy.offsetLeft,createEnemy.offsetTop)
        //判断敌军的下落运动
        function enemyMove(){
            if(createEnemy.parentNode){
                enemyTop += speed;
                if(enemyTop>=MapH){
                    oMap.removeChild(createEnemy);
                }else{
                    createEnemy.style.top = enemyTop + "px";
                    //子弹与敌军发生碰撞
                    let arrAllFire = oAllFire.children;
                    for(let i=arrAllFire.length-1; i>=0; i--){
                        let newFire = arrAllFire[i];
                        if(isCollide(newFire,createEnemy)){
                            //撞上的 移出子弹
                            oAllFire.removeChild(newFire)
                            //血量减一
                            createEnemy.hp--;
                            if(createEnemy.hp === 0){
                                oWrap.score += [5,1][createEnemy.index];
                                oScore.innerText = oWrap.score;
                                //敌军发生爆炸 
                                boom({
                                    x : createEnemy.offsetLeft,
                                    y : createEnemy.offsetTop,
                                    w : createEnemy.width,
                                    h : createEnemy.height,
                                    i : createEnemy.index
                                });
                                oMap.removeChild(createEnemy);
                                return;
                            }
                        }
                    }
                    //我军与敌军发生碰撞
                    if(myPlane.parentNode&&isCollide(createEnemy,myPlane)){
                        //敌军产生爆炸
                        boom({
                            x:createEnemy.offsetLeft,
                            y:createEnemy.offsetTop,
                            w:createEnemy.width,
                            h:createEnemy.height,
                            i:createEnemy.index
                        });
                        //我军发生爆炸
                        boom({
                            x:myPlane.offsetLeft,
                            y:myPlane.offsetTop,
                            w:myPlane.width,
                            h:myPlane.height,
                            i:2
                        });
                        oMap.removeChild(createEnemy);
                        oMap.removeChild(myPlane)
                        //游戏结束
                        gameOver();
                        return;
                    }
                    requestAnimationFrame(enemyMove);
                }
            }
        }
        requestAnimationFrame(enemyMove);
    },[400,350,300,200][level])
}
//是否发生碰撞
function isCollide(newFirePlane,createEnemy){
    //子弹/我军飞机的位置
    let fireTop = newFirePlane.offsetTop,
        fireLeft = newFirePlane.offsetLeft,
        fireBottom = fireTop + newFirePlane.clientHeight,
        fireRight = fireLeft + newFirePlane.clientWidth; 
    //飞机的位置
    let createEnemyTop = createEnemy.offsetTop,
        createEnemyLeft = createEnemy.offsetLeft,
        createEnemyRight = createEnemyLeft+createEnemy.clientWidth,
        createEnemyBotoom = createEnemyTop+createEnemy.clientHeight;
        //没碰上的四种结果
    return !(fireTop>createEnemyBotoom || fireBottom<createEnemyTop || fireLeft>createEnemyRight || fireRight<createEnemyLeft)
}
//发生爆炸
function boom(data){
    let createBoom = new Image();
    createBoom.src = `./img/${["boom_big","boom_small","plane_0"][data.i]}.png`;
    createBoom.className = "boom" + ["","","2"][data.i];
    createBoom.width = data.w;
    createBoom.height = data.h;
    createBoom.style.top = data.y + "px";
    createBoom.style.left = data.x + "px";
    oMap.appendChild(createBoom);
    setTimeout(()=>{
        createBoom.parentNode&&oMap.removeChild(createBoom);
    },[1200,1200,2500][data.i])
}
//游戏结束
function gameOver(){
    clearInterval(oWrap.enemyTimer);
    clearInterval(oWrap.fireTimer);
    document.onmousemove = null;
    gameSettlement();
}
//结算游戏
function gameSettlement(){
    let oTotalscore = oSettlement.querySelector(".totalscore"),
        oAppraise = oSettlement.querySelector(".appraise");
    if(oWrap.score < 50){
        oAppraise.innerHTML = "青铜";
    }else if(oWrap.score <100){
        oAppraise.innerHTML = "黄金";
    }else if(oWrap.score <200){
        oAppraise.innerHTML = "钻石";
    }else{
        oAppraise.innerHTML = "王者";
    }
    oTotalscore.innerHTML = oWrap.score;
    oScore.style.display = "none";
    oSettlement.style.display = "block";
};

小游戏飞机大战 JavaScript

1024 个赞