我们正在使用JavaScript编写游戏。我们就快到了。唯一的事情就是实现最后一个循环。我们想用一个函数来做到这一点。如果在此循环中启动一个函数，则会收到错误消息。如果我们跳过第一个函数，则以下函数会出错。
该函数可以在下面的代码中看到，请参见function levelUp()。如果我们删除此代码，它将起作用。
现在屏幕保持空白。并且console-log给出了错误：
(index):341 Uncaught ReferenceError: coordinaten is not defined at droidsNeerzetten ((index):341) at levelUp ((index):83) at (index):65
我们预计会出现9个精灵，以便游戏开始。
<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>
答案 0 :(得分：1)
您正在coordinaten函数中将levelUp()定义为局部变量，这意味着它仅在该函数中可用，而在该函数之外不可用。您需要在使用该功能的所有功能通用的范围内定义变量：
...
var level = 1;
var punten = 0;
var coordinaten;
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
coordinaten = [[0,0,0,0]];
...
请注意，现在如何在函数外部定义它，并简单地将其分配到levelUp()函数内部。