前言
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 部分:此部分包含控制游戏状态和移动对象的代码部分。在本节中必须遵循以下步骤。
背景滚动速度
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(); } });
到这里就完成了。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。