基于JS实现Flappy Bird游戏的示例代码

前言

Flappy Bird 是一款无尽的游戏，玩家可以控制一只鸟。玩家必须保护小鸟免于与管道等障碍物相撞。每次小鸟通过管道时，分数都会增加一。当小鸟与管道碰撞或因重力而坠落时，游戏结束。以下部分描述了构建此游戏必须采取的步骤。

游戏可以通过这个链接进入

完整源码地址

实现代码

HTML 部分：在此部分中，创建和加载游戏的元素。选择背景、鸟类、障碍和得分元素的图像。接下来，我们创建并链接 style.css 和 index.js 文件。

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>

<body>
	<div class="background"></div>
	<img class="bird" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg" alt="bird-img">
	<div class="message">
    按 Enter 开始游戏
	</div>
	<div class="score">
		<span class="score_title"></span>
		<span class="score_val"></span>
	</div>
    <script src="gfg.js"></script>
</body>

</html>

CSS 部分：在此部分中，根据需要修改游戏对象的大小、位置和样式。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100vw;
}

.background {
    height: 100vh;
    width: 100vw;
    background-color: skyblue;
}

.bird {
    height: 100px;
    width: 160px;
    position: fixed;
    top: 40vh;
    left: 30vw;
    z-index: 100;
}

.pipe_sprite {
    position: fixed;
    top: 40vh;
    left: 100vw;
    height: 70vh;
    width: 6vw;
    background-color: green;
}

.message {
    position: fixed;
    z-index: 10;
    height: 10vh;
    font-size: 10vh;
    font-weight: 100;
    color: black;
    top: 12vh;
    left: 20vw;
    text-align: center;
}

.score {
    position: fixed;
    z-index: 10;
    height: 10vh;
    font-size: 10vh;
    font-weight: 100;
    color: goldenrod;
    top: 0;
    left: 0;
}

.score_val {
    color: gold;
}

JavaScript 部分：此部分包含控制游戏状态和移动对象的代码部分。在本节中必须遵循以下步骤。

  • 在 JavaScript 文件中获取对鸟类和背景图像的引用。
  • 为背景滚动速度、小鸟的飞行速度和重力设置一些值。
  • 创建无限滚动背景。可以从此链接阅读执行此操作的指南。
  • 添加一个事件侦听器来侦听“enter”按键以将游戏状态更改为播放状态，并通过每帧从鸟的 y 坐标减小重力值来将重力应用于鸟。
  • 在视图宽度的末端生成障碍（管道），以便它们最初不可见，但随着背景的移动，将管道的 x 坐标减小背景滚动值，使其看起来像鸟在移动。
  • 应用与地面和管道的碰撞，如果小鸟发生碰撞，则将游戏状态更改为结束状态并显示一条消息以重新开始游戏。
  • 每次在管道之间成功导航后增加分数值。

背景滚动速度

let move_speed = 3;

重力常数值

let gravity = 0.5;

获取 bird 元素的引用

let bird = document.querySelector('.bird');

获取 bird 元素属性

let bird_props = bird.getBoundingClientRect();

部分 js 代码

let background =
    document.querySelector('.background')
    .getBoundingClientRect();

// 获取对 score 元素的引用
let score_val =
    document.querySelector('.score_val');
let message =
    document.querySelector('.message');
let score_title =
    document.querySelector('.score_title');

// 设置初始游戏状态开始
let game_state = 'Start';

// 为按键添加事件监听器
document.addEventListener('keydown', (e) => {

// 按下回车键开始游戏
if (e.key == 'Enter' &&
    game_state != 'Play') {
    document.querySelectorAll('.pipe_sprite')
            .forEach((e) => {
    e.remove();
    });
    bird.style.top = '40vh';
    game_state = 'Play';
    message.innerHTML = '';
    score_title.innerHTML = 'Score : ';
    score_val.innerHTML = '0';
    play();
}
});

到这里就完成了。

到此这篇关于基于JS实现Flappy Bird游戏的示例代码的文章就介绍到这了,更多相关JS Flappy Bird游戏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • HTML+CSS+JS实现抓娃娃机游戏

    HTML+CSS+JS实现抓娃娃机游戏

    目录 前言 效果 地址 布局 总结 前言 前段时间去商场吃饭的时候看到一个有趣的娃娃机,一个密封的机器里底部放着一些被捆绑好的龙虾,可以买币去抓龙虾,抓到以后可以初加工费找附近的商家给做成龙虾大餐,感觉很有意思,把抓抓玩出了一个新的高度~ 主要是抓到以后还可以出手工费进行烹饪,很吸引人,周边围观的人也很多,观察了一会发现.爪子的抓力不够,龙虾在水里还能移动,而且感觉每一个个头都不小,那小爪感觉根本抓不起来~~ 到家后孩子就说爸爸你可不可以做一个娃娃机呢? 身为一个程序员,这点要求我感觉还是难不倒

  • JavaScript实现飞机大战游戏

    JavaScript实现飞机大战游戏

    本文实例为大家分享了canvas ,js 实现一个简单的飞机大战,供大家参考,具体内容如下 预览图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

  • HTML+CSS+JavaScript创建一个简单的井字游戏

    HTML+CSS+JavaScript创建一个简单的井字游戏

    目录 实现 HTML 添加 CSS 实现 Javascript 部分 演示地址 实现 HTML 首先在 head 部分,我将包含我们稍后创建的 css 和 javascript 文件.我还添加了名为 Itim 的 Google 字体. <link rel="stylesheet" href="style.css" rel="external nofollow" > <link rel="preconnect"

  • JavaScript实现打地鼠游戏

    本文实例为大家分享了JavaScript实现打地鼠游戏的具体代码,供大家参考,具体内容如下 游戏说明: 点击"开始游戏"按钮,在图中随机产生老鼠,老鼠消失前单击老鼠进行击打,打中一次即可获得100的积分,没有打中老鼠,扣取100积分 css模块 <style> #div0{ text-align: center; width: 1360px; height: 600px; margin: 60px auto; background-image: url("imag

  • 原生js实现Flappy Bird小游戏

    原生js实现Flappy Bird小游戏

    这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习. html结构 <div id="game"> <div id="bird"></div> </div> css样式 #game { width: 800px; height: 600px; border: 1px solid #000; background: url(images/sky.png); overflow: hidden; posi

  • 纯JavaScript 实现flappy bird小游戏实例代码

    纯JavaScript 实现flappy bird小游戏实例代码

    前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它 步骤1:页面布局,这儿就不多说了,页面内容如下:

  • 基于JS实现Flappy Bird游戏的示例代码

    基于JS实现Flappy Bird游戏的示例代码

    前言 Flappy Bird 是一款无尽的游戏,玩家可以控制一只鸟.玩家必须保护小鸟免于与管道等障碍物相撞.每次小鸟通过管道时,分数都会增加一.当小鸟与管道碰撞或因重力而坠落时,游戏结束.以下部分描述了构建此游戏必须采取的步骤. 游戏可以通过这个链接进入 完整源码地址 实现代码 HTML 部分:在此部分中,创建和加载游戏的元素.选择背景.鸟类.障碍和得分元素的图像.接下来,我们创建并链接 style.css 和 index.js 文件. <!DOCTYPE html> <html>

  • 基于JS实现蜘蛛侠动作游戏的示例代码

    基于JS实现蜘蛛侠动作游戏的示例代码

    目录 代码结构 代码展示 HTML JS 项目运行 游戏截图 整个游戏源码是由html.js. css.图片等代码完成的,无后端数据保存功能. 代码结构 js文件夹是游戏事件控制文件 vapp文件夹是游戏图片文件 icon.png 是网页游戏图标 index.html 是游戏主页 代码展示 HTML index.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/

  • 基于JS实现飞机大战游戏的示例代码

    基于JS实现飞机大战游戏的示例代码

    目录 演示 技术栈 源码 定义敌方战机 定义我方战机 碰撞检测 演示 技术栈 今天没有什么特别要讲的,要不我们提前介绍下次要做的技术吧.你不说话就是同意了.我们开始了. 下图是正则表达式的一些总结大家可以先看看哦 (function() { /** * 1. JavaScript使用正则式的函数 */ const str = "abchelloasdasdhelloasd"; // 1. 查找 console.log(str.search("h")); // 3 /

  • VUE实现一个Flappy Bird游戏的示例代码

    VUE实现一个Flappy Bird游戏的示例代码

    Flappy Bird是一个非常简单的小游戏,在app上大家都玩过.这里就用VUE来实现一个简单的PC版Flappy Bird,娱乐一下~~~~~ 要实现这个游戏,首先来分析一下游戏界面里哪几块东西需要动起来: 1.第一当然就是上下移动的小鸟: 2.横向移动的背景图,让小鸟看起来在横向飞行: 3.从画面右端进入的一排排管道. 这样很明确了,我们让上面3块内容按照规律运动起来,然后再加上规则边界判断和计分,就可以得到一个完整的游戏.所以就一块块来解决. 先来定义一些常量和变量: let rafId

  • 基于JS实现弹性漂浮广告的示例代码

    基于JS实现弹性漂浮广告的示例代码

    目录 效果图 1.功能(鼠标移入移出事件.点击事件.定时器控制移动) 2.div初始样式设置 3.获取div可以移动的页面大小 4.定时器控制移动,鼠标移入事件停止移动,鼠标移出继续移动. 5.点击事件点击让div消失 6.完整代码 效果图 1.功能(鼠标移入移出事件.点击事件.定时器控制移动) div实现在页面上移动,并判断碰到页面边框反弹,鼠标移入div停止移动,鼠标移出div进行移动,点击div让它从页面消失,定时器控制它的移动. 2.div初始样式设置 //div(广告)获取节点 var

  • 基于C语言实现迷宫游戏的示例代码

    目录 C语言迷宫游戏 定义地图 打印地图方法一 打印地图方法二 定义起点和终点位置 实现读取按键 实现小球下向下移动一步 总结小球移动规律 实现重新打印地图 实现连续移动 实现小球下向上下左右移动 实现小球走到终点就胜利 C语言迷宫游戏 这篇文章是给学完并学懂了C语言的分支(选择和循环)结构和二维数组的朋友看的. 要做一个游戏或者程序先要想好有那些要求,以下是我认为一个迷宫必带的要求: 迷宫要先打印出来(要设置墙.空气.小球的起点),是墙就不能,是空气就可以走. 每次输入'w'.'a'.'s'.

  • 基于Vue3实现数字华容道游戏的示例代码

    基于Vue3实现数字华容道游戏的示例代码

    目录 前言 环境 思路 实现 GameCnt GameTool GamePass GameTip Menu 最后 前言 恰逢春之四月,天气忽热忽凉,遇游戏大赛,以笨拙之技,书一篇小文. 游戏规则:存在n*n的格子,需要将它们按数字顺序或图片顺序一一还原即可. 环境 主要环境: vue3 version:3.2.4 vite version:2.5.0 vue-router version:4.0.14 注:这个游戏的路由使用的是自动路由插件 主要插件: windicss version:3.5.

  • 基于JS实现动态跟随特效的示例代码

    基于JS实现动态跟随特效的示例代码

    目录 演示 技术栈 源码 css部分 js部分 演示 技术栈 这次用到了关于css的一些功能,和jQuery. CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果.承载动画的另一个属性——@keyframes.使用的时候为了兼容可加上-webkit-.-o-.-ms-.-moz-.-khtml-等前缀以适应不同的浏览器. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 通过 @keyframes 规则,您能够创建动

  • 基于Python实现24点游戏的示例代码

    目录 1.前言 2.思路 3.代码 1.前言 24数大家之前玩过没有? 规则:一副扑克牌抽走大王,小王,K,Q,J(有的规则里面会抽走10,本文一律不抽走),之后在牌堆里随机抽取四张牌,将这四张牌加减乘除得到24. 如果再高级一点,还会有根号.阶乘.幂之类的算法,别问为啥不能幂运算,问就是懒,自己看思路自己实现去(bushi. 知识点:随机数,列表,嵌套判断,循环,死循环,都是新手接触的东西. 由于不能进行像根号,阶乘高级的运算,改版之后完全可以了. 话不多说,上思路 2.思路 1.随机生成四个

  • 基于Python实现成语填空游戏的示例代码

    目录 前言 一.环境准备 二.代码展示 三.效果展示 前言 成语填空想必大家都是十分熟悉的了,特别是有在上小学的家长肯定都有十分深刻的印象. 在我们的认知里看图猜成语不就是一些小儿科的东西吗? 当然了你也别小看了成语调控小游戏,有的时候知识储备不够,你还真的不一定猜得出来是什么?更重要的是有的时候给你这个提示你都看不懂,那你就拿他没办法.——小学语文必备 成语是小学语文非常重要的一个知识点,几乎是逢考必有,作为基础,自然是需要长期的积累,并且需要积累到一定的数量,有了一定的量才能够产生质变,对于

随机推荐