JS小游戏(飞机大战)

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="static/index.css"/>
    </head>
    <body>
        <div id="map">
            <div class="score"></div>
            <div class="start_div">
                <h1>飞机大战</h1>
                <button type="button">开始游戏</button>
            </div>
            <div class="fire_div">
                
            </div>
            <div class="gameover">
                <h1>游戏结束</h1>
                <h2>分数:</h2>
                <button type="button">重新开始</button>
            </div>
        </div>
        <script type="text/javascript" src="static/index.js"></script>
    </body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
}
#map{
    width: 512px;
    height: 650px;
    /* border: 1px solid red; */
    margin: auto;
    background: url(img/bg_1.jpg);
    background-position-y: 0px;
    position: relative;
    overflow: hidden;
}
.start_div{
    text-align: center;
    padding-top: 200px;
}
.start_div h1{
    font-size: 36px;
    color: #fff;
    margin-bottom: 100px;
}
.start_div button,.gameover button{
    width: 100px;
    height: 40px;
    background: #fff;
    border: none;
    outline: none;
    border-radius: 4px;
}
.plane{
    position: absolute;
    top: 0;
    left: 0;
}
.fire,.enemy{
    position: absolute;
}
.score{
    position: absolute;
    right: 10px;
    top: 10px;
    color:#fff;
    z-index: 99;
}
.gameover{
    position: absolute;
    width: 80%;
    height: 200px;
    background: #fff;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 100;
    text-align: center;
    padding: 20px;
    display: none;
}
.gameover h2{
    margin: 30px 0;
}
.gameover button{
    background: gainsboro;
}

JS

var startBtn=document.querySelector('.start_div button');
var startDiv=document.querySelector('.start_div');
var fireDiv=document.querySelector('.fire_div');
var map=document.querySelector('#map');
var scoreDiv=document.querySelector('.score');
var overDiv=document.querySelector('.gameover');
var replayBtn=document.querySelector('.gameover button');

var mapOffsetLeft=map.offsetLeft;   //map距离浏览器左侧的距离
var score=0;
var plane;
var fireAll=fireDiv.children;

startBtn.οnclick=startGame;
//重新开始游戏
replayBtn.οnclick=function(e){
    overDiv.style.display="none";
    score=0;
    map.removeChild(plane);//清除上一局游戏角色
    var enemy=document.querySelectorAll(".enemy");
    for(var i=0;i<enemy.length;i++){ 
        map.removeChild(enemy[i])   //清除上一局留下的敌军飞机
    }
    startGame(e)    
}

//开始游戏
function startGame(event){
    var pos={
        x:event.clientX-mapOffsetLeft-35,
        y:event.clientY-35
    }
    startDiv.style.display="none";
    mapMove();
    plane=createPlane(pos);
    enemy();
}
//背景移动效果
function mapMove(){
    map.timer=setInterval(function(){
        var y=parseInt(getComputedStyle(map).backgroundPositionY)
        y++
        map.style.backgroundPositionY=y+'px'
    },10)        
}
//创建游戏角色
function createPlane(pos){
    var oImg=new Image();
    oImg.src="static/img/plane_0.png";
    oImg.width=70;
    oImg.height=70;
    oImg.className='plane';
    map.appendChild(oImg);
    oImg.style.top=pos.y+"px";
    oImg.style.left=pos.x+"px";
    //鼠标移动事件
    document.οnmοusemοve=function(e){
        var left=e.clientX-mapOffsetLeft-35;
        var top=e.clientY-35;
        var topMin=0,topMax=map.clientHeight-70,
            leftMin=0,leftMax=map.clientWidth-70;
        left=Math.max(left,leftMin)
        left=Math.min(left,leftMax)
        top=Math.max(top,topMin)
        top=Math.min(top,topMax)    
        oImg.style.top=top+"px";
        oImg.style.left=left+"px";
    }
    fire(oImg)
    return oImg
}

//创建子弹
function fire(oImg){
    // createFire()
    map.fireInterval=setInterval(createFire,150)
    function createFire(){
        var oBul=new Image();
        oBul.src="static/img/fire.png";
        oBul.height=40;
        oBul.Width=40;
        oBul.className="fire"
        oBul.style.left=oImg.offsetLeft+35-20+"px";
        oBul.style.top=oImg.offsetTop-5+"px";
        fireDiv.appendChild(oBul);
        //子弹移动效果
        move()
        function move(){
            setInterval(function(){
                var top=parseInt(getComputedStyle(oBul).top);
                if(top <= -40){
                    fireDiv.removeChild(oBul)
                }else{
                    top-=5;
                    oBul.style.top=top+"px";
                }
            },10)
        }
    }    
}
//创建敌军
function enemy(){
    // createEnemy()
    map.enemyInterval=setInterval(createEnemy,1000)
    var count=0;
    function createEnemy(){
        count++;    
        var oEnemy=new Image();
        if(count%20 == 0){
            //大的敌军飞机
            oEnemy.src="static/img/enemy_big.png";
            oEnemy.height=50;
            oEnemy.width=75;
            oEnemy.type=1
        }else{
            //小的
            oEnemy.src="static/img/enemy_small.png";
            oEnemy.height=40;
            oEnemy.width=54;
            oEnemy.type=0
        }    
        oEnemy.className="enemy";
        oEnemy.style.top=-oEnemy.height+'px';
        oEnemy.style.left=Math.random()*(512-oEnemy.width)+"px"
        oEnemy.speed=4;   //移动速度
        oEnemy.islive=1;  //是否存在
        map.appendChild(oEnemy);
        //敌军移动效果
        move()
        function move(){
            setInterval(function(){
                var top=parseInt(getComputedStyle(oEnemy).top);
                if(top>=map.clientHeight){
                    map.removeChild(oEnemy)
                    if(score>0){
                        score--;
                        // scoreDiv.innerText=score+"分";
                    }                
                }else{
                    top+=oEnemy.speed;
                    for(var i=0;i<fireAll.length;i++){                
                            if(coll(oEnemy,fireAll[i]) && oEnemy.offsetTop>=0){
                                //子弹碰撞了飞机                            
                                if(oEnemy.islive){
                                    score++;      //分数加1
                                    console.log(score)
                                }        
                                oEnemy.islive=0;  //飞机被消灭
                                //飞机图片变成爆炸图片
                                if(oEnemy.type == 1){
                                    oEnemy.src="static/img/boom_big.png"
                                }else{
                                    oEnemy.src="static/img/boom_small.png"
                                }
                                //清除已被消灭的飞机
                                setTimeout(function(){
                                    if(oEnemy.parentNode){
                                        oEnemy.parentNode.removeChild(oEnemy)
                                    }                                    
                                },500)
                            }else{
                                //判断飞机是否存在
                                if(oEnemy.islive){
                                    oEnemy.style.top=top+"px";
                                }                                
                            }
                        }
                    // 判断游戏是否结束
                    if(coll(oEnemy,plane)){
                        clearInterval(map.enemyInterval);   //停止创建敌军飞机
                        clearInterval(map.fireInterval);  //停止发射子弹
                        overDiv.style.display='block';    //显示游戏结束界面
                        document.οnmοusemοve=null; //解除鼠标移动事件
                        overDiv.querySelector("h2").innerText="分数:"+score;  //展示分数
                    }
                }            
            },10)
        }
    } 
}
//碰撞函数
function coll(obj1,obj2){
    var top1=obj1.offsetTop,
        left1=obj1.offsetLeft,
        w1=obj1.clientWidth,
        h1=obj1.clientHeight;
        
    var top2=obj2.offsetTop,
        left2=obj2.offsetLeft,
        w2=obj2.clientWidth,
        h2=obj2.clientHeight;
    //不会碰撞的情况
    var isColl=(top1>top2+h2)||(top2>top1+h1)||(left1>left2+w2)||(left2>left1+w1);
    
    return !isColl
}

image

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值