[英]Flappy bird code not working - JavaScript
我想在 javascript 中编写一个飞扬的小鸟游戏，但是当我在浏览器中打开它时它似乎不起作用。 css 有效。 js中的第147、154、31和160行似乎都是错误，但我不明白如何修复它们。
这是我的 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>
运行时js出现很多错误，我似乎无法理解为什么。 有谁知道如何修理它？
解决此问题的一种方法是将事件侦听器移入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>
我用poles = poles = document.querySelectorAll(".pole") poles = document.getElementById("poles")查找所有极点。
屏幕上未显示的对象和 keyPressed 不起作用（Flappy Bird 代码挑战）
[英]Objects not shown on screen & keyPressed not working (Flappy Bird Code Challenge)
我的 Flappy Bird 游戏的 Javascript 代码未按预期显示角色
[英]My Javascript code for a flappy bird game isn't displaying the character as it's meant to do
如何在 html javascript 飞禽类游戏中添加重启按钮？
[英]How do I add a restart button in html javascript flappy bird type game?
我开始玩飞扬的小鸟游戏 - canvas 无法渲染/显示
[英]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?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.