怎样编程一个flappybird小游戏

前言

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();

}

}
    );
    

到这里就完成了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！