JS面向对象实现飞机大战

最新推荐文章于 2024-06-10 17:33:11 发布
最新推荐文章于 2024-06-10 17:33:11 发布
阅读量3k 收藏 5
点赞数 1
分类专栏： JS 小工程 文章标签： 面向对象 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/action_xing/article/details/52599388
版权

主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg{
            width: 530px;
            height: 600px;
            position: relative;
            margin: 100px auto;
            background: url("bg.png") no-repeat 0 -9399px;
        }
        .plane{
            width: 60px;
            height: 53px;
            position: absolute;
            left: 235px;
            bottom: 10px;
            background: url("my_air.gif") no-repeat;
        }
        .enemy{
            position: absolute;
        }
        .buttle{
            width: 9px;
            height: 37px;
            position: absolute;
            background: url("my_ari_1.gif") no-repeat;
        }
        .bomp{
            width: 160px;
            height: 160px;
            position: absolute;
            background: url("0.gif") no-repeat;
        }
    </style>
</head>
<body>
<div class="bg" id="bg">
    <div class="plane" id="plane"></div>
</div>

</body>
<script type="text/javascript" src="buttle.js"></script>
<script type="text/javascript" src="enemies.js"></script>
<script src="jquery-3.0.0.min.js"></script>
<script>
    //bg移动begin
    var bg_height=-9399;
    function bg_move(){
     var bg=document.getElementById("bg");
    bg_height+=3;
    if (bg_height>0){
        bg_height=-9399;
    }
    bg.setAttribute("style","background: url('bg.png') no-repeat 0 "+bg_height+"px");
    }
    setInterval(bg_move,30);
    //bg移动over
    //通过获取键盘的key值来控制飞机的方向begin
    document.onkeydown = function(){

        var key=event.keyCode;
        var plane =document.getElementById("plane");
        switch (key){
            case 37:
                    plane_Left();
                break;
            case 38:
                plane_Top();
                break;
            case 39:
                plane_Right();
                break;
            case 40:
                plane_Bottom();
                break;
            case 32:
                    fire();
                break;
        }
    };
    //通过获取键盘的key值来控制飞机的方向over
    //飞机的方向begin
    var planeLeft=235;
    var planeBottom=10;
    //声明全局变量planeBottom、planeLeft用来让飞机移动
    function plane_Left(){
        if(planeLeft>0){
            planeLeft-=8;
            document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
        }
    }
    function plane_Right(){
        if(planeLeft<470){
            planeLeft+=8;
            document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
        }
    }
    function plane_Top(){
        if(planeBottom<550){
            planeBottom+=8;
            document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
        }
    }
    function plane_Bottom(){
        if(planeBottom>10){
            planeBottom-=8;
            document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
        }
    }
    //飞机的方向over
    function enemyShow(){
        var number = parseInt(Math.random()*10);
        for(var i=0;i<number;i++){
            var enemies=new enemiesShow();
        }
    }
    setInterval(enemyShow,3000);
    function fire(){
        var bottom=planeBottom+5+53;
        var left=planeLeft+30-5;
        var buttle = new buttleDemo(left,bottom);
    }


</script>
</html>

子弹

/**
 * Created by echo22 on 2016/7/29.
 */
function buttleDemo(left,bottom){
    var buttleLeft =left;
    var buttleBottom = bottom;
    var id;
    var Move;
    inti();
    function inti(){
        id=getRandom();
        var str = "<div class='buttle' id='b"+id+"'></div>";
        $("#bg").append(str);
        $("#b"+id).css({"left":buttleLeft,"bottom":buttleBottom});
       Move=setInterval(buttleMove,10);
    }
    //获取随机ID
    function getRandom(){
        return parseInt(Math.random()*10000);
    }
    //子弹的移动
    function buttleMove(){
        if(buttleBottom<550){
            buttleBottom+=10;
            $("#b"+id).css("bottom",buttleBottom);
          if(JudgeShot()){
              dispire();
          }
        }
        else {
            dispire();
        }
    }
    //清除子弹
    function dispire(){
        $("#b"+id).remove();
        clearInterval(Move);
    }
    //判断子弹与敌机的碰撞位置
    function JudgeShot(){
        var enemy=$(".enemy");
        for (var i=0;i<enemy.length;i++){
            var enemy_top=$(".enemy").eq(i).css("top");
            var enemy_left=$(".enemy").eq(i).css("left");
            enemy_bottom=600-getInt(enemy_top);
            enemy_left=getInt(enemy_left);
            console.log(enemy_left);
            if (buttleLeft>enemy_left&&buttleLeft<enemy_left+50&&buttleBottom>enemy_bottom&&buttleBottom<enemy_bottom+60){
                $(".enemy").eq(i).remove();

                var bomp="<div class='bomp' id='bo"+id+"'></div>";
                $("#bg").append(bomp);
                $("#bo"+id).css({"left":buttleLeft-70,"bottom":buttleBottom-100});
               setTimeout(gundan,50);
                return true;
            }
        }
        return false;
    }
    function getInt(str){
        var result = str.substring(0,(str.length-2));
        return parseInt(result);
    }
   function gundan(){
       $("#bo"+id).remove();
   }
}

敌机

/**
 * Created by echo22 on 2016/7/29.
 */
function enemiesShow(){
    var id;
    init();
    function init(){
        var type=getEnemyType();
        var enemyLeft=getEnemyLeft();
        getEnemyPlane(type,enemyLeft);
       getLine();
    }
    function getEnemyPlane(type,left){
        console.log(111);
        id=parseInt(Math.random()*10000);
        var width;
        var height;
        if(type==1){
            width=47;
            height=72;
        }
        else {
            width=64;
            height=56;
        }
        var enemy="<div class='enemy' id='e"+id+"' ></div>";
        $("#bg").append(enemy);
        $("#e"+id).css({"width":width,"height":height,"left":left,"background":"url('d_j_"+type+".gif') no-repeat"});

    }
    function getEnemyType(){
        return (parseInt(Math.random()*10/5)>0)?1:3;
    }
    function getEnemyLeft(){
        return parseInt(Math.random()*(530-64));
    }
    function getLine(){
        Math.random()>0.5?zhiLine():quLine();
    }
    function zhiLine(){
        $("#e"+id).animate({
            "top":"520px"
        },3000,function(){
            $("#e"+id).remove();
        })
    }
    function quLine(){
        $("#e"+id).animate({
            "top":"200px",
            "left":getEnemyLeft()
        },1500,function(){})
        $("#e"+id).animate({
            "top":"520px",
            "left":getEnemyLeft()
        },1500,function(){
            $("#e"+id).remove();
        })
    }
}
action-XD
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js面向对象游戏开发，飞机大战
11-17
js面向对象开发的飞机游戏！简单适合新手
h5原生实现飞机大战(完整代码)
MRD
11-19 1658
js版本飞机大战(完整代码)
JavaScript实现飞机大战_js飞机大战代码
最新发布
2401_85124233的博客
06-10 712
/创建我机修改绘制方法//绘制入口//渲染到页面上//右键事件//取消右键默认事件//给canvas2画布添加鼠标移动事件（因为画布2在上面）//给canvas2画布添加鼠标右键事件6. 加入重绘方法//重新绘制//绘制入口//渲染到页面上//创建子弹//计算子弹的位置//初始化敌机//定时创建敌机//创建敌机。
简单js面向对象打飞机
luck_lin
02-18 2597
地图Map.js：var Map = { width: 320, height: 568, startImg: "images/start_bg.png", bgImg: "images/bg.png", startElement: null, gameElement: null, scoresElement: null, init: function(){ var conta...
js面向对象编程小游戏2——飞机大战
onlySeungRi的博客
06-06 1654
实现的功能：页面元素有敌机，用户的飞机，子弹，可实现子弹将敌机炸毁，碰撞炸毁等不同的功能代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;&lt;/title&gt;    &lt;style typ
20141208 用js做个打飞机游戏 , 用div和img就够了 , ie8也能够支持
cx杂谈
12-08 1713
演示地址 :   http://xuanzun.sinaapp.com/project/planeFighter/ 终于期末考考完 , 剩下一个月的课程设计 ,倒不如直接回公司好了 , 顺便回了一趟家 ,家里没有接网线 , 郁闷 ,只能敲敲游戏练练手... 于是就有这个打飞机游戏了. 做这样的游戏有两个关键问题 一个是碰撞的检测 一个是画面循环刷新 当然都不难
面向对象飞机大战游戏.zip
06-15
【面向对象飞机大战游戏】是一款基于JavaScript实现的飞行射击类游戏，它充分利用了HTML5、CSS3和JavaScript技术，为玩家提供了一种交互性强、视觉效果丰富的游戏体验。在这个项目中，面向对象编程（OOP）是核心的...
JS编程实现-飞机大战游戏
05-04
总的来说，JS编程实现的飞机大战游戏，不仅锻炼了开发者对JavaScript语言的理解和应用，还涵盖了面向对象编程、游戏逻辑设计、用户交互等多个方面，是一个综合性的编程实践项目。通过这个项目，开发者不仅可以掌握...
用js写飞机大战的小游戏
无敌旋风兔的博客
08-31 7261
飞机大战思路整理 飞机大战分为5个阶段: 1.游戏开始阶段 1.0定义整个游戏的全局变量，并进行初始化 1.1.0创建游戏背景图片 1.1.1初始化背景图片的数据 1.1.2创建游戏开始阶段的构造函数 ...
面向对象飞机大战（结合ES6、继承 、设计模式）
luck_lin
02-27 1387
javascript面向对象编程的小游戏飞机大战，对js知识综合较为全面的的练习。
js原生飞机大战源码
11-27
纯js原生代码飞机大战。
原生js写的飞机大战游戏
08-10
原生js写的飞机大战游戏
飞机大战源码和素材(在原素材上添加面向对象的思想)
03-12
使用了面向对象的思想，将敌人作为一个整体看待，减少了重复代码 。
java面向对象(飞机大战)
06-28
Eclipse 开发
html5 canvas技术实现飞机大战小游戏
02-26
html5 canvas技术实现飞机大战小游戏
js实现的飞机大战
热门推荐
张张张的博客
07-26 1万+
1.html代码 开始游戏 分数： 0 继续 重新开始 回到主页 飞机大战分数 0 继续 2.js主要代码 //获得主界面 var mainDiv=document.getElementById("maindiv"); //获得开始界面 var startdiv=document.getElementById("startdiv"); //获得游戏中分
原生javascript编写飞机大战
mlonly的博客
12-22 1万+
&lt;!-- 简易版飞机大战 --&gt; &lt;!-- 加载dom 创建战场、 --&gt; &lt;!-- 创建我方飞机类 定义子弹类自动动态创建飞机子弹--&gt; &lt;!-- 创建敌方飞机类-- HTML部分 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset
python面向对象编程实例：飞机大战
xdzhangzhenhao的博客
01-30 3719
说明：此则博客只是自己学习python编程的学习记录，其中完成的程序设计只是飞机大战的小小小demo，只为自己熟悉python语言和pygame，所以程序并不完善，只当练手和记录，当然可基于次程序进行后续的完善开发。最后感谢一下hm的python教程。至于程序中的图片素材，如果大家有需要可在本文下方留言，可私发。 开头 祭出程序开发文档： #01. 使用pygame创建图形窗口

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值