JavaScript—飞机大战2版

前面的思路对了 BUG 出在了计时器和没有加判断页面是否存在元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        #view {

            margin: 0 auto;

            width: 400px;

            height: 680px;

            background-color: #00b4ff;

            opacity: 0.9;

            position: relative;

        }

        /*自己飞机的样式*/

        #air {

            width: 34px;

            height: 26px;

            position: absolute;

            background-color: palegreen;

        }

        /*敌机的样式*/

        .hair {

            width: 34px;

            height: 26px;

            position: absolute;

            background-color: darkmagenta;

        }

        /*子弹的样式*/

        .bullet {

            width: 4px;

            height: 10px;

            position: absolute;

            background-color: red;

        }

        h1{

            position: absolute;

            top: 300px;

            left: 700px;

        }

    </style>

</head>

<body>

<div id="view">

</div>

<h1 id="h1">0</h1>

</body>

<script>

    //获取区域

    let view = document.getElementById('view');

    // 创建自己的飞机

    let air = document.createElement('div');

    let count=0

    let  h1=document.getElementById('h1')

    air.id = 'air'

    document.body.appendChild(air)

    document.onmousemove = function (e) {

        e = e || window.event

        // 边距

        let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth

        let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight

        if (aX && aY) {

            air.style.left = e.clientX - air.offsetWidth / 2 + 'px';

            air.style.top = e.clientY - air.offsetHeight / 2 + 'px'

            ObJ_billet.bif = true

        }

    }

    //监听飞机子弹

    let GAME_time = setInterval(function () {

    //搜索所有的子弹，相遇 就被击毙。相遇条件 飞机左<=left 子弹<=you     top 子弹<=飞机

    for (let i = 0; i < ObJ_billet.arr.length; i++) {

        let barr = ObJ_billet.arr[i].split('|')

        for (let j = 0; j < ObJ_Hair.arr.length; j++) {

            let harr = ObJ_Hair.arr[j].split('|')//id x y

            if (document.getElementById(barr[0]) && document.getElementById(harr[0])) {

                console.log(1)

                let yif = parseInt(barr[2])+3 <= parseInt(harr[2]) //Y相遇

                let xif = parseInt(barr[1]) >= parseInt(harr[1]) && parseInt(barr[1]) <= parseInt(harr[1]) + 25

                if (yif && xif) {

                    count++;

                    h1.innerText=count+''

                    //消失元素 关闭记时器

                    let billet_a = document.getElementById(barr[0])

                    let hair_a = document.getElementById(harr[0])//获取敌机

                    billet_a.parentNode.removeChild(billet_a)//删除子弹

                    hair_a.parentNode.removeChild(hair_a)//删除敌机

                    // clearInterval(runBl_time)

                    //clearInterval(runHair_time)

                }

            }

        }

    }

    },100)

    let caerBl_time = setInterval(

        function () {

            if (ObJ_billet.bif) {

                //在自己飞机的上方

                caeationBillet()

                caeationHair()

            }

        }, 1000)

    //用来保存子弹数据

    let ObJ_billet = {

        name: 'billet_',

        num: 0,

        bif: false,

        //是否在区域

        arr: []//保存id，xy坐标

    }

    let ObJ_Hair = {

        name: 'hair_',

        num: 0,

        arr: []//保存id，xy坐标

    }

    // let runBl_time = null;//子弹定时器

    // let runHair_time = null;//飞机定时器

    // // 子弹运动

    function run_Billet(element, i) {

       let runBl_time = setInterval(function () {

            element.style.top = element.offsetTop - 1 + 'px'

            ObJ_billet.arr[i] = element.id + '|' + element.offsetLeft + '|' + element.offsetTop

            // 超出边界消失

            if (element.offsetTop < 0) {

                element.parentNode.removeChild(element);

                 clearInterval(runBl_time)

            }

        }, 30)

    }

    // 敌机运动

    function run_Hair(element, i) {

      let runHair_time = setInterval(function () {

            element.style.top = element.offsetTop + 1 + 'px'

            ObJ_Hair.arr[i] = element.id + '|' + element.offsetLeft + '|' + element.offsetTop + '|' + ''

            // 超出边界消失

            if (element.offsetTop > view.offsetHeight - element.offsetHeight) {

                element.parentNode.removeChild(element);

                clearInterval(runHair_time)

            }

        }, 30)

    }

    //创建子弹

    function caeationBillet() {

        let billet = document.createElement('div')

        billet.className = 'bullet'

        billet.id = ObJ_billet.name + ObJ_billet.num;

        document.body.appendChild(billet)

        //子弹在飞机上方

        billet.style.left = air.offsetLeft + air.offsetWidth / 2 + 'px'

        billet.style.top = air.offsetTop - billet.offsetHeight - 1 + 'px'

        //保存数据

        ObJ_billet.arr[ObJ_billet.num] = billet.id + '|' + billet.offsetLeft + '|' + billet.offsetTop + '|' + '1'

        //子弹运动

        run_Billet(billet, ObJ_billet.num)

        // 自增1

        ObJ_billet.num += 1

        //挡子弹有最多50个

        if (ObJ_billet.num >= 50) {

            ObJ_billet.num = 0;

        }

    }

    // 创建敌机

    function caeationHair() {

        let hair = document.createElement('div')

        hair.className = 'hair'

        hair.id = ObJ_Hair.name + ObJ_Hair.num;

        document.body.appendChild(hair)

        //飞机由上往下 left随机大小0到view宽度

        let random_L = randomNum(view.offsetLeft, view.offsetLeft + view.offsetWidth - hair.offsetWidth)

        hair.style.left = random_L + 'px'

        hair.style.top = 0 + 'px'

        ObJ_Hair.arr[ObJ_Hair.num] = hair.id + '|' + hair.offsetLeft + '|' + hair.offsetTop

        run_Hair(hair, ObJ_Hair.num)

        // 自增1

        ObJ_Hair.num += 1

        //飞机有最多100个

        if (ObJ_Hair.num >= 50) {

            ObJ_Hair.num = 0;

        }

    }

    //生成从minNum到maxNum的随机数

    function randomNum(minNum, maxNum) {

        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum)

    }

</script>

</html>

　　总结：

　　　　　　BUG还是有，就是让他最小化以后过一会就乱了。。。。还有我用了很多计时器套循环，我担心效率与内存空间的问题。

当然还是满激动的。特别是第一次敌机和子弹相遇的时候。就好像电视剧《创业时代》郭鑫年说的这就是我的孩子一样

JavaScript—飞机大战2版的更多相关文章

Java飞机大战MVC版
PlaneWar Java飞机大战MVC版 //无聊时偷的雷霆战机素材写了一个飞机大战,本意是练习mvc,但写得还是不清晰 github下载:https://github.com/dejavudwh/ ...
javascript飞机大战-----001分析
1.游戏引擎首先要做飞机大战要考虑的是这个游戏被分成了哪几大部分?这样我们一块一块去做,特别清晰明了.那么接下来我们就简单的分析下飞机大战分成了哪几大部分 1.游戏引擎 2.英雄机 3.敌机 4.子 ...
JavaScript—飞机大战
今天来写个游戏,飞机大战 1,布局 2,思路 1,动态创建自己的飞机让它在规定的区域,跟着鼠标运动. 2,在自己飞机的上方,间隔1s生成子弹.子弹往上移动当top:0 子弹消失 3,每隔1s 产生 ...
javascript 飞机大战完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
javascript飞机大战-----0010完整版代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
javascript飞机大战-----008积分
/* 创建敌机: */ function Enemy(blood,speed,imgs,scroe){ //敌机left this.left = 0; //敌机top this.top = 0; // ...
javascript飞机大战-----006创建敌机
先写一个敌机类 /* 创建敌机: */ function Enemy(blood,speed,imgs){ //敌机left this.left = 0; //敌机top this.top = 0; ...
javascript飞机大战-----009游戏结束
/* 游戏引擎 */ var Engine = { //刚开始的游戏状态 gameStatus:false, //所以敌机 enemy:{}, //子弹 bullet:{}, //得分 scroe:0 ...
javascript飞机大战-----007爆炸效果
要检验什么时候碰撞,我们必须了解什么时候不相撞.以上四种情况是不相撞的时候首先在引擎里面写好什么时候碰撞什么时候不碰撞 /* 游戏引擎 */ var Engine = { //刚开始的游戏状态 ga ...

随机推荐

LeetCode559 N叉树的最大深度
题目: 思路: 直接递归求解最大深度就可以,这里主要记录一下Java中比较获得两个数中最大值的方法. import java.math.*; class Solution { public int m ...
Java语言学习总结扩展篇包装类的概念及其使用
包装类包装类的概述 Java提供了两个类型系统,基本类型与引用类型,使用基本类型在于效率,然而很多情况,会创建对象使用,因为对象可以做更多的功能,如果想要我们的基本类型像对象一样操作,就可以使用基本 ...
四十六、SAP的Message中E和W区别
一.如果写的是E,则报红色的信息,如图效果如下二.如果是写的是W,则报黄色的信息效果如下
二、【重点】环境安装：通过淘宝 cnpm 快速安装使用 React，生成项目，运行项目、安装项目
1.cnpm代替npm 如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程. 我们建议在 React 中使用 CommonJS 模块系统,比如 browserify ...
Python pip设置为清华镜像
设置为默认镜像 pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
HDU - 3068 最长回文（manacher算法）
题意:给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 分析: manacher算法: 1.将字符串中每个字符的两边都插入一个特殊字符.(此操作的目的是,将字符串 ...
Day3-T3
原题目 Describe:又是这种最大子矩阵捆绑一堆条件的题 code: #pragma GCC optimize(2) #include<bits/stdc++.h> #define j ...
4 react 简书引入 redux 的 combineReducers 对 redux 数据进行管理
1. src 下的 common 下的 header 创建 store 文件夹下创建 reducer.js # src/common/header/store/reducer.js const st ...
ubuntu下解压.zip文件乱码
解决方法查看文件: lsar BA_schur.zip 解压文件: unar BA_schur.zip
面试题（7）之 leetcode-003
给定一个字符串,请你找出其中不含有重复字符的最长子串的长度. 示例1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc&quo ...

JavaScript—飞机大战2版

JavaScript—飞机大战2版的更多相关文章

随机推荐

热门专题