JavaScript实现Fly Bird小游戏

最新推荐文章于 2023-01-06 16:14:57 发布

前端学习营

最新推荐文章于 2023-01-06 16:14:57 发布

阅读量637

点赞数

文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/qianduan666a/article/details/107327176

版权

JavaScript实现Fly Bird小游戏

1.分析页面结构，理清需求和功能

游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。

1.1 开始界面

游戏的大背景
上下移动的游戏标题和翅膀摆动的小鸟
start 按钮，点击进入游戏界面
一直移动的地面

1.2 游戏界面

显示越过障碍数量的计分器
移动的障碍物，分别是上管道和下管道
点击游戏界面，小鸟向上飞起，然后在重力作用下下坠，
当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面

1.3 结束界面

Game over 提示面板
OK 按钮

2. 开发“开始界面”

考虑到草地的移动效果，我们在页面中加入两个草地

2.1 HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Fly Bird</title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>
        <div id="wrapBg">  <!--游戏背景-->
            <div id="headTitle"> <!--开始标题-->
                <img id="headBird" src="img/bird0.png" alt="小鸟" /> <!--标题中的小鸟-->
            </div>
            <button id="startBtn" ></button> <!--开始按钮-->
            <div id="grassLand1"></div> <!--草地1-->
            <div id="grassLand2"></div> <!--草地2-->
        </div>
    </body>
</html>

2.2 CSS

#wrapBg{/*游戏背景*/
    width: 343px;height: 480px; 
    margin: 0 auto;
    background-image:url(../img/bg.jpg);
    position: relative;
    top: 100px;
    overflow: hidden;
}
#headTitle{/*开始标题*/
    width: 236px;height: 77px;
    background-image: url(../img/head.jpg);
    position: absolute; left: 53px; top: 100px;
}
#headBird{/*开始标题中的小鸟*/
    float:right;
    margin-top: 25px;
}
#startBtn{/*开始按钮*/
    width: 85px;height: 29px;
    padding: 0;margin: 0;
    background-image: url(../img/start.jpg);
    position: absolute;left: 129px;top: 250px;
}
#grassLand1{/*草地1*/
    height: 14px;width: 343px;
    background-image: url(../img/banner.jpg);
    position: absolute;top: 423px;
}
#grassLand2{/*草地2*/
    height: 14px;width: 343px;
    background-image: url(../img/banner.jpg);
    position: absolute;top: 423px;left: 343px;
}

将wrapBg中的overflow:hidden 注释掉的页面效果

2.3 JS

小鸟煽动翅膀的效果需要用到逐帧动画的原理

逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。

bird1.png

最低0.47元/天解锁文章

前端学习营

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JavaScript实现Fly Bird小游戏

JavaScript实现Fly Bird小游戏1.分析页面结构，理清需求和功能游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。1.1 开始界面游戏的大背景上下移动的游戏标题和翅膀摆动的小鸟 start 按钮，点击进入游戏界面一直移动的地面1.2 游戏界面显示越过障碍数量的计分器移动的障碍物，分别是上管道和下管道点击游戏界面，小鸟向上飞起，然后在重力作用下下坠，当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面1.3 结束界面...
复制链接

扫一扫