Flappy Bird 代码不起作用 - JavaScript

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.我想在 javascript 中编写一个飞扬的小鸟游戏，但是当我在浏览器中打开它时它似乎不起作用。 the css works. css 有效。 lines 147, 154, 31 and 160 in js all seem to be errors, but I do not understand how to fix them. js中的第147、154、31和160行似乎都是错误，但我不明白如何修复它们。

this is my html:这是我的 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.运行时js出现很多错误，我似乎无法理解为什么。 Does anyone know how to fix it?有谁知道如何修理它？

Answer 1

One way to solve the problem is to move the event listeners into load and call load in your script:解决此问题的一种方法是将事件侦听器移入load并在脚本中调用load ：

 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.我用poles = poles = document.querySelectorAll(".pole") poles = document.getElementById("poles")查找所有极点。

Flappy Bird 代码不起作用 - JavaScript

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-05-28 11:59:52

Flappy Bird 代码不起作用 - JavaScript

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-05-28 11:59:52

解决方案1
0 已采纳 2021-05-28 11:59:52