使用 JavaScript 的 Flappy Bird 游戏

简介: 使用 JavaScript 的 Flappy Bird 游戏

4344.png

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

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


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</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();
}
});

799.png


到这里就完成了。

目录
相关文章
|
2月前
|
人工智能 JavaScript 前端开发
【前端|JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏!
【前端|JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏!
|
1月前
|
JavaScript
基于js和html的骰子游戏
基于js和html的骰子游戏
13 0
|
1月前
|
前端开发 JavaScript 定位技术
web版拳皇,使用html,css,js来制作一款拳皇游戏
web版拳皇,使用html,css,js来制作一款拳皇游戏
25 0
|
2月前
|
Web App开发 人工智能 JavaScript
手把手教你完成第一个JS项目:用简单到极致的贪吃蛇游戏熟悉JS语法
手把手教你完成第一个JS项目:用简单到极致的贪吃蛇游戏熟悉JS语法
18 0
|
2月前
|
存储 JavaScript 索引
基于 HTML+CSS+JS 的石头剪刀布游戏
基于 HTML+CSS+JS 的石头剪刀布游戏
68 0
|
2月前
|
前端开发 JavaScript
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
44 0
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
|
5月前
|
JavaScript 前端开发
js手写贪吃蛇游戏
贪吃蛇游戏 场景 使用了js 和 html /css 就可以完成 一个贪吃蛇小游戏
45 0
|
9月前
从零开始手把手教你使用javascript+canvas开发一个塔防游戏07塔的升级和出售
从零开始手把手教你使用javascript+canvas开发一个塔防游戏07塔的升级和出售
69 0
|
9月前
从零开始手把手教你使用javascript+canvas开发一个塔防游戏06塔发射子弹
从零开始手把手教你使用javascript+canvas开发一个塔防游戏06塔发射子弹
83 0
|
JavaScript 前端开发
80行JavaScript代码实现的贪食蛇游戏,简约之美
80行JavaScript代码实现的贪食蛇游戏,简约之美
92 0
80行JavaScript代码实现的贪食蛇游戏,简约之美

相关产品

  • 云迁移中心