We are coding a game with JavaScript. We are almost there. The only thing is the realising the last loop. We want to do this with a function. If we start a function in this loop we get an error. If we skip the first function, the following function gives an error.
The function can be seen below in the code, see function levelUp(). If we delete this code it works.
- In a test-file works it. We can start a function in a function.
- Read many fora for solutions. But none worked.
Now the screen stays blank. And console-log gives errors:
(index):341 Uncaught ReferenceError: coordinaten is not defined at droidsNeerzetten ((index):341) at levelUp ((index):83) at (index):65
We expected 9 sprites to appear so the game can start.
<html>
<head>
<title>Hyperman: Hoelang blijf jij uit de handen van de droids?</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="kader">
<div class="titel">
<img src="hyperman_tekst.png" />
</div>
<br />
<div class="ranglijst">
<div class="links">#1 Jeroen</div><div class="rechts">1234pt.</div><br />
<div class="links">#2 Jeroen</div><div class="rechts">1234pt.</div><br />
<div class="links">#3 Jeroen</div><div class="rechts">1234pt.</div><br />
</div>
<br />
<div class="spel-data">
<div class="links">Level:</div><div class="rechts"><span id="level">0</span></div><br />
<div class="links">Punten:</div><div class="rechts"><span id="score">0</span></div><br />
<div class="links">Leven(s):</div><div class="rechts">2</div><br />
</div>
<br />
<div class="knoppen">
<button class="knop" onclick="LB()"><img src="pijl_linksboven.png" /></button>
<button class="knop knop-rechts" onclick="MB()"><img src="pijl_middenboven.png" /></button>
<button class="knop knop-rechts" onclick="RB()"><img src="pijl_rechtsboven.png" /></button>
<br />
<button class="knop" onclick="LM()"><img src="pijl_linksmidden.png" /></button>
<button class="knop knop-rechts" onclick="MM()"><img src="pijl_middenmidden.png" /></button>
<button class="knop knop-rechts" onclick="RM()"><img src="pijl_rechtsmidden.png" /></button>
<br />
<button class="knop" onclick="LO()"><img src="pijl_linksonder.png" /></button>
<button class="knop knop-rechts" onclick="MO()"><img src="pijl_middenonder.png" /></button>
<button class="knop knop-rechts" onclick="RO()"><img src="pijl_rechtsonder.png" /></button>
<br />
<button class="brede-knop" onclick="randomHyperman()">HyperJump</button>
</div>
<br />
<div class="info">
<a href="https://www.jeroenvanrensen.nl/hyperman/info.html" target="_blank"><img src="info.png" /></a>
</div>
</div>
<script type="text/javascript">
// CONSTANTEN
var CANVAS_HOOGTE = 620;
var CANVAS_BREEDTE = 740;
var COORDINATEN_X = [0,20,40,60,80,100,120,140,160,180,200,220,240,260,280,300,320,340,360,380,400,420,440,460,480,500,520,540,560,580,600,620,640,660,680,700,720];
var AANTAL_X_COORDINATEN = 37;
var COORDINATEN_Y = [0,20,40,60,80,100,120,140,160,180,200,220,240,260,280,300,320,340,360,380,400,420,440,460,480,500,520,540,560,580,600];
var AANTAL_Y_COORDINATEN = 31;
var STAP_GROOTTE = 20;
// START
// Canvas aanmaken
var canvas = document.createElement('canvas');
var c = canvas.getContext('2d');
canvas.width = CANVAS_BREEDTE;
canvas.height = CANVAS_HOOGTE;
document.body.appendChild(canvas);
var level = 1;
var punten = 0;
levelUp();
function levelUp() {
// Hyperman positioneren
// Eerste getal (0, 1 of 2) = wezen (Hyperman, Droid of Hoopje); Tweede getal is het nummer (0 = ALTIJD Hyperman); Derde getal is X-coordinaat; Vierde getal is Y-coordinaat
var coordinaten = [[0,0,0,0]];
document.getElementById("level").innerHTML = level;
var droids = ((level * 4) + 4) + 1;
for(var i=1;i<droids;i++) {
coordinaten[i] = [1,i,0,0];
}
console.log(coordinaten[1][1]);
coordinaten[0][2] = COORDINATEN_X[Math.floor((Math.random())*AANTAL_X_COORDINATEN)];
coordinaten[0][3] = COORDINATEN_Y[Math.floor((Math.random())*AANTAL_Y_COORDINATEN)];
// randomHypermanPositie();
var spelerMagZetten = true;
droidsNeerzetten();
hoofdlus();
}
// HOOFDLUS
function hoofdlus() {
draw();
update();
botstEenDroid();
window.requestAnimationFrame(hoofdlus);
}
// HYPERMAN-BESTURING
window.addEventListener('keydown', onKeyDown);
function onKeyDown(event) {
if(event.keyCode == 48) {
randomHyperman();
}
if(event.keyCode == 72) {
randomHyperman();
}
if(event.keyCode == 49) {
LO();
}
if(event.keyCode == 50) {
MO();
}
if(event.keyCode == 51) {
RO();
}
if(event.keyCode == 52) {
LM();
}
if(event.keyCode == 53) {
MM();
}
if(event.keyCode == 54) {
RM();
}
if(event.keyCode == 55) {
LB();
}
if(event.keyCode == 56) {
MB();
}
if(event.keyCode == 57) {
RB();
}
}
function LB () {
if (spelerMagZetten) {
coordinaten[0][2] = coordinaten[0][2] - STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] - STAP_GROOTTE;
XYControle();
hoopjeControle(1);
spelerMagZetten = false;
}
}
function MB () {
if (spelerMagZetten) {
coordinaten[0][2] = coordinaten[0][2] + 0;
coordinaten[0][3] = coordinaten[0][3] - STAP_GROOTTE;
XYControle();
hoopjeControle(2);
spelerMagZetten = false;
}
}
function RB () {
if (spelerMagZetten) {
coordinaten[0][2] = coordinaten[0][2] + STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] - STAP_GROOTTE;
XYControle();
hoopjeControle(3);
spelerMagZetten = false;
}
}
function LM () {
if (spelerMagZetten) {
coordinaten[0][2] = coordinaten[0][2] - STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] + 0;
XYControle();
hoopjeControle(4);
spelerMagZetten = false;
}
}
function MM () {
if (spelerMagZetten) {
coordinaten[0][2] = coordinaten[0][2] + 0;
coordinaten[0][3] = coordinaten[0][3] + 0;
XYControle();
hoopjeControle(5);
spelerMagZetten = false;
}
}
function RM () {
if (spelerMagZetten) {
coordinaten[0][2] = coordinaten[0][2] + STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] + 0;
XYControle();
hoopjeControle(6);
spelerMagZetten = false;
}
}
function LO () {
if (spelerMagZetten) {
coordinaten[0][2] = coordinaten[0][2] - STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] + STAP_GROOTTE;
XYControle();
hoopjeControle(7);
spelerMagZetten = false;
}
}
function MO () {
if (spelerMagZetten) {
coordinaten[0][2] = coordinaten[0][2] + 0;
coordinaten[0][3] = coordinaten[0][3] + STAP_GROOTTE;
XYControle();
hoopjeControle(8);
spelerMagZetten = false;
}
}
function RO () {
if (spelerMagZetten) {
coordinaten[0][2] = coordinaten[0][2] + STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] + STAP_GROOTTE;
XYControle();
hoopjeControle(9);
spelerMagZetten = false;
}
}
function XYControle() {
for(var i=0;i<coordinaten.length;i++) {
console.log('ID: ',coordinaten[i][1]);
console.log('Spritesoort: ',coordinaten[i][0]);
console.log('-----');
}
console.log('---------------------------------------------------------------------');
if (coordinaten[0][2] < 0) {
coordinaten[0][2] = coordinaten[0][2] + STAP_GROOTTE;
}
if (coordinaten[0][2] > (CANVAS_BREEDTE - STAP_GROOTTE)) {
coordinaten[0][2] = coordinaten[0][2] - STAP_GROOTTE;
}
if (coordinaten[0][3] < 0) {
coordinaten[0][3] = coordinaten[0][3] + STAP_GROOTTE;
}
if (coordinaten[0][3] > (CANVAS_HOOGTE - STAP_GROOTTE)) {
coordinaten[0][3] = coordinaten[0][3] - STAP_GROOTTE;
}
}
function hoopjeControle(richting) {
for(var i=0;i<coordinaten.length;i++) {
if(coordinaten[i][0] == 2) {
if(coordinaten[0][2] == coordinaten[i][2] && coordinaten[0][3] == coordinaten[i][3]) {
if(richting == 1) {
coordinaten[0][2] = coordinaten[0][2] + STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] + STAP_GROOTTE;
}
if(richting == 2) {
coordinaten[0][2] = coordinaten[0][2] + 0;
coordinaten[0][3] = coordinaten[0][3] + STAP_GROOTTE;
}
if(richting == 3) {
coordinaten[0][2] = coordinaten[0][2] - STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] + STAP_GROOTTE;
}
if(richting == 4) {
coordinaten[0][2] = coordinaten[0][2] + STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] + 0;
}
if(richting == 5) {
coordinaten[0][2] = coordinaten[0][2] + 0;
coordinaten[0][3] = coordinaten[0][3] + 0;
}
if(richting == 6) {
coordinaten[0][2] = coordinaten[0][2] - STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] + 0;
}
if(richting == 7) {
coordinaten[0][2] = coordinaten[0][2] + STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] - STAP_GROOTTE;
}
if(richting == 8) {
coordinaten[0][2] = coordinaten[0][2] + 0;
coordinaten[0][3] = coordinaten[0][3] - STAP_GROOTTE;
}
if(richting == 9) {
coordinaten[0][2] = coordinaten[0][2] - STAP_GROOTTE;
coordinaten[0][3] = coordinaten[0][3] - STAP_GROOTTE;
}
}
}
}
}
function randomHyperman() {
if(spelerMagZetten) {
var hyperman_x = COORDINATEN_X[Math.floor((Math.random())*AANTAL_X_COORDINATEN)];
var hyperman_y = COORDINATEN_Y[Math.floor((Math.random())*AANTAL_Y_COORDINATEN)];
for(var i=0;i<coordinaten.length;i++) {
if(coordinaten[i][0] == 2) {
if(coordinaten[i][2] == hyperman_x) {
var xIsGelijk = true;
} else {
var xIsGelijk = false;
}
if(coordinaten[i][3] == hyperman_y) {
var yIsGelijk = true;
} else {
var yIsGelijk = false;
}
}
if(xIsGelijk && yIsGelijk) {
window.requestAnimationFrame(randomHyperman);
} else {
coordinaten[0][2] = hyperman_x;
coordinaten[0][3] = hyperman_y;
}
}
}
spelerMagZetten = false;
}
function randomHypermanPositie() {
// coordinaten[0][2] = COORDINATEN_X[Math.floor((Math.random())*AANTAL_X_COORDINATEN)];
// coordinaten[0][3] = COORDINATEN_Y[Math.floor((Math.random())*AANTAL_Y_COORDINATEN)];
}
// DROIDS
function update() {
if(spelerMagZetten == false) {
var hyperman_x = coordinaten[0][2];
var hyperman_y = coordinaten[0][3];
for(var i=1;i<coordinaten.length;i++) {
if(coordinaten[i][0] == 1) {
var droid_x = coordinaten[i][2];
var droid_y = coordinaten[i][3];
if(droid_x > hyperman_x) {
droid_x = droid_x - 20;
} else if(droid_x < hyperman_x) {
droid_x = droid_x + 20;
}
if(droid_y > hyperman_y) {
droid_y = droid_y - 20;
} else if(droid_y < hyperman_y) {
droid_y = droid_y + 20;
}
coordinaten[i][2] = droid_x;
coordinaten[i][3] = droid_y;
}
}
spelerMagZetten = true;
}
}
function droidsNeerzetten() {
for(var i=1;i<coordinaten.length;i++) {
var coordinaatMaken = true;
while(coordinaatMaken) {
var droid_x = COORDINATEN_X[Math.floor((Math.random())*AANTAL_X_COORDINATEN)];
var droid_y = COORDINATEN_Y[Math.floor((Math.random())*AANTAL_Y_COORDINATEN)];
if(droid_x == coordinaten[0][2] && droid_y == coordinaten[0][3]) {
coordinaatMaken = true;
} else {
coordinaatMaken = false;
coordinaten[i][2] = droid_x;
coordinaten[i][3] = droid_y;
}
}
}
}
// TEKENEN
function draw() {
// Achtergrond tekenen
c.fillStyle = '#f6e58d';
c.fillRect (0,0,CANVAS_BREEDTE,CANVAS_HOOGTE);
// Afbeeldingen inladen
var hypermanAfbeelding = new Image();
hypermanAfbeelding.src = 'hyperman.png';
var droidAfbeelding = new Image();
droidAfbeelding.src = 'droid.png';
var hoopjeAfbeelding = new Image();
hoopjeAfbeelding.src = 'hoopje.png';
// Wezens uit de array tekenen
for(var a=0;a<coordinaten.length;a++) {
if(coordinaten[a][0] == 0) {
c.drawImage(hypermanAfbeelding, coordinaten[a][2], coordinaten[a][3]);
}
if(coordinaten[a][0] == 1) {
c.drawImage(droidAfbeelding, coordinaten[a][2], coordinaten[a][3]);
}
if(coordinaten[a][0] == 2) {
c.drawImage(hoopjeAfbeelding, coordinaten[a][2], coordinaten[a][3]);
}
}
}
// OVERIGE FUNCTIES
function botstEenDroid() {
var groteControle = true;
for(var i=1;i<coordinaten.length;i++) {
if(coordinaten[i][0] == 1) {
// Botsingen met Hyperman
if(coordinaten[0][2] == coordinaten[i][2] && coordinaten[0][3] == coordinaten[i][3]) {
gameOver();
groteControle = false;
}
// Botsingen met Droid
if(groteControle) {
for(var h=1;h<coordinaten.length;h++) {
if(coordinaten[h][0] == 1) {
if(coordinaten[h][1] != coordinaten[i][1]) {
if(coordinaten[h][2] == coordinaten[i][2] && coordinaten[h][3] == coordinaten[i][3]) {
coordinaten[i][0] = 2;
coordinaten[h][0] = 2;
score(2);
console.log('Droid - Droid');
console.log('---');
groteControle = false;
}
}
}
}
}
// Botsingen met Hoopje
if(groteControle) {
var controle = true;
for(var h=1;h<coordinaten.length;h++) {
if(controle) {
if(coordinaten[h][0] == 2) {
if(coordinaten[h][2] == coordinaten[i][2] && coordinaten[h][3] == coordinaten[i][3]) {
controle = false;
coordinaten[i][0] = 2;
score(1);
console.log('Droid - Hoopje');
console.log('---');
}
}
}
}
}
}
}
}
function score(droidsGedood) {
punten = punten + droidsGedood;
document.getElementById("score").innerHTML = punten;
}
function gameOver() {
// GAME OVER
}
</script>
</body>
</html>
