飞机大战4-我的子弹

男娘i 2021-12-10 14:05 263阅读 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 条评论，263人围观）

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

相关阅读

相关 javascript打飞机程序8x8x飞机大战

js打飞机程序，飞机大战知识点包含了JavaScript[面向过程][Link 1]的全部知识点，包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。讲解

旧城等待，/ 2023年09月23日 16:00/ 0 赞/ 68 阅读

相关 pygame制作飞机大战

今天正好有些时间，就把前两天看到的一篇制作飞机大战的文章 https://blog.csdn.net/A757291228/article/details/11630529

旧城等待，/ 2023年01月19日 09:42/ 0 赞/ 95 阅读

相关 C++实现飞机大战

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

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

相关 android项目飞机大战,Android 项目之飞机大战

首先，我们要创建一个GameSurface()类；我们此次采用的是画登入界面的方式，所以GameSurface()需要继承SurfaceView类而且要执行SurfaceHol

比眉伴天荒/ 2022年10月05日 07:58/ 0 赞/ 150 阅读

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

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

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

相关 pygame的应用——python版飞机大战

利用pygame实现了简易版飞机大战。源代码如下： -- coding:utf-8 -- import pygame import sys

我不是女神ヾ/ 2022年06月07日 23:52/ 0 赞/ 164 阅读

相关 python基础案例：飞机大战

使用面对对象的方法来创建飞机大战的程序首先编写程序中需要运行的方法模块： import pygame import random '''

本是古典何须时尚/ 2022年04月23日 07:10/ 0 赞/ 235 阅读

相关 Python小游戏飞机大战

1、游戏精灵、背景精灵、英雄精灵、敌机精灵、子弹精灵 import random import pygame 屏幕大小常量 SCR

灰太狼/ 2022年04月02日 08:58/ 0 赞/ 207 阅读

相关 27飞机大战_发射子弹

1. 设计英雄和子弹类 -------------------- 英雄需求 1. 游戏启动后, 英雄出现在屏幕的水平中间位置, 距离屏幕底部

梦里梦外;/ 2022年01月09日 12:51/ 0 赞/ 230 阅读

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

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

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