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

2022-04-28 11:26:00 来源：易采站长站作者：

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;}y') {    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实现FlappyBird游戏的示例代码