飞机大战4-我的子弹

男娘i 2021-12-10 14:05 317阅读 0赞

<link rel="stylesheet" href="dafeiji.css">
    <body>
        <div id="body_main" class="main">
            <ul id="options" class="options">
                <li value="1">超级困难</li>
                <li value="2">非常困难</li>
                <li value="3">比较困难</li>
                <li value="4">就选我吧</li>
            </ul>
        </div>
    </body>

\`

\`

<script>
        // 飞机大战：
            // 引擎：难度选择，logo，loading，游戏开始
            // 我的飞机：创建，跟随鼠标移动，开火
            // 我的子弹：创建，移动，死亡
            // 敌机：创建，移动，碰撞检测，死亡
        
        // 引擎：
        function Engine(){
            // E1.选择元素
            this.li = document.querySelectorAll(".options li");
            this.main = document.getElementById("body_main");
            // E2.绑定事件
            this.init();
        }
        Engine.prototype.init = function(){
            var that = this;
            for(var i=0;i<this.li.length;i++){
                this.li[i].onclick = function(){
                    // E3.存储难度，删除按钮组
                    that.v = this.value;
                    this.parentNode.remove();
                    // E4.创建logo和loading
                    that.load();
                }
            }
        }
        Engine.prototype.load = function(){
            this.logo = createDiv("logo");
            this.loading = createDiv("loading");
            // var loading=document.createElement("loading");
            // loading.className="loading";
            // this.main.appendChild(loading);
            // 切换照片 属性精确
            // var logo=document.createElement("logo");
            // logo.className="logo";
            // this.main.appendChild(logo);
            
            // loading图的切换
            var i = 0;
            this.loadingTimer = setInterval(() => {
                this.loading.style.backgroundImage = `url(images/loading${(i++)%3+1}.png)`;
            }, 300);
    
            // 背景图的运动
            var j=0;
            setInterval(()=>{
                this.main.style.backgroundPositionY = (j+=2)+"px";
            },30)
    
            setTimeout(() => {
                // E5.游戏开始
                this.gameStart()
            }, 300);
        }
        Engine.prototype.gameStart = function(){
            // 删除logo和loading，清除没用的计时器
            this.logo.remove()
            this.loading.remove()
            clearInterval(this.loadingTimer);
            // E6.开始创建我的飞机
            plane.init(this.main);
            // P3.开火
            plane.fire(this.v);
            // 敌机
            
        }
    
        // 我的飞机：
        var plane = {
            // main:document.getElementById("body_main"),
            init:function(main){
                this.main = main;
                // P1.创建我的飞机，设置默认位置
                this.ele = createDiv("my-warplain");
                this.ele.style.left = (this.main.offsetWidth - this.ele.offsetWidth)/2 + "px";
                this.ele.style.bottom = 0;
                // P2.跟随鼠标移动
                this.move();
            },
            move:function(){
                var that = this;
                document.onmousemove = function(eve){
                    var e = eve || window.event;
                    // 计算位置
                    var l = e.clientX - that.main.offsetLeft - that.ele.offsetWidth/2;
                    var t = e.clientY - that.ele.offsetHeight/2;
                    // 边界限定
                    if(l<0) l=0;
                    if(t<0) t=0;
                    if(l>that.main.offsetWidth - that.ele.offsetWidth){
                        l=that.main.offsetWidth - that.ele.offsetWidth
                    }
                    // 生效位置
                    that.ele.style.left = l + "px";
                    that.ele.style.top = t + "px";
                }
            },
            fire:function(v){
                // 根据难度，持续开火
                setInterval(() => {
                    new Bullet()
                }, 1000/v);
            }
        }
    
        // 我的子弹：
        function Bullet(){
            // B1.开始创建
            this.init();
        }
        Bullet.prototype = {
            constructor:Bullet,
            init:function(){
                // 创建
                this.ele = createDiv("bullet");
                // 设置默认位置：在飞机的头部
                this.ele.style.left = plane.ele.offsetLeft + plane.ele.offsetWidth/2 - this.ele.offsetWidth/2 + "px";
                this.ele.style.top = plane.ele.offsetTop - this.ele.offsetHeight + "px";
                // B2.开始运动
                this.move()
            },
            move:function(){
                var speed = 8;  //子弹的步长
    
                this.timer = setInterval(() => {
                    if(this.ele.offsetTop <= 100){
                        clearInterval(this.timer);
                        // B3.死亡
                        this.die()
                    }else{
                        this.ele.style.top = this.ele.offsetTop - speed + "px";
                    }
                }, 30);
            },
            die:function(){
                // 先换死亡的class
                this.ele.className = "bullet_die";
                // 切换第一张爆炸图
                setTimeout(() => {
                    this.ele.style.backgroundImage = "url(images/die2.png)";
                }, 100);
                // 删除子弹元素
                setTimeout(() => {
                    this.ele.remove()
                }, 200);
            }
        }
    
        // 敌机：
        class Enemy{
            constructor(){
    
            }
            init(){
    
            }
        }
    
        function createDiv(classname){
            var div = document.createElement("div");
            div.className = classname;
            document.getElementById("body_main").appendChild(div);
            return div;
        }
    
        new Engine();
    </script>

转载于:https://www.cnblogs.com/sansancn/p/10909952.html

发表评论取消回复

表情：

评论列表（有 0 条评论，317人围观）

还没有评论，来说两句吧...

相关阅读

相关 python飞机大战

里只有基础代码,整体未完善,但是能跑,所有图片都有 1.英雄飞机 import time import pygame fr...

拼搏现实的明天。/ 2024年04月17日 06:06/ 0 赞/ 106 阅读

相关 Java飞机大战

一、项目分析 1、设计步骤在一个Java Swing的小游戏中，首先需要考虑的是组件的绘制，其次是如何让需要运动的组件运动起来，最后是如何检测物体的碰撞等。（1）

我不是女神ヾ/ 2024年03月26日 14:06/ 0 赞/ 99 阅读

相关帮我用python写一个飞机大战

好的，我可以帮助你用 Python 写一个飞机大战游戏。首先，我们需要导入 Python 的 pygame 库。pygame 是一个专门用于制作游戏的库，它提供了许多有用的

一时失言乱红尘/ 2024年03月26日 08:15/ 0 赞/ 92 阅读

相关【JAVA】飞机大战

代码和图片放在这个地址了： https://gitee.com/r77683962/fighting/tree/master 20231016： 1、原来画面比较闪烁

怼烎@/ 2024年02月29日 00:50/ 0 赞/ 72 阅读

相关 JavaScript—飞机大战

今天来写个游戏，飞机大战 1，布局 ![797834-20190506091715589-1848248745.png][] 2，思路 1，

ゝ一世哀愁。/ 2023年10月11日 13:15/ 0 赞/ 64 阅读

相关飞机大战2

一：框架搭建： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

快来打我*/ 2023年06月26日 14:29/ 0 赞/ 78 阅读

相关飞机大战1

准备工作：导入pygame: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

逃离我推掉我的手/ 2023年06月26日 10:34/ 0 赞/ 25 阅读

相关 C++实现飞机大战

C++小游戏飞机大战废话不多说，直接看代码吧（转载） include<iostream> include<windows.h> incl

清疚/ 2023年01月02日 12:22/ 0 赞/ 220 阅读

相关 swing 飞机大战三自己飞机的移动和发射子弹

自己飞机的移动是让面板使用鼠标监听移动事件(接口`MouseMotionListener`)，发射子弹是使用点击事件(接口`MouseListener`) 自己飞机有子弹，敌

小鱼儿/ 2022年06月14日 05:22/ 0 赞/ 206 阅读

相关飞机大战4-我的子弹

<link rel="stylesheet" href="dafeiji.css"> <body> <div id="body_main" cl

男娘i/ 2021年12月10日 14:05/ 0 赞/ 318 阅读