基于JS实现Flappy Bird游戏的示例代码
时间：2022-12-18 11:01:06|栏目：JavaScript代码|点击： 次
前言
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();
}
});
到这里就完成了。
栏 目：JavaScript代码
本文地址：http://www.codeinn.net/misctech/221672.html
