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:
JavaScript
x
148
148
1
var poles;2
var bird;3
var pole1;4
var pole2;5
var scoreSpan;6
var speedSpan;7
var speed;8
var score;9
var flapping;10
var playing;11
var scoreUpdated;12
var gameArea;13
var restartBtn;14
var containerWidth;15
var containerHeight;16
17
function load() {18
bird = document.getElementById("bird")19
poles = document.getElementById("poles")20
pole1 = document.getElementById("pole-1")21
pole2 = document.getElementById("pole-2")22
scoreSpan = document.getElementById("score")23
speedSpan = document.getElementById("speed")24
gameArea = document.getElementById("game-area");25
restartBtn = document.getElementById("restart-btn");26
containerWidth = gameArea.clientWidth;27
containerHeight = gameArea.clientHeight;28
}29
30
function restart() {31
restartBtn.removeEventListener('click', restart);32
speed = 2;33
score = 0;34
scoreUpdated = false;35
flapping = false;36
playing = true;37
speedSpan.textContent = speed;38
scoreSpan.textContent = score;39
poles.forEach((pole) => {40
pole.style.right = 0;41
});42
bird.style.top = 20 + "%";43
gameLoop();44
}45
46
function update() {47
48
var polesCurrentPos = parseFloat(window.getComputedStyle(poles[0]).getPropertyValue("right"));49
50
if (polesCurrentPos > containerWidth * 0.85) {51
if (!scoreUpdated) {52
score += 1;53
scoreUpdated = true;54
}55
scoreSpan.textContent = score;56
}57
58
if (polesCurrentPos > containerWidth) {59
60
var newHeight = parseInt(Math.random() * 100);61
// ùéðåé âåáä îåè62
pole1.style.height = 100 + newHeight + "px";63
pole2.style.height = 100 - newHeight + "px";64
65
polesCurrentPos = 0;66
67
speed += 0.25;68
speedSpan.textContent = parseInt(speed);69
scoreUpdated = false;70
}71
72
poles.forEach((pole) => {73
pole.style.right = polesCurrentPos + speed + "px";74
});75
76
let birdTop = parseFloat(window.getComputedStyle(bird).getPropertyValue("top"));77
if (flapping) {78
bird.style.top = birdTop + -2 + "px";79
} else if (birdTop < containerHeight - bird.clientHeight) {80
bird.style.top = birdTop + 2 + "px";81
}82
83
if (collision(bird, pole1) || collision(bird, pole2) || birdTop <= 0 || birdTop > containerHeight - bird.clientHeight) {84
gameOver();85
}86
}87
88
function gameOver() {89
window.console.log("game over");90
playing = false;91
restartBtn.addEventListener('click', restart);92
}93
94
function gameLoop() {95
update();96
if (playing) {97
requestAnimationFrame(gameLoop);98
}99
}100
101
function collision(gameDiv1, gameDiv2) {102
let left1 = gameDiv1.getBoundingClientRect().left;103
let top1 = gameDiv1.getBoundingClientRect().top;104
let height1 = gameDiv1.clientHeight;105
let width1 = gameDiv1.clientWidth;106
107
let bottom1 = top1 + height1;108
let right1 = left1 + width1;109
let left2 = gameDiv2.getBoundingClientRect().left;110
let top2 = gameDiv2.getBoundingClientRect().top;111
let height2 = gameDiv2.clientHeight;112
let width2 = gameDiv2.clientWidth;113
let bottom2 = top2 + height2;114
let right2 = left2 + width2;115
116
if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2)117
return false;118
return true;119
}120
121
document.addEventListener("keydown", function (e) {122
var key = e.key;123
if (key === " " && playing) {124
flapping = true;125
}126
});127
128
document.addEventListener("keyup", function (e) {129
e.preventDefault(); // Stops weird behaviour where releasing space calls restart()130
var key = e.key;131
if (key === " " && playing) {132
flapping = false;133
}134
});135
136
gameArea.addEventListener("mousedown", function (e) {137
if (playing) {138
flapping = true;139
}140
});141
142
gameArea.addEventListener("mouseup", function (e) {143
if (playing) {144
flapping = false;145
}146
});147
148
restart();JavaScript
1
23
23
1
<!DOCTYPE html>2
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta charset="utf-8" />5
<title>Flappy Bird</title>6
<link rel="stylesheet" type="text/css" href="stylesheet1.css" media="screen" />7
<script src="game.js"></script>8
</head>9
<body onload="load();">10
<div id="game">11
<div id="game-area">12
<div id="bird"></div>13
<div class="pole" id="pole-1"></div>14
<div class="pole" id="pole-2"></div>15
</div>16
<div id="game-info">17
<p>Score:<span id="score">0</span></p>18
<button id="restart-btn">Restart</button>19
<p>Speed:<span id="speed">2</span></p>20
</div>21
</div>22
</body>23
</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?
Advertisement
Answer
One way to solve the problem is to move the event listeners into load and call load in your script:
JavaScript
1
149
149
1
var poles;2
var bird;3
var pole1;4
var pole2;5
var scoreSpan;6
var speedSpan;7
var speed;8
var score;9
var flapping;10
var playing;11
var scoreUpdated;12
var gameArea;13
var restartBtn;14
var containerWidth;15
var containerHeight;16
17
function load() {18
bird = document.getElementById("bird")19
poles = document.querySelectorAll(".pole")20
pole1 = document.getElementById("pole-1")21
pole2 = document.getElementById("pole-2")22
scoreSpan = document.getElementById("score")23
speedSpan = document.getElementById("speed")24
gameArea = document.getElementById("game-area");25
restartBtn = document.getElementById("restart-btn");26
containerWidth = gameArea.clientWidth;27
containerHeight = gameArea.clientHeight;28
29
gameArea.addEventListener("mousedown", function(e) {30
if (playing) {31
flapping = true;32
}33
});34
35
gameArea.addEventListener("mouseup", function(e) {36
if (playing) {37
flapping = false;38
}39
});40
}41
42
function restart() {43
restartBtn.removeEventListener('click', restart);44
speed = 2;45
score = 0;46
scoreUpdated = false;47
flapping = false;48
playing = true;49
speedSpan.textContent = speed;50
scoreSpan.textContent = score;51
poles.forEach((pole) => {52
pole.style.right = 0;53
});54
bird.style.top = 20 + "%";55
gameLoop();56
}57
58
function update() {59
60
var polesCurrentPos = parseFloat(window.getComputedStyle(poles[0]).getPropertyValue("right"));61
62
if (polesCurrentPos > containerWidth * 0.85) {63
if (!scoreUpdated) {64
score += 1;65
scoreUpdated = true;66
}67
scoreSpan.textContent = score;68
}69
70
if (polesCurrentPos > containerWidth) {71
72
var newHeight = parseInt(Math.random() * 100);73
// ùéðåé âåáä îåè74
pole1.style.height = 100 + newHeight + "px";75
pole2.style.height = 100 - newHeight + "px";76
77
polesCurrentPos = 0;78
79
speed += 0.25;80
speedSpan.textContent = parseInt(speed);81
scoreUpdated = false;82
}83
84
poles.forEach((pole) => {85
pole.style.right = polesCurrentPos + speed + "px";86
});87
88
let birdTop = parseFloat(window.getComputedStyle(bird).getPropertyValue("top"));89
if (flapping) {90
bird.style.top = birdTop + -2 + "px";91
} else if (birdTop < containerHeight - bird.clientHeight) {92
bird.style.top = birdTop + 2 + "px";93
}94
95
if (collision(bird, pole1) || collision(bird, pole2) || birdTop <= 0 || birdTop > containerHeight - bird.clientHeight) {96
gameOver();97
}98
}99
100
function gameOver() {101
window.console.log("game over");102
playing = false;103
restartBtn.addEventListener('click', restart);104
}105
106
function gameLoop() {107
update();108
if (playing) {109
requestAnimationFrame(gameLoop);110
}111
}112
113
function collision(gameDiv1, gameDiv2) {114
let left1 = gameDiv1.getBoundingClientRect().left;115
let top1 = gameDiv1.getBoundingClientRect().top;116
let height1 = gameDiv1.clientHeight;117
let width1 = gameDiv1.clientWidth;118
119
let bottom1 = top1 + height1;120
let right1 = left1 + width1;121
let left2 = gameDiv2.getBoundingClientRect().left;122
let top2 = gameDiv2.getBoundingClientRect().top;123
let height2 = gameDiv2.clientHeight;124
let width2 = gameDiv2.clientWidth;125
let bottom2 = top2 + height2;126
let right2 = left2 + width2;127
128
if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2)129
return false;130
return true;131
}132
133
document.addEventListener("keydown", function(e) {134
var key = e.key;135
if (key === " " && playing) {136
flapping = true;137
}138
});139
140
document.addEventListener("keyup", function(e) {141
e.preventDefault(); // Stops weird behaviour where releasing space calls restart()142
var key = e.key;143
if (key === " " && playing) {144
flapping = false;145
}146
});147
148
load();149
restart();JavaScript
1
23
23
1
<!DOCTYPE html>2
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta charset="utf-8" />5
<title>Flappy Bird</title>6
<link rel="stylesheet" type="text/css" href="stylesheet1.css" media="screen" />7
<script src="game.js" defer></script>8
</head>9
<body>10
<div id="game">11
<div id="game-area">12
<div id="bird"></div>13
<div class="pole" id="pole-1"></div>14
<div class="pole" id="pole-2"></div>15
</div>16
<div id="game-info">17
<p>Score:<span id="score">0</span></p>18
<button id="restart-btn">Restart</button>19
<p>Speed:<span id="speed">2</span></p>20
</div>21
</div>22
</body>23
</html>I replaced poles = document.getElementById("poles") with poles = document.querySelectorAll(".pole") to find all poles.