HTML+CSS+JS雷霆战机

链接:https://pan.baidu.com/s/1T-fO7b9em1gCzM7SaZkZrw
提取码:u1ef
复制这段内容后打开百度网盘手机App,操作更方便哦

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雷霆战机</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- <canvas id="canvas" width="480" height="650"></canvas> -->
    <div id="canvas"></div>
    <div class="background" id="background">
    <div class="btn" id="btn"></div>
    </div> 
    <!-- <div class="hero" id="hero"></div> -->
</body>
    <script src="index.js"></script>
    <!-- <script src="myplane.js"></script> -->
</html>

style.css

.loading{
    background-image: url(start_logo.jpg);
    width: 512px;
    height: 768px;
    position: absolute;
    left: 500px;
    top: 0px;
}
.small{
    background-image: url(enemy1.png);
    width: 80px;
    height: 115px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.mid{
    background-image: url(enemy2.png);
    width: 102px;
    height: 79px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.big{
    background-image: url(super_boss.png);
    width: 200px;
    height: 302px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.hero{
    background-image: url(hero.png);
    width: 117px;
    height: 120px;
    position: absolute;
    left: 700px;
    top: 600px;
}
.background{
    background-image: url(bg.jpg);
    width: 512px;
    height: 768px;
    position: absolute;
    left: 500px;
    top: 0px;
}
.bullet{
    background-image: url(bullet.png);
    width: 31px;
    height: 68px;
    position: absolute;
    left:0px;
    top: 0px;
}

.give{
    background-image: url(supply.png);
    width: 40px;
    height: 41px;
    position: absolute;
    left:0px;
    top: 0px;
}
.btn{
    width: 512px;
    height: 768px;
    margin: 20px auto;
    text-align: center;
    line-height: 60px;
    font-size: 26px;
    cursor: pointer;
}
.boom{
    background-image: url(轰雷击1.png);
    width: 533px;
    height: 533px;
    position: absolute;
    left:0px;
    top: 0px;
}
.boom1{
    background-image: url(boom1.png);
    width: 80px;
    height: 120px;
    position: absolute;
    left:0px;
    top: 0px;
}
.boom2{
    background-image: url(boom2.png);
    width: 94px;
    height: 119px;
    position: absolute;
    left:0px;
    top: 0px;
}
.boom3{
    background-image: url(boom3.png);
    width: 90px;
    height: 120px;
    position: absolute;
    left:0px;
    top: 0px;
}
.boom4{
    background-image: url(boom4.png);
    width: 81px;
    height: 120px;
    position: absolute;
    left:0px;
    top: 0px;
}
.boom5{
    background-image: url(boom5.png);
    width: 78px;
    height: 120px;
    position: absolute;
    left:0px;
    top: 0px;
}
.boom6{
    background-image: url(boom6.png);
    width: 71px;
    height: 120px;
    position: absolute;
    left:0px;
    top: 0px;
}

index.js

var enemys1 = [];
var enemys2 = [];
var enemys3 = [];
var score=0;
var canvas = document.getElementById("canvas");
// var context = canvas.getContext("2d");
function random(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}
function paintText(){
    // canvas.clearRect(20,20,480,685);
    // canvas.font = "bold 30px 微软雅黑";
    canvas.innerHTML = "SCORE:" + score;
}
var cont = document.getElementById("background");
// 选择按钮元素
var btn = document.getElementById("btn");

btn.onclick = function(){
     begin();
}

function begin(){
    myPlane.init();
    myPlane.fire();
    paintText();
    setInterval(() => {
    var t=new enemy1();
    enemys1.push(t);
    }, 2000);
    setInterval(() => {
    var t=new enemy2();
    enemys2.push(t);
    }, 3000);
    setInterval(() => {
    var t=new enemy3();
    enemys3.push(t);
    }, 7000);
    setInterval(() => {
    new give();
    }, 5000);
}

class Bullet{
    constructor(){
        // 选择容器
        this.cont = document.getElementById("background");
        // 创建子弹元素
        this.bulletEle = document.createElement("div");
        this.bulletEle.className = "bullet";
        this.cont.appendChild(this.bulletEle);
        // 设置子弹的初始位置
        this.bulletEle.style.left = myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth/2 - this.bulletEle.offsetWidth/2 + "px";

        this.bulletEle.style.top = myPlane.meElement.offsetTop - this.bulletEle.offsetHeight + "px";
        // 开始运动
        this.move();
    }
    move(){
        var that = this;
        // 开启计时器
        that.t = setInterval(function(){
            // 判断是否到顶
            if(that.bulletEle.offsetTop < 0){
                // 停止计时器
                clearInterval(that.t);
                // 让子弹爆炸
                that.die();
            }else{
                // 持续向上运动
                that.bulletEle.style.top = that.bulletEle.offsetTop - 5 + "px";
            }
        }, 10);
    }
    die(){
        var that=this;
        clearInterval(that.t);
        for(var i=0;i<myPlane.bullets.length;i++)
            if(myPlane.bullets[i].bulletEle === this.bulletEle){
                myPlane.bullets.splice(i, 1);
                that.bulletEle.remove();
                break;
            }
        // 将当前这个子弹对象,从子弹数组中删除
        }
}

var myPlane = {
    init() {
        var that = this;
        var contElement = document.getElementById("background");

        that.meElement = document.createElement("div");
        that.meElement.className = "hero";
        contElement.appendChild(that.meElement);

        var maxLeft = contElement.offsetWidth - that.meElement.offsetWidth;
        var maxTop = contElement.offsetHeight - that.meElement.offsetHeight;

        that.meElement.style.top = maxTop + "px";
        that.meElement.style.left = contElement.offsetWidth / 2 - that.meElement.offsetWidth / 2 + "px";

        // 为了游戏体验,给整个网页添加移动事件
        document.onmousemove = function (e) {
            // console.log("鼠标移动了")
            // 获取鼠标在页面上的坐标,准备用来计算出我的飞机的位置
            // console.log(e.pageX, e.pageY)

            // 提前计算我的飞机的位置
            var l = e.pageX - 500 - that.meElement.offsetWidth / 2;
            var t = e.pageY - that.meElement.offsetHeight / 2;
            // 对我的飞机的位置进行边界限定
            // 右
            if (l > maxLeft) {
                l = maxLeft
            }
            // 左
            if (l < 0) {
                l = 0
            }
            // 上
            if (t < 0) {
                t = 0
            }

            // 将边界限定后的位置,设置给我的飞机
            that.meElement.style.left = l + "px";
            that.meElement.style.top = t + "px";
        }
        // setInterval(() => {
        //     var plane = document.createElement("div");
        //     contElement.appendChild(plane);
        //     plane.className = "bullet";

        //     plane.style.left = that.meElement.style.left;
        //     plane.style.top = that.meElement.style.top;
        //     // alert(plane.style.left,plane.style.top);
        //     var t = setInterval(function () {
        //         if (plane.offsetTop === contElement.style.offsetTop) {
        //             clearInterval(t);
        //         }
        //         else {
        //             plane.style.top = plane.offsetTop - 5 + "px";
        //         }
        //     }, 50);
        // }, 1000);
    },
    die() {
        // 为了游戏体验,当飞机要爆炸了,就不能再跟着鼠标走了
        document.onmousemove = null;

        var that = this;

        // 切换我的飞机的爆炸图
        var num = 1;
        var t = setInterval(function () {
            if (num === 7) {
                clearInterval(t);
                that.meElement.remove();
                alert("游戏结束,您的分数为:"+score);
                if(confirm("是否重新开始")){
                    location.reload();
                }else{
                    close();
                }
            } else {
                that.meElement.style.background = "url(boom" + num + ".png)";
                num++
            }
        }, 100);
    },
    fire(){
        var that = this;
        that.t = setInterval(function(){
            // 创建子弹对象
            var b = new Bullet();
            // 将子弹对象保存到我的飞机对象身上的一个数组属性内
            that.bullets.push(b);
        }, 300);
    },
    bullets:[]
}

class enemy1 {
    constructor() {
        var that = this;
        var cont = document.getElementById("background");
        that.plane = document.createElement("div");
        cont.appendChild(that.plane);
        that.plane.className = "small";
        that.plane.style.left = random(0, cont.offsetWidth - that.plane.offsetWidth) + "px";
        that.plane.style.top = -that.plane.offsetHeight + "px";
        that.t = setInterval(function(){
            if(that.plane.offsetTop > cont.offsetHight){
                clearInterval(that.t);
                that.die();
            }else{
                that.plane.style.top = that.plane.offsetTop + 5 + "px";
                for(var i=0;i<myPlane.bullets.length;i++){
                    if(
                        // 左边
                        myPlane.bullets[i].bulletEle.offsetLeft + myPlane.bullets[i].bulletEle.offsetWidth > that.plane.offsetLeft
                        &&
                        // 右边
                        that.plane.offsetLeft + that.plane.offsetWidth > myPlane.bullets[i].bulletEle.offsetLeft
                        &&
                        // 上边
                        myPlane.bullets[i].bulletEle.offsetTop + myPlane.bullets[i].bulletEle.offsetHeight > that.plane.offsetTop
                        &&
                        // 下边
                        that.plane.offsetTop + that.plane.offsetHeight > myPlane.bullets[i].bulletEle.offsetTop
                    ){
                        myPlane.bullets[i].die();
                        that.die();
                    }
                }

                // 敌机和我的飞机的碰撞检测
                if(
                    // 左边
                    myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > that.plane.offsetLeft
                    &&
                    // 右边
                    that.plane.offsetLeft + that.plane.offsetWidth > myPlane.meElement.offsetLeft
                    &&
                    // 上边
                    myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > that.plane.offsetTop
                    &&
                    // 下边
                    that.plane.offsetTop + that.plane.offsetHeight > myPlane.meElement.offsetTop
                ){
                    // 我的飞机爆炸
                    // 游戏结束的功能,在我的飞机的爆炸内部实现
                    myPlane.die();
                    clearInterval(that.t);
                }

            }
        }, 30);
    }
    die() {
        score+=10;
        paintText();
        var that = this;
        var num = 1;
        clearInterval(that.t);
        var t = setInterval(function () {
            if (num === 7) {
                clearInterval(t);
                that.plane.remove();
            } else {
                that.plane.className="boom"+num;
                num++;
            }
        }, 100);
    }
}

class enemy2 {
    constructor() {
        this.hp=3;
        var cont = document.getElementById("background");
        this.plane = document.createElement("div");
        cont.appendChild(this.plane);
        this.plane.className = "mid";
        this.plane.style.left = random(0, cont.offsetWidth - this.plane.offsetWidth) + "px";
        this.plane.style.top = -this.plane.offsetHeight + "px";
        var that=this;
        that.t = setInterval(function(){
            if(that.plane.offsetTop > cont.offsetHight){
                clearInterval(that.t);
                that.die();
            }else{
                that.plane.style.top = that.plane.offsetTop + 4 + "px";
                for(var i=0;i<myPlane.bullets.length;i++){
                    if(
                        // 左边
                        myPlane.bullets[i].bulletEle.offsetLeft + myPlane.bullets[i].bulletEle.offsetWidth > that.plane.offsetLeft
                        &&
                        // 右边
                        that.plane.offsetLeft + that.plane.offsetWidth > myPlane.bullets[i].bulletEle.offsetLeft
                        &&
                        // 上边
                        myPlane.bullets[i].bulletEle.offsetTop + myPlane.bullets[i].bulletEle.offsetHeight > that.plane.offsetTop
                        &&
                        // 下边
                        that.plane.offsetTop + that.plane.offsetHeight > myPlane.bullets[i].bulletEle.offsetTop
                    ){
                        that.hp--;
                        myPlane.bullets[i].die();
                        if(that.hp===0){
                        that.die();
                        }
                    }
                }

                // 敌机和我的飞机的碰撞检测
                if(
                    // 左边
                    myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > that.plane.offsetLeft
                    &&
                    // 右边
                    that.plane.offsetLeft + that.plane.offsetWidth > myPlane.meElement.offsetLeft
                    &&
                    // 上边
                    myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > that.plane.offsetTop
                    &&
                    // 下边
                    that.plane.offsetTop + that.plane.offsetHeight > myPlane.meElement.offsetTop
                ){
                    // 我的飞机爆炸
                    // 游戏结束的功能,在我的飞机的爆炸内部实现
                    myPlane.die();
                    clearInterval(that.t);
                }

            }
        }, 50);
    }
        // var t = setInterval(function () {
        //     if (that.plane.offsetTop > cont.offsetHeight - 300) {
        //         that.die();
        //         clearInterval(t);
        //     }
        //     else {
        //         that.plane.style.top = that.plane.offsetTop + 3 + "px";
        //     }
        // }, 50);
    die() {
        score+=20;
        paintText();
        var that = this;
        clearInterval(that.t);
        var num = 1;
        var t = setInterval(function () {
            if (num === 5) {
                clearInterval(t);
                that.plane.remove();
            } else {
                that.plane.style.background = "url(enemy_down" + num + ".png)";
                num++;
            }
        }, 150);
    }
}
class enemy3 {
    constructor() {
        this.hp=5;
        var cont = document.getElementById("background");
        this.plane = document.createElement("div");
        cont.appendChild(this.plane);
        this.plane.className = "big";
        this.plane.style.left = random(0, cont.offsetWidth - this.plane.offsetWidth) + "px";
        this.plane.style.top = -this.plane.offsetHeight + "px";
        var that=this;
        that.t = setInterval(function(){
            if(that.plane.offsetTop > cont.offsetHight){
                clearInterval(that.t);
                that.die();
            }else{
                that.plane.style.top = that.plane.offsetTop + 3 + "px";
                for(var i=0;i<myPlane.bullets.length;i++){
                    if(
                        // 左边
                        myPlane.bullets[i].bulletEle.offsetLeft + myPlane.bullets[i].bulletEle.offsetWidth > that.plane.offsetLeft
                        &&
                        // 右边
                        that.plane.offsetLeft + that.plane.offsetWidth > myPlane.bullets[i].bulletEle.offsetLeft
                        &&
                        // 上边
                        myPlane.bullets[i].bulletEle.offsetTop + myPlane.bullets[i].bulletEle.offsetHeight > that.plane.offsetTop
                        &&
                        // 下边
                        that.plane.offsetTop + that.plane.offsetHeight > myPlane.bullets[i].bulletEle.offsetTop
                    ){
                        that.hp--;
                        myPlane.bullets[i].die();
                        if(that.hp===0){
                        that.die();
                        }
                    }
                }

                // 敌机和我的飞机的碰撞检测
                if(
                    // 左边
                    myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > that.plane.offsetLeft
                    &&
                    // 右边
                    that.plane.offsetLeft + that.plane.offsetWidth > myPlane.meElement.offsetLeft
                    &&
                    // 上边
                    myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > that.plane.offsetTop
                    &&
                    // 下边
                    that.plane.offsetTop + that.plane.offsetHeight > myPlane.meElement.offsetTop
                ){
                    // 我的飞机爆炸
                    // 游戏结束的功能,在我的飞机的爆炸内部实现
                    myPlane.die();
                    clearInterval(that.t);
                }

            }
        }, 150);
    }
    die() {
        score+=30;
        paintText();
        var that = this;
        clearInterval(that.t);
        var num = 1;
        var t = setInterval(function () {
            if (num === 7) {
                clearInterval(t);
                that.plane.remove();
            } else {
                that.plane.style.background = "url(super_boss_down" + num + ".png)";
                num++;
            }
        }, 200);
    }
}

class give {
    constructor() {
        var cont = document.getElementById("background");
        var plane = document.createElement("div");
        cont.appendChild(plane);
        plane.className = "give";
        plane.style.left = random(0, cont.offsetWidth - plane.offsetWidth) + "px";
        plane.style.top = 0
        var t = setInterval(function () {
            if (plane.offsetTop == "1000px") {
                clearInterval(t);
            }
            else {
                plane.style.top = plane.offsetTop + 8 + "px";
            }
        if(
            // 左边
            myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > plane.offsetLeft
            &&
            // 右边
            plane.offsetLeft + plane.offsetWidth > myPlane.meElement.offsetLeft
            &&
            // 上边
            myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > plane.offsetTop
            &&
            // 下边
            plane.offsetTop + plane.offsetHeight > myPlane.meElement.offsetTop
        ){
            plane.remove();
            new boom();
        }
    }, 50);
    }
}

class boom{
     constructor() {
        var that = this;
        var cont = document.getElementById("background");
        that.plane = document.createElement("div");
        cont.appendChild(that.plane);
        that.plane.className = "boom";
        that.plane.style.left = cont.offsetLeft-that.plane.offsetWidth+"px";
        that.plane.style.top = "0px";
        var num = 1;
        var t = setInterval(function () {
            if (num === 11) {
                clearInterval(t);
                that.plane.remove();
            } else {
                that.plane.style.background = "url(轰雷击" + num + ".png)";
                num++;
                for(var i=0;i<enemys1.length;i++){
                    enemys1[i].die();
                    enemys1.splice(i,1);
                }
                for(var i=0;i<enemys2.length;i++){
                enemys2[i].die();
                enemys2.splice(i,1);
                }
                for(var i=0;i<enemys3.length;i++){
                enemys3[i].die();
                enemys3.splice(i,1);
                }
            }
        }, 100);
}
}


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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值