CSS+Java Script+HTML实现打飞机小游戏

最新推荐文章于 2024-06-18 19:09:35 发布

Charlesix59

最新推荐文章于 2024-06-18 19:09:35 发布

阅读量2.3k

点赞数 2

文章标签： javascript js html css

本文链接：https://blog.csdn.net/Charlesix59/article/details/115207735

版权

实际上我要发的这个小项目是我写崩了的，因为我一直使用C语言，所以写各个模块都用了函数，等到我把这个小项目做到稍微有点样子，我才发现，要做成雷电的样子，这他喵的应该用对象才对吧⊙﹏⊙b

于是我选择把这个小项目改了一下，变成了类似打飞镖的小游戏。

因为刚开始学习JS，所以代码肯定是瑕疵很多，主要是希望想要做点小项目的新手可以有一些参考。（比较我去网上找飞机大战的项目都是天花乱坠复杂的一批，作为一名萌新只能说是脑阔疼）

话不多说，放代码

<!DOCTYPE html>
<html>
    <head>
        <title>方块移动</title>
<!-- 至于为啥名字叫方块移动，其实刚开始我就只写了一个键盘事件，控制
方块移动，后来我把方块换了个飞机皮然后一直增加内容，最后有了这副身躯。
所以这刚开始是一个很小的程序，这也就是为啥我把CSS和JS都写在一个文件里的原因-->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #ammo{
                width: 3px;
                height: 10px;
                background-image:url("ammo.png") ;
                background-size: cover;
                position: absolute;
                border: red 1px solid;
            }
            .blockL{
                width: 800px;
                height: 800px;
                background-color: aquamarine;
                border: 2px red solid;
            }
            #blockS{
                width: 50px;
                height: 50px;
                background-image: url("plane.png");
                background-size: cover;
                position: absolute;
                left: 500px;
                top: 700px;
            }
            #enemy01{
                width: 50px;
                height: 50px;
                background-image: url("enemy01.png");
                background-size: cover;
                position: absolute;
                left: 400px;
                top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="blockL" id='borde'>
            <p id="blockS"></p>
            <p id='enemy01'></p>
        </div>
        <script>
            var a=0;
            var ammop;
            var big;
            var enemy01=document.getElementById("enemy01");
            function enemymove(){
                var moveto = 10*Math.random();//使用math.random来产生一个随机数，让他移动
                if(moveto>=5)
                enemy01.style.left=enemy01.offsetLeft + 20+'px';
                else
                enemy01.style.left=enemy01.offsetLeft - 20+'px';
            }
            function enemyc(){
                if(hit!=1)
                {
                    var emove = setInterval( enemymove,200);//setInterval随时间调用函数
                }
            }//该函数调用随机移动函数控制敌机移动
            function leftmove(){
                if(blockS.offsetLeft>=0)
                    blockS.style.left=blockS.offsetLeft-30+'px';
            }
            function rightmove(){
                 if(blockS.offsetLeft<=750)
                    blockS.style.left=blockS.offsetLeft+30+'px';
            }
            function topmove(){
                 if(blockS.offsetTop>=0)
                    blockS.style.top=blockS.offsetTop-30+'px';
            }
            function buttommove(){
                 if(blockS.offsetTop<=730)
                    blockS.style.top=blockS.offsetTop+30+'px';
            }
            function hit(){
                if(ammop.offsetTop<=enemy01.offsetTop+50&&ammop.offsetLeft<=enemy01.offsetLeft+50&&ammop.offsetLeft>=enemy01.offsetLeft+0){
                    a=0;
                    big.removeChild(ammop);
                    big.removeChild(enemy01);
                    return 1;
                }//使用if语句判断是否击中
            }
            function shoot(){
                a=1;
                big = document.getElementById('borde');
                ammop = document.createElement('p'); //创建一个P标签
                ammop.id='ammo'; //给P设置CSS属性
                big.appendChild(ammop); //在DIV中生成P
                ammop.style.top=blockS.offsetTop - 30+'px';
                ammop.style.left=blockS.offsetLeft + 15+'px';
                var int = setInterval(function(){
                    if(hit()==1){
                        clearInterval(int);
                        alert("你赢了");
                        window.location.reload();
                    }
                    
                    if(ammop.offsetTop>=10)
                        ammop.style.top = ammop.offsetTop - 25 + 'px';
                    else{
                        a=0;
                        big.removeChild(ammop);
                        clearInterval(int);
                    }
                },20);
                //if(ammop.offsetTop<200)
                //big.removeChild(ammop);
                //var ammo = document.getElementById("ammo");
                //ammo.style.top=blockS.offsetTop - 30+'px';
                //ammo.style.left=blockS.offsetLeft + 15+'px';
            };
            window.onload = function(){
                var blockS = document.getElementById('blockS');
                enemyc();
                document.onkeydown=function(event){
                    console.log(event.keyCode);//键盘事件
                            switch(event.keyCode){
                                case 65:leftmove();break;
                                case 68:rightmove();break;
                                case 83:buttommove();break;
                                case 87:topmove();break;
                                case 32:if(a==0)shoot();break;
                            }//65 A;68 D;83 S;87 W;32 空格;
                };
            }; 
        </script>
    </body>
</html>

其实这个小游戏只有三点比较复杂，第一个是键盘事件，第二个是setInterval() 方法，第三个是使用JS创建HTML标签

这三点网上的大佬肯定比我讲的更清楚，大家如果不明白还是问问度娘吧~

不过还是提示一点，要注意一下clearInterval()和removeChild()这两种方法，要知道如果不加注意的话，很容易创建容易删除难呀。

这篇文章就到这里了，希望能够给需要的朋友一点帮助吧。作为一名萌新欢迎大佬指正，也希望能和大家一起进步=w=

Charlesix59

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS+Java Script+HTML实现打飞机小游戏

实际上我要发的这个小项目是我写崩了的，因为我一直使用C语言，所以写各个模块都用了函数，等到我把这个小项目做到稍微有点样子，我才发现，要做成雷电的样子，这他喵的应该用对象才对吧⊙﹏⊙b于是我选择把这个小项目改了一下，变成了类似打飞镖的小游戏。因为刚开始学习JS，所以代码肯定是瑕疵很多，主要是希望想要做点小项目的新手可以有一些参考。（比较我去网上找飞机大战的项目都是天花乱坠复杂的一批，作为一名萌新只能说是脑阔疼）话不多说，放代码<!DOCTYPE html><html.
复制链接

扫一扫