Shulou(Shulou.com)05/31 Report--

This article Xiaobian for you to introduce in detail "how to achieve Flappy Bird games based on JS", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve Flappy Bird games based on JS" can help you solve your doubts.

Implementation code

HTML section: in this section, you create and load the elements of the game. Select images of background, birds, obstacles, and scoring elements. Next, we create and link the style.css and index.js files.

Press Enter to start the game

CSS section: in this section, modify the size, position, and style of the game object as needed.

* {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 section: this section contains code that controls the state of the game and moving objects. The following steps must be followed in this section.

Get references to birds and background images in the JavaScript file.

Set some values for the background scrolling speed, bird flight speed, and gravity.

Create an infinite scrolling background. You can read the guide for doing this from this link.

Add an event listener to listen for the "enter" button to change the game state to playback state, and apply gravity to the bird by decreasing the gravity value from the bird's y coordinates each frame.

Generate obstacles (pipes) at the end of the view width so that they are initially invisible, but as the background moves, reduce the pipe's x coordinates to the background scroll value to make it look like a bird is moving.

Apply collisions with the ground and pipes, and if the bird collides, change the game state to the end state and display a message to restart the game.

Increase the score value each time you successfully navigate between pipes.

Background scrolling speed

Let move_speed = 3

Gravity constant value

Let gravity = 0.5

Get a reference to the bird element

Let bird = document.querySelector ('.bird')

Get bird element attributes

Let bird_props = bird.getBoundingClientRect ()

Partial js code

Let background = document.querySelector ('.background') .getboundingClientRect (); / / get the reference to the score element let score_val = document.querySelector ('.score _ val'); let message = document.querySelector (' .message'); let score_title = document.querySelector ('.score _ title'); / / set the initial game state to start let game_state =' Start' / / add event listener document.addEventListener ('keydown', (e) = > {/ / press enter to start the game if (e.key = =' Enter' & & game_state! = 'Play') {document.querySelectorAll (' .pipe _ sprite'). ForEach ((e) = > {e.remove ();}); bird.style.top = '40vhages; game_state =' Play' Message[ XSS _ clean] =''; score_ title [XSS _ clean] = 'Score:'; score_ Val [XSS _ clean] = '0messages; play ();}})

Read here, this "how to achieve Flappy Bird games based on JS" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.