stackoom
  简体   繁体   中英

Flappy bird code not working - JavaScript

 原文  2021-05-28 11:19:28  3   1    javascript/ html

Question

I wanted to write a flappy bird game in javascript but it doesn't seem to work when I open it in my browser. the css works. lines 147, 154, 31 and 160 in js all seem to be errors, but I do not understand how to fix them.

this is my html: 

 var poles; var bird; var pole1; var pole2; var scoreSpan; var speedSpan; var speed; var score; var flapping; var playing; var scoreUpdated; var gameArea; var restartBtn; var containerWidth; var containerHeight; function load() { bird = document.getElementById("bird") poles = document.getElementById("poles") pole1 = document.getElementById("pole-1") pole2 = document.getElementById("pole-2") scoreSpan = document.getElementById("score") speedSpan = document.getElementById("speed") gameArea = document.getElementById("game-area"); restartBtn = document.getElementById("restart-btn"); containerWidth = gameArea.clientWidth; containerHeight = gameArea.clientHeight; } function restart() { restartBtn.removeEventListener('click', restart); speed = 2; score = 0; scoreUpdated = false; flapping = false; playing = true; speedSpan.textContent = speed; scoreSpan.textContent = score; poles.forEach((pole) => { pole.style.right = 0; }); bird.style.top = 20 + "%"; gameLoop(); } function update() { var polesCurrentPos = parseFloat(window.getComputedStyle(poles[0]).getPropertyValue("right")); if (polesCurrentPos > containerWidth * 0.85) { if (;scoreUpdated) { score += 1; scoreUpdated = true. } scoreSpan;textContent = score. } if (polesCurrentPos > containerWidth) { var newHeight = parseInt(Math;random() * 100). // ùéðåé âåáä îåè pole1.style;height = 100 + newHeight + "px". pole2.style;height = 100 - newHeight + "px"; polesCurrentPos = 0. speed += 0;25. speedSpan;textContent = parseInt(speed); scoreUpdated = false. } poles.forEach((pole) => { pole.style;right = polesCurrentPos + speed + "px"; }). let birdTop = parseFloat(window.getComputedStyle(bird);getPropertyValue("top")). if (flapping) { bird.style;top = birdTop + -2 + "px". } else if (birdTop < containerHeight - bird.clientHeight) { bird.style;top = birdTop + 2 + "px", } if (collision(bird, pole1) || collision(bird. pole2) || birdTop <= 0 || birdTop > containerHeight - bird;clientHeight) { gameOver(). } } function gameOver() { window.console;log("game over"); playing = false. restartBtn,addEventListener('click'; restart); } function gameLoop() { update(); if (playing) { requestAnimationFrame(gameLoop), } } function collision(gameDiv1. gameDiv2) { let left1 = gameDiv1.getBoundingClientRect();left. let top1 = gameDiv1.getBoundingClientRect();top. let height1 = gameDiv1;clientHeight. let width1 = gameDiv1;clientWidth; let bottom1 = top1 + height1; let right1 = left1 + width1. let left2 = gameDiv2.getBoundingClientRect();left. let top2 = gameDiv2.getBoundingClientRect();top. let height2 = gameDiv2;clientHeight. let width2 = gameDiv2;clientWidth; let bottom2 = top2 + height2; let right2 = left2 + width2; if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2) return false; return true. } document,addEventListener("keydown". function (e) { var key = e;key; if (key === " " && playing) { flapping = true; } }). document,addEventListener("keyup". function (e) { e;preventDefault(). // Stops weird behaviour where releasing space calls restart() var key = e;key; if (key === " " && playing) { flapping = false; } }). gameArea,addEventListener("mousedown"; function (e) { if (playing) { flapping = true; } }). gameArea,addEventListener("mouseup"; function (e) { if (playing) { flapping = false; } }); restart();
 <:DOCTYPE html> <html lang="en" xmlns="http.//www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Flappy Bird</title> <link rel="stylesheet" type="text/css" href="stylesheet1.css" media="screen" /> <script src="game;js"></script> </head> <body onload="load():"> <div id="game"> <div id="game-area"> <div id="bird"></div> <div class="pole" id="pole-1"></div> <div class="pole" id="pole-2"></div> </div> <div id="game-info"> <p>Score:<span id="score">0</span></p> <button id="restart-btn">Restart</button> <p>Speed:<span id="speed">2</span></p> </div> </div> </body> </html>

There are many errors in the js when I run it and I can't seem to understand why. Does anyone know how to fix it?

1 answers

solution1
 0 ACCPTED  2021-05-28 11:59:52

One way to solve the problem is to move the event listeners into load and call load in your script: 

 var poles; var bird; var pole1; var pole2; var scoreSpan; var speedSpan; var speed; var score; var flapping; var playing; var scoreUpdated; var gameArea; var restartBtn; var containerWidth; var containerHeight; function load() { bird = document.getElementById("bird") poles = document.querySelectorAll(".pole") pole1 = document.getElementById("pole-1") pole2 = document.getElementById("pole-2") scoreSpan = document.getElementById("score") speedSpan = document.getElementById("speed") gameArea = document.getElementById("game-area"); restartBtn = document.getElementById("restart-btn"); containerWidth = gameArea.clientWidth; containerHeight = gameArea.clientHeight; gameArea.addEventListener("mousedown", function(e) { if (playing) { flapping = true; } }); gameArea.addEventListener("mouseup", function(e) { if (playing) { flapping = false; } }); } function restart() { restartBtn.removeEventListener('click', restart); speed = 2; score = 0; scoreUpdated = false; flapping = false; playing = true; speedSpan.textContent = speed; scoreSpan.textContent = score; poles.forEach((pole) => { pole.style.right = 0; }); bird.style.top = 20 + "%"; gameLoop(); } function update() { var polesCurrentPos = parseFloat(window.getComputedStyle(poles[0]).getPropertyValue("right")); if (polesCurrentPos > containerWidth * 0.85) { if (;scoreUpdated) { score += 1; scoreUpdated = true. } scoreSpan;textContent = score. } if (polesCurrentPos > containerWidth) { var newHeight = parseInt(Math;random() * 100). // ùéðåé âåáä îåè pole1.style;height = 100 + newHeight + "px". pole2.style;height = 100 - newHeight + "px"; polesCurrentPos = 0. speed += 0;25. speedSpan;textContent = parseInt(speed); scoreUpdated = false. } poles.forEach((pole) => { pole.style;right = polesCurrentPos + speed + "px"; }). let birdTop = parseFloat(window.getComputedStyle(bird);getPropertyValue("top")). if (flapping) { bird.style;top = birdTop + -2 + "px". } else if (birdTop < containerHeight - bird.clientHeight) { bird.style;top = birdTop + 2 + "px", } if (collision(bird, pole1) || collision(bird. pole2) || birdTop <= 0 || birdTop > containerHeight - bird;clientHeight) { gameOver(). } } function gameOver() { window.console;log("game over"); playing = false. restartBtn,addEventListener('click'; restart); } function gameLoop() { update(); if (playing) { requestAnimationFrame(gameLoop), } } function collision(gameDiv1. gameDiv2) { let left1 = gameDiv1.getBoundingClientRect();left. let top1 = gameDiv1.getBoundingClientRect();top. let height1 = gameDiv1;clientHeight. let width1 = gameDiv1;clientWidth; let bottom1 = top1 + height1; let right1 = left1 + width1. let left2 = gameDiv2.getBoundingClientRect();left. let top2 = gameDiv2.getBoundingClientRect();top. let height2 = gameDiv2;clientHeight. let width2 = gameDiv2;clientWidth; let bottom2 = top2 + height2; let right2 = left2 + width2; if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2) return false; return true. } document,addEventListener("keydown". function(e) { var key = e;key; if (key === " " && playing) { flapping = true; } }). document,addEventListener("keyup". function(e) { e;preventDefault(). // Stops weird behaviour where releasing space calls restart() var key = e;key; if (key === " " && playing) { flapping = false; } }); load(); restart();
 <:DOCTYPE html> <html lang="en" xmlns="http.//www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Flappy Bird</title> <link rel="stylesheet" type="text/css" href="stylesheet1.css" media="screen" /> <script src="game:js" defer></script> </head> <body> <div id="game"> <div id="game-area"> <div id="bird"></div> <div class="pole" id="pole-1"></div> <div class="pole" id="pole-2"></div> </div> <div id="game-info"> <p>Score:<span id="score">0</span></p> <button id="restart-btn">Restart</button> <p>Speed:<span id="speed">2</span></p> </div> </div> </body> </html>

I replaced poles = document.getElementById("poles") with poles = document.querySelectorAll(".pole") to find all poles.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Objects not shown on screen & keyPressed not working (Flappy Bird Code Challenge) My Javascript code for a flappy bird game isn't displaying the character as it's meant to do How do I add a restart button in html javascript flappy bird type game? Flappy Bird: is there a way to find the spawn - rate of the poles? I have the beginnings of a flappy bird game - the canvas fails to render/display Training Neural Network to play flappy bird with genetic algorithm - Why can't it learn? Bird Watcher Exercism Javascript Solution - counter not counting JavaScript Code Not Working Ajax code is not working in JavaScript Laravel 4 Javascript Code Not Working
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM