JavaScript飞翔的小鸟

最新推荐文章于 2022-03-31 21:12:14 发布
最新推荐文章于 2022-03-31 21:12:14 发布
阅读量1.2k 收藏 10
点赞数 2
文章标签： javascript css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_X_B_MR_L/article/details/122050530
版权

HTML部分

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>疯狂的小鸟</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            #box{
                width: 100%;
                height: 600px;
                position: relative;
                background-image: url(img/sky.png);
               /* background-position-x: 200px; */
            }
            #all{
                /* position: relative; */
                margin: auto;
                padding-top: 150px;
                /* border: 1px solid red; */
                width: 400px;
                height: 200px;
            }
            #all>.bird{
                position: absolute;
                /* margin:auto; */
                width: 45px;
                height: 40px;
                /* border: 1px solid red; */
                background-image: url(img/birds.png);
                /* cursor: pointer; */
                left: 50%;
                transform: translate(-50%);
            }
            #all>.news{
                width: 100%;
                height: 30px;
                /* border: 1px solid blueviolet; */
                font-size: 20px;
                color: white;
                text-align: center;
                margin-top: 85px;
                cursor: pointer;
            }
            #co{
                color: white;
                font-weight: bold;
                font-size: 30px;
                margin-left: 50%;
            }
            #mask{
                position: fixed;
                width: 100%;
                height: 100%;
                background-color: black;
                display: none;
                opacity: 0.6;
                top: 0;
            }
            #success{
                position: fixed;
                width: 400px;
                height: 150px;
                margin-left: 50%;
                margin-top: -220px;
                transform: translate(-50%);
                text-align: center;
                display: none;
                z-index: 1;
            }

        </style>
    </head>
    <body>
        <!-- 最外层 -->
        <div id="box">
        <p id="co">0</p>

            <div id="all">

                <div class="bird">
                    <!-- <img src="img/birds.png" alt=""> -->
                </div>

                <div class="news">
                    开始游戏
                </div>

            </div>

            <div id="mask">

            </div>

            <div id="success">
                 <h1>Game over!</h1>
                 <span>Your results</span>
                 <!-- 分数显示，游戏结束时显示的分数 -->
                 <p id="results">0</p>
            </div>
        </div>
    </body>
</html>
<script src="bird.js">

</script>

JavaScript部分

    var bird=document.getElementsByClassName("bird")[0];
    var all=document.getElementById("all");
    var news=all.getElementsByClassName("news")[0];
    var img=bird.getElementsByTagName("img")[0];
    var box=document.getElementById("box");
    var co=document.getElementById("co");
    var mask=document.getElementById("mask");
    var success=document.getElementById("success");
    var results=document.getElementById("results");
    var bg;
    var uheight;
    var dheight;
    //判断游戏是否在进行
    var flying=true;

    //初始化小鸟变量
    var birds={
        stepx:52,
        stepy:0,
        x:bird.offsetLeft,
        y:bird.offsetTop
    }

    //背景
    var sky={
        x:0
    }

    bg=setInterval(function(){
        // sky.x=sky.x-2;
        sky.x-=2;
        box.style.backgroundPositionX=sky.x+"px";

        //小鸟下落
        birds.stepy+=1;
        //小鸟距离顶部的距离
        birds.y+=birds.stepy;
        //判断
        if (birds.stepy>=10) {
            //小鸟起飞
            birds.stepy=-10;
            birds.y+=birds.stepy;
        }
        bird.style.top=birds.y+"px";

    }, 30);


    //计数器
    var count=0;
    //游戏开始
    news.onclick=function(){
        news.style.display="none";
        co.innerHTML=count;
        clearInterval(bg);
        birds.stepy=0;
        //判断游戏是否在进行

        setInterval(function () {
            if (flying) {

                results.innerHTML=count;
    
                //背景移动
                sky.x-=5;
                //加单位
                box.style.backgroundPositionX=sky.x+"px";
                //小鸟离顶部的距离
                birds.stepy+=1;
                birds.y+=birds.stepy;
                //小鸟离左边的距离
                birds.x=birds.stepx;
                //加单位
                bird.style.left=birds.x+"px";
                bird.style.top=birds.y+"px";

                //判断小鸟是否碰到顶部
                if (birds.y<=0) {
                    flying=false;
                    mask.style.display="block";
                    success.style.display="block";
                    co.style.display="none";
                }

                //bird.offsetHeight小鸟的高度
                if (birds.y + bird.offsetHeight>=600) {
                    flying=false;
                    mask.style.display="block";
                    success.style.display="block";
                    co.style.display="none";
                }
            }
        }, 60);


        //点击背景时小鸟弹起
        box.onclick=function () {
            birds.stepy=-10;
        }

        
        //生成柱子 x：用于决定生成柱子的位置
        function creatZZ(x) {
            var zz={};//柱子对象
            zz.x=x//给柱子对象添加属性，用于控制柱子产生的位置
            //上柱子的高度
            zz.uheight=Math.ceil(Math.random()*200)+50;
            //下柱子的高度
            zz.dheight=600-zz.uheight-150;
            //createElement创建标签
            var uzz=document.createElement("div");
            uzz.style.height=zz.uheight+"px";//上柱子的高度
            uzz.style.width="52px";//宽度
            uzz.style.position="absolute";//柱子的位置
            uzz.style.left=zz.x+"px";//上柱子与左边的距离
            uzz.style.top="0px";//上柱子与顶部的距离
            uzz.style.background="url(img/pipe2.png) no-repeat center bottom";


            var dzz=document.createElement("div");
            dzz.style.height=zz.dheight+"px";//上柱子的高度
            dzz.style.width="52px";//宽度
            dzz.style.position="absolute";//柱子的位置
            dzz.style.left=zz.x+"px";//上柱子与左边的距离
            dzz.style.bottom="0px";//上柱子与顶部的距离
            dzz.style.background="url(img/pipe1.png) no-repeat center top";

            //给背景添加子元素
            box.appendChild(uzz);
            box.appendChild(dzz);

            //柱子移动
            setInterval(function() {
                if (flying) {
                    zz.x-=5;
                    //柱子移动
                    uzz.style.left=zz.x+"px";//上柱子移动
                    dzz.style.left=zz.x+"px";//下柱子移动
                    //当柱子移动到左边后就回到右边一直循环
                    if (zz.x<=-20) {
                        zz.x=1400;
                    }

                    //判断分数
                    if (zz.x>=0 && birds.x>=zz.x+52) {
                        //游戏进行时分数显示
                        co.innerHTML=count;
                        // 游戏结束时分数显示
                        results.innerHTML=count;

                        count++;
                    }
                }

                //判断小鸟是否碰到柱子,是否碰到上柱子
                var ucheck=birds.x+20>zz.x && birds.x<zz.x+52 && birds.y <= zz.uheight;
                //是否撞到下柱子
                var dcheck=birds.x+20>zz.x && birds.x<zz.x+52 && birds.y+50 >= zz.uheight+150;
                if (ucheck || dcheck) {
                    flying=false;
                    mask.style.display="block";
                    success.style.display="block";
                    co.style.display="none";
                }
            }, 30);

        }

        //调用生成柱子方法
            creatZZ(500);
            creatZZ(1000);
            creatZZ(1500);
        
    }

效果图
在这里插入图片描述
在这里插入图片描述
图片链接
https://www.helloimg.com/image/G0aiTb
https://www.helloimg.com/image/G0aAf1
https://www.helloimg.com/image/G0aSeK
https://www.helloimg.com/image/G0anUo

M_X_B_MR_L
关注
JavaScript小鸟起飞案例
lzh17538073353的博客
09-03 564
实现步骤：1、点击按钮 改变img的left值 2、left值 = 在当前left值的基础上 + 10 3、开启定时器 自动移动图片位置
飞翔的小鸟源代码文件
09-05
"飞翔的小鸟源代码文件"是一个与HTML编程相关的资源，它包含了实现经典小游戏"飞翔的小鸟"的源代码。这个游戏最初是由Rovio Entertainment开发的，后来成为了一款风靡全球的休闲游戏，激发了许多开发者进行自定义...
飞翔的小鸟js源码
08-23
plappybird游戏js源码
js飞翔的小鸟
weixin_51116095的博客
01-11 1825
今天我们来做一个简单的js游戏，飞翔的小鸟 首先我们先想一下需要写些什么， 1.小鸟上下的飞行移动， 2.上下障碍物的创建 3.页面障碍物自动从右像左移动，以实现小鸟向前飞的样子 4.游戏结束后，遮罩层显示结束，以及得分 5.小鸟触碰地面，最顶部，以及触碰障碍物时判定游戏结束 首先还是页面的构建，每个人的想法不同，我给大家看一下我的基础界面 接下来我们开始写js代码 先写小鸟在没开始时自动跳动的部分 现在我们写小鸟在点击开始后，跳动的部分 现在创建上下障碍物(柱子)，并判断其触碰结束(因为代码长度
js制作飞行的小鸟游戏
08-22
使用js制作的小鸟飞行的游戏，里面使用了canvas绘图，和js的一些常规操作，图片可自行更改更好的。
原生js 写的flappy brid 飞翔的小鸟
05-10
flappy brid js原生 代码 还有部分图片资源也有 ，飞翔的小鸟
JavaScript小游戏飞翔的小鸟
08-21
JavaScript（JS）小游戏飞翔的小鸟，适合用于练习、实训、娱乐。300行代码实现经典小游戏
基于JavaScript的微信小游戏-飞翔的小鸟+源代码+文档说明
最新发布
01-11
基于JavaScript的微信小游戏——飞翔的小鸟+源代码+文档说明 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载...
html 飞翔的小鸟(Flappy Bird)小游戏
12-27
HTML5飞翔的小鸟(Flappy Bird)小游戏是一款基于网页的简单娱乐应用，利用HTML、CSS和JavaScript技术实现。这个游戏以其简洁的界面和极高的挑战性在2013年推出后迅速走红。在这个游戏中，玩家需要通过点击屏幕控制...
flappyBird:用js制作的飞扬的小鸟游戏
03-29
飞扬的鸟 用js制作的游戏在
疯狂的小鸟 js代码
08-15
这是一款用cocos-js开发的疯狂的小鸟源码
飘扬的小鸟：用phaser-js制成的飞扬的小鸟
02-27
Phaser 3 Webpack项目模板 通过和支持ES6的Phaser 3项目模板，其中包括用于开发和生产就绪版本的热重装。 此版本已针对Phaser 3.50.0及更高版本进行了更新。 尽管不建议通过JavaScript模块import来加载图像，但也建议这样做。 要求 需要来安装依赖项并通过npm运行脚本。 可用命令 命令 描述 npm install 安装项目依赖项 npm start 生成项目并打开运行Web服务器的项目 npm run build 使用生产设置（最小化，丑化等）构建代码包。 编写代码 克隆存储库后，从项目目录运行npm install 。 然后，您可以通过运行npm start来启动本地开发服务器。 使用npm start开发服务器后，您可以编辑src文件夹中的任何文件，并且webpack将自动重新编译并重新加载服务器（默认情况下位于http://l
纯JS实现压扁小鸟源码。
02-28
纯JavaScript实现。 如果ie打开后直接显示游戏结束，请换浏览器为Firefox重新打开。
birdjs:Javascript多人FPS游戏引擎（node.js，socket.io，Express）
05-27
Birdjs Javascript多人FPS游戏引擎（node.js，socket.io，Express） ＃启动开发服务器 ## install deps npm i ##运行本地服务器 npm run start ##进入浏览器 127.0.0.1:3000
利用js写一个飞翔的小鸟
个人笔记
03-31 1174
html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/飞翔的小鸟.css"/> </head> <body> <!--最外层的标签--> <div id="ro
JavaScript实现Fly Bird小游戏
wulixiaoxiao1的博客
02-25 874
1.分析页面结构，理清需求和功能 游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。 1.1 开始界面 start.gif 游戏的大背景上下移动的游戏标题和翅膀摆动的小鸟start 按钮，点击进入游戏界面一直移动的地面 1.2 游戏界面
飞翔的小鸟
Vivian_shuang的博客
08-09 1457
DOCTYPE html> html> head>     title>Flappy Birdtitle>     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     script type="text/javascript">         // Edit by xingoo    
JS实现飞行的小鸟游戏-简易版
明哥
03-20 2864
效果图： 实现代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞行游戏</title> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; } </sty.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值