JS学习十五：飞机大战坦克示例

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>飞机大战</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" charset="UTF-8"/>
    </head>
    <body>
        <div id="mainScreen">
            <!-- 背景图bg1,bg2：一张图片，上下相连在一起 -->
            <div id="bg1" class="bg"></div>
            <div id="bg2" class="bg"></div>
            <!-- 飞机 -->
            <div id="aireplane"></div>
        </div>
    </body>   
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/loop.js" charset="UTF-8"></script>
</html>

style.css

* {
    margin: 0;
    padding: 0;
}
#mainScreen {
    width: 433px;
    height: 650px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
/* overflow: hidden;的作用：超过它的宽高的部分隐藏。用于上下滚动的两个div，超出的图像隐藏 */
.bg {
    width: 433px;
    height: 650px;
    position: absolute;
    background-image: url(../img/bg.jpg);
}
/* div1和div2上下相连，设置div2在div1上方top:-650px。要让这两个div上下动起来，需要写js */
#bg2 {
    top: -650px;
}

/* 飞机 */
#aireplane {
    width: 80px;
    height: 90px;
    background-image: url(../img/hero.png);
    background-size: 80px 90px;
    position: absolute;
    left: 150px;
    top: 520px;
}

/* 子弹样式 */
.bullent {
    position: absolute;
    width: 5px;
    height: 10px;
    background-image: url(../img/bul.png);
    background-size: 5px 10px;
}

/* 坦克样式 */
.tank {
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url(../img/tank.png);
    background-size: 40px 40px;
}

loop.js

var mainScreen = document.getElementById("mainScreen")

// 让上下两个div动起来，起个定时器，让它们的高度不断的+1, 两个div即不断的上下走动
var jsBg1 = document.getElementById("bg1")
var jsBg2 = document.getElementById("bg2")
var timerBg = setInterval(function() {
        jsBg1.style.top = jsBg1.offsetTop + 1 + "px"
        jsBg2.style.top = jsBg2.offsetTop + 1 + "px"
        // 当div图片超过屏幕的底部时，将它移动上屏幕上方top:-650px
        if (jsBg1.offsetTop >= 650) {
            jsBg1.style.top = "-650px"
        } 
        if (jsBg2.offsetTop >= 650) {
            jsBg2.style.top = "-650px"
        } 
}, 10)

// 飞机拖拽效果
var airplane = document.getElementById("aireplane")
// 给飞机添加鼠标按下事件
airplane.addEventListener("mousedown",function(e){
    var ev = e || window.event
    basex = ev.pageX
    basey = ev.pageY
    movex = 0
    movey = 0
    // 给主屏幕添加鼠标移动事件
    mainScreen.addEventListener("mousemove", function(e){
        var en = e || window.event
        movex = en.pageX - basex
        movey = en.pageY - basey
        basex = en.pageX
        basey = en.pageY
        // 移动飞机
        airplane.style.left = airplane.offsetLeft + movex + "px"
        airplane.style.top = airplane.offsetTop + movey + "px"
    }, false)
}, false)

// 发射子弹:如每1秒创建一个子弹，发射一个子弹:定时器
var timerBullent = setInterval(function(){
    // 创建子弹div
    var bullent = document.createElement("div")
    mainScreen.appendChild(bullent)
    bullent.className = "bullent"
    // 子弹位置：宽--飞机的left，加上飞机宽度的一半；高--飞机的高度再高一点点
    bullent.style.left = airplane.offsetLeft + 38 + "px"
    bullent.style.top = airplane.offsetTop - 8 + "px"
    //让子弹向上飞: 每0.1秒top减少一定量
    var timerBullentFly = setInterval(function(){
        bullent.style.top = bullent.offsetTop - 10 + "px"
        // 当子弹超过屏幕的顶部的时侯：清除此子弹的定时器，及子弹div
        if (bullent.offsetTop <= -20) {
            clearInterval(timerBullentFly)
            mainScreen.removeChild(bullent)
        }
    }, 100)
bullent.timer = timerBullentFly
}, 1000)


// 坦克下落:定时器
var timertank = setInterval(function(){
    // 创建坦克
    var tank = document.createElement("div")
    mainScreen.appendChild(tank)
    tank.className = "tank"
    // 坦克位置：随机
    tank.style.left = randomNum(0, 393) + "px"
    tank.style.top = "0px"
    //让坦克向下飞: 每0.1秒top加上一定量
    var timerTankFly = setInterval(function(){
        tank.style.top = tank.offsetTop + 10 + "px"
        // 当坦克超过屏幕的底部的时侯：清除此坦克的定时器，及坦克div
        if (tank.offsetTop >= 650) {
            clearInterval(timerTankFly)
            mainScreen.removeChild(tank)
        }
    }, 100)
    // 将坦克定时器，绑定为坦克div的一属性，方便后面使用(清除)
    tank.timer = timerTankFly
}, 1000)

function randomNum(min, max) {
    return parseInt(Math.random() * (max - min) + min);
}

// 子弹与坦克相撞:定时器
var timerPZJC = setInterval(function(){
    var allTanks = document.getElementsByClassName("tank")
    var allBullents = document.getElementsByClassName("bullent")
    for (var i = 0; i < allBullents.length; i++) {
        for (var j = 0; j < allTanks.length; j++) {
            var b = allBullents[i]
            var t = allTanks[j]
            if (pzjcFunc(b, t)) {
                // 清除子弹、坦克的飞机的定时器
                clearInterval(b.timer)
                clearInterval(t.timer)
                // 清除子弹、坦克的div
                mainScreen.removeChild(b)
                mainScreen.removeChild(t)
                break;
            }
        }
    }
}, 100)

// 飞机与坦克相撞:定时器
var timerxxxx = setInterval(function(){
    var allTanks = document.getElementsByClassName("tank")
    for (var i = 0; i < allTanks.length; i++) {
        if (pzjcFunc(allTanks[i], airplane)) {
            for (var j = 0; j < 100; j++) {
                clearInterval(j)
            }
            break
        }
    }
}, 100)


// 检测矩形是否碰撞
function pzjcFunc(obj1, obj2) {
    var obj1Left = obj1.offsetLeft
    var obj1Right = obj1.offsetLeft + obj1.offsetWidth
    var obj1Top = obj1.offsetTop
    var obj1Bottom = obj1.offsetTop + obj1.offsetHeight
    
    var obj2Left = obj2.offsetLeft
    var obj2Right = obj2.offsetLeft + obj2.offsetWidth
    var obj2Top = obj2.offsetTop
    var obj2Bottom = obj2.offsetTop + obj2.offsetHeight
    // 排除不碰撞的，就是碰撞的
    if ( !(obj1Left > obj2Right || obj1Right < obj2Left
    || obj1Top > obj2Bottom || obj1Bottom < obj2Top)) {
        return true;
    } else {
        return false;
    }
    
}

几个常用的js函数：

// 随机数
function randomNum(min, max) {
    return parseInt(Math.random() * (max - min) + min);
}
//随机颜色
function randomColor() {
    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    var colorString = "rgb(" + r + "," + g + "," + r + "," + ")";
    return colorString;
}

// 获取内外部样式表中的样式属性的属性值
function getStyle(obj, name) {
    if (obj.currentStyle) {
        returnobj.currentStyle[name];
    } else {
        return window.getComputedStyle(obj, null)[name];
    }
}

posted on 2018-11-21 21:08 myworldworld 阅读(199) 评论(0) 收藏举报

刷新页面返回顶部

myworldworld

JS学习十五：飞机大战坦克示例

导航

公告