JavaScript原生编写《飞机大战坦克0》

作者: 范小饭_ | 来源:发表于2016-12-25 19:00 被阅读1155次

最近在陆续整理自己以前写过的东西，尽量放在简书上，供更多的初学者参考交流。
以前写的飞机大战，整理了一下，放出来，给大家个参考。

开始界面.gif

思路：
1.打开页面，背景开始走动；
2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；
3.当敌人碰到子弹，敌人消失；
4.当敌人和飞机相遇，飞机死亡，结束游戏；

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞机大战</title>
    <link rel="stylesheet" type="text/css" href="飞机大战.css">
</head>
<body>
    <div id="mainScreen">
<!-- 背景图片 -->
        <div id="bgImg1" class="bg"></div>
        <div id="bgImg2" class="bg"></div>
<!-- 飞机 -->
        <div id="airplane"></div>
<!-- 开始按钮 -->
        <div id="startMenu">
            <a href="#" id="start">Start</a>
        </div>
<!-- 重新开始按钮 -->
        <div id="restartMenu">
            <a href="#" id="restart">Game Over!<br/>重新开始</a>
        </div>
<!-- 敌人 -->
        <div class="enemy"></div>
        <div class="enemy"></div>
        <div class="enemy"></div>
        <div class="enemy"></div>
        <div class="enemy"></div>
<!-- 子弹 -->
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
    </div>

    <script type="text/javascript" src="sunckBase.js"></script>
    <script type="text/javascript" src="飞机大战.js"></script>
</body>
</html>

css样式

*{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
}
#mainScreen{
    width: 512px;
    height: 768px;
    margin:0 auto;
    position: relative;
    overflow: hidden;
}
.bg{
    width: 512px;
    height:768px;
    position: absolute;
    background: url(bg.jpg);
}
#bgImg2{
    top:-768px;
}

#airplane{
    width: 109px;
    height: 82px;
    position: absolute;
    background: url(hero.png);
    left: 215px;
    top: 668px;
}

.enemy{
    position: absolute;
    width: 30px;
    height: 30px;
    left: -100px;
    top: 0px;

    background: url(enemy.png);
    background-size: 30px 30px;
}

.bullet{
    position: absolute;
    width: 5px;
    height: 10px;
    left: -100px;
    top: -100px;
    background: url(bullet.png);
    background-size: 5px 10px;
}
#startMenu, #restartMenu{
    position: absolute; 
    width: 512px; 
    text-align: center; 
    left: 0; 
    top: 300px;
}
#start, #restart{
    line-height:50px; 
    font-size:30px; 
    font-weight:bold; 
    color:#F00; 
    display:block; 
    text-decoration:none;
}
#restartMenu{
    display: none;
}

进入页面时，背景开始动

//给背景设置定时器，让背景不停的动，形成动感
var bgTimer = setInterval(bgRun, 10);
function bgRun() {
    jsBg1.style.top = jsBg1.offsetTop + 1 + "px";
    jsBg2.style.top = jsBg2.offsetTop + 1 + "px";
    if (jsBg1.offsetTop >= 768) {
        jsBg1.style.top = "-768px";
    } else {
        if (jsBg2.offsetTop >= 768) {
            jsBg2.style.top = "-768px";
        }
    }
}

点击开始，进入游戏

游戏中.gif

注：其实子弹和敌人的标签没有几个，但是我们使用定时器，开始之前，现将表现都放在屏幕外，进入游戏需要时候再改变标签定位，将其放入到页面中。

var jsStartBox=document.getElementById("startMenu")
jsStart.onclick = function startGame(){
    jsStartBox.style.display="none";
    var baseX = 0;
    var baseY = 0;
    var moveX = 0;
    var moveY = 0;
    jsAirplane.onmousedown = function(e) {
        var evt = e || window.event;
        baseX = evt.pageX;
        baseY = evt.pageY;
        jsDivBox.onmousemove = function(v) {
            var vt = v || window.event;
            moveX = vt.pageX - baseX;
            baseX = vt.pageX;
            moveY = vt.pageY - baseY;
            baseY = vt.pageY;
            jsAirplane.style.left = jsAirplane.offsetLeft + moveX + "px";
            jsAirplane.style.top = jsAirplane.offsetTop + moveY + "px";
        };
    };
    jsAirplane.onmouseup = function() {
        mainScreen.onmousemove = null;
    }
    //找到可用的子弹
    var findBulletTimer = setInterval(findBullet, 300);
    function findBullet() {
        for (var i = 0; i < jsBullets.length; i++) {
            if (jsBullets[i]["isShow"] == false) {
                jsBullets[i]["isShow"] = true;
                //将子弹移动到飞机头
                jsBullets[i].style.left = jsAirplane.offsetLeft + jsAirplane.offsetWidth / 2 + "px";
                jsBullets[i].style.top = jsAirplane.offsetTop + "px";
                break;
            }
        }
    }
    // //让子弹飞
    var bulletFlyTimer = setInterval(bulletFlay, 100);
    function bulletFlay() {
        for (var j = 0; j < jsBullets.length; j++) {
            if (jsBullets[j]["isShow"] == true) {
                if (jsBullets[j].offsetTop > -20) {
                    jsBullets[j].style.top = jsBullets[j].offsetTop - 20 + "px";
                } else {
                    jsBullets[j].style.left = "-100px";
                    jsBullets[j].style.top = "-100px";
                    jsBullets[j]["isShow"] = false;
                }
            }
        }
    }



    //找到可用敌人
    var findEnemyTimer = setInterval(findEnemy, 500);
    function findEnemy(){
        //找到一个没有在屏幕中的敌人
        for (var i = 0; i < jsEnemys.length; i++) {
            if (jsEnemys[i]["isShow"] == false) {
                //标记敌人已经使用
                jsEnemys[i]["isShow"] = true;
                //将敌人移动到屏幕
                var left = randomNum(0, 482);
                jsEnemys[i].style.left = left + "px";
                jsEnemys[i].style.top = 0 + "px";
                break;
            }
        }
    }
    // //让敌人下落
    var enemyLandTimer = setInterval(enemyLand, 100);
    function enemyLand() {
        for (var j = 0; j < jsEnemys.length; j++) {
            if (jsEnemys[j]["isShow"] == true) {
                var a = randomNum(4, 20);
                if (jsEnemys[j].offsetTop <= 768) {
                    jsEnemys[j].style.top = jsEnemys[j].offsetTop + a + "px";
                } else {
                    jsEnemys[j].style.left = "-100px";
                    jsEnemys[j].style.top = "0px";
                    jsEnemys[j]["isShow"] = false;
                }
            }
        }
    }   
}

打中怪物
用页面上存在每一个敌人和每一个子弹的定位进行简则，如果相撞，那么怪物消失

var perishEnemyTimer = setInterval(perishEnemy, 50);
function perishEnemy() {
    for (var i = 0; i < jsBullets.length; i++) {
        if (jsBullets[i]["isShow"] == true) {
            for (var j = 0; j < jsEnemys.length; j++) {
                if (jsEnemys[j]["isShow"] == true) {
                    var ret = pzjcFunc(jsBullets[i], jsEnemys[j]);
                    if (ret) {
                        jsBullets[i].style.left = "-100px";
                        jsBullets[i].style.top = "-100px";
                        jsBullets[i]["isShow"] = false;

                        jsEnemys[j].style.left = "-100px";
                        jsEnemys[j].style.top = "-100px";
                        jsEnemys[j]["isShow"] = false;
                    }
                }
            }
        }
    }
}

死亡检测

游戏结束.gif

用页面上存在每一个敌人和飞机的定位进行检测，如果两者相遇，那么结束游戏。
注：检测时考虑取反，坦克在飞机上面，在飞机下面，在飞机左边，在飞机右边是没有碰到的时候，那么我们取反就是说明两者已经相遇了。

//死亡检测
var dieTimer = setInterval(die, 50);
var jsStop = document.getElementById("restartMenu")
function die() {
    for (var i = 0; i < jsEnemys.length; i++) {
        if (jsEnemys[i]["isShow"] == true) {
            var isDie = pzjcFunc(jsAirplane, jsEnemys[i]);
            if (isDie) {
                jsStop.style.display="block";
                jsAirplane.onmouseup = function() {
                    mainScreen.onmousemove = null;
                }
            }
        }
    }
}

上述两步中用到的检测两者是否碰撞的函数

//死亡检测的函数
function pzjcFunc(obj1, obj2){
    var obj1Left = obj1.offsetLeft;
    var obj1Width = obj1Left + obj1.offsetWidth;
    var obj1Top = obj1.offsetTop;
    var obj1Height = obj1Top + obj1.offsetHeight;

    var obj2Left = obj2.offsetLeft;
    var obj2Width = obj2Left + obj2.offsetWidth;
    var obj2Top = obj2.offsetTop;
    var obj2Height = obj2Top + obj2.offsetHeight;

    if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
        return true;
    } 
    return false;
}

点击重新开始之后刷新页面

var jsRestart=document.getElementById("restart");
jsRestart.onclick=function(){
    jsStop.style.display="none";
    window.location.reload();//刷新页面
}

好的，现在我们的游戏就可以玩了，这个游戏的有些写作思想有些是我们在以后的项目中可以学习的。
比如，页面之外的空间的运用；
比如，检测碰撞。

累不，给你个笑话听听，缓解一下~

我是个程序员，一天我坐在路边一边喝水一边苦苦检查程序。这时一个乞丐在我边上坐下了，开始要饭，我觉得可怜，就给了他1块钱。然后接着调试程序。他可能生意不好，就无聊的看看我在干什么，然后过了一会，他缓缓地指着我的屏幕说，这里少了个分号。

01.PNG

02.PNG

任何时候不要吝啬您的赞美，喜欢就赞咯_，互粉互粉~

网友评论

f46b7a50914d:求一份源码，请发到邮箱691302867@qq.com
hgqs:楼主，请问可以发一下demo吗
b38c8af1f237:不错，那两张王宝强的图片和笑话不错。
笨蛋木呆呆:楼主，求图片！1224819416@qq.com
秋日朝雨:大哥，给一份源码学习学习。谢谢~
233615911@qq.com
1569876158:不错
爱好文艺程序猿:有源码就好了
Luckykailiu:@范小饭_ 楼主你真的确定黏贴下来就能玩？？
爱好文艺程序猿:@范小饭_ 怎么学好js，求指导
范小饭_:@爱好文艺程序猿这个就是呀，粘贴下来直接就可以玩了，就是有一个随机数的函数在另一个js文件，那个很好弄得
语小落:是不是没有给出sunckBase.js的代码呢？我刚学不太懂
语小落:请问下 js 的代码能发我下吗？问题还没解决 511483513@qq.com
冰镇椰子汁:怎么new一个对象呢？
范小饭_:@FromThenOn 大神，憋闹
FromThenOn: @冰镇椰子汁我也求解 @范小饭_
冰镇椰子汁:@冰镇椰子汁补充：要妹子
a6ae10155155:撸主其实可以考虑考虑整个游戏只用一个定时器，一个主循环（纯属个人意见）
范小饭_:@hugejinfan 初学者，能力有限拉
e9ef07d00811:求图片
范小饭_:@e9ef07d00811 已发送
e9ef07d00811:@范小饭_ 694146092@qq.com
范小饭_:@e9ef07d00811 给个邮箱发给你
ffc88f6431fa:楼主应该有语言基础吧～
范小饭_:@wowdad 还真没有基础
coolart:老哥稳
范小饭_:@coolart 百度了才知道这句话啥意思
于连林520wcf:厉害啊
范小饭_:@于连林520wcf 谢谢
e18552eeba2f:老哥稳
范小饭_:@哈耶克？
FromThenOn:不错，学习了，大神继续更新，持续关注中！
范小饭_:@FromThenOn 谢谢