Question

当我对代码进行修订时，我发现编写的代码无法正常运行，但是显示的字词始终是“未定义的”，但是我已经多次检查代码看起来是否完美。你能介意看看并帮我检查一下吗？这真的让我很困惑...非常感谢。非常感谢您的帮助。

<!DOCTYPE html>
<html>
<head> 
<style>
body{display:block; 
margin:auto;
text-align:center;}
canvas{border:1px solid black;}
</style>
<script>
var canvas;
var ctx;
var timer;
var words=["canoe","buddha","elephant","dice"];//
var words=["canoe","buddha","elephant","dice"];
var answerIndex=-1;
var answer_x=-1;
var answer_y=-1;
var plate_x=-1;
var plate_y=-1;
var score=0;
function draw()
{ ctx.clearRect(0,0,canvas.width,canvas.height-10);
//canvas=document.getElementById("Canvas");
//ctx=canvas.getcontext("2d")
answer_x+=3;
answer_y+=3;

var answer=words[answerIndex];
ctx.font="20px Arial";
ctx.fillStyle="black";
ctx.fillText(answer,answer_x,answer_y);
var distance=answer_x-plate_x;
document.getElementById("plate_x").innerHTML=plate_x;
document.getElementById("word_x").innerHTML=answer_x;
document.getElementById("dist").innerHTML=distance;
if (answer_y>=plate_y)
{
 clearInterval(timer);
 if ((distance<50) && (distance>-50))
 {
 document.getElementById("message").innerHTML="Bravo!";
 score++;
 document.getElementById("score").innerHTML=score;
 }
 else 
  {
 document.getElementById("message").innerHTML="Game over!";
  }
 }
}
function getRandomIndex()
{var random_number=Math.random*words.length;
var random_int=Math.floor(random_number);
return random_int;
}

function play()
{
canvas=document.getElementById("Canvas");
ctx=canvas.getContext("2d");
answerIndex = getRandomIndex();
	var answer = words[answerIndex];
	var imageFileName = answer + ".jpg";
	document.getElementById("myPic").src = imageFileName;
	
answer_x=0;
answer_y=0;
ctx.clearRect(0,0,canvas.width,canvas.height);
 plate_x=0;
 plate_y=canvas.height-10;
 ctx.fillStyle="blue";
 ctx.fillRect(plate_x,plate_y,50,10);
 clearInterval(timer);
timer=setInterval("draw()",100);
}


function moveleft()
{ ctx.clearRect(plate_x,plate_y,50,10);

if(plate_x>0)
{plate_x-=20;}

ctx.fillStyle="blue";
ctx.fillRect(plate_x,plate_y,50,10);

}
function moveright()
{ ctx.clearRect(plate_x,plate_y,50,10);

if(plate_x<(canvas.width-50))
{plate_x+=20;}

ctx.fillStyle="blue";
ctx.fillRect(plate_x,plate_y,50,10);

}
</script>
</head>
<body>
<h1>Catch the word!</h1>
<img id="myPic" alt="no pic" src="" width="200"/><br/>
<canvas id="Canvas" width="300" height="250"></canvas>
<br/><button onclick="play()">Play</button>
<button onclick="moveleft()">&larr;</button>
<button onclick="moveright()">&rarr;</button>
<p id="message">Move to catch the word!</p>
<p id="score"></p>
<p>Plate X-coordinate:</p><p id="plate_x"></p>
<p>Word X-coordinate:</p><p id="word_x"></p>
<p>Distance:</p><p id="dist"></p>
</body>
</html>

Answer 1

在getRandomIndex()函数中，您忘记了Math.random之后的括号，该括号将random作为属性而不是方法来访问。因此，公式中的Math.random应该改为Math.random()。

您的当前代码不起作用，因为您的getRandomIndex()函数返回了NaN：

function getRandomIndex() {
  var random_number = Math.random * words.length;
  var random_int = Math.floor(random_number);

  console.log(Math.random);
  // ƒ random() { [native code] }

  console.log(random_number);
  // NaN

  console.log(random_int);
  // NaN

  return random_int;
}

如果您将当前代码更改为使用Math.random()，则getRandomIndex()函数将返回您期望的随机整数值：

function getRandomIndex() {
  var random_number = Math.random() * words.length; // changed code
  var random_int = Math.floor(random_number);

  console.log(Math.random());
  // 0.40108128192401526 (of course this value will change each time)

  console.log(random_number);
  // 3.613675793700807 (of course this value will change each time)

  console.log(random_int);
  // 3 (of course this value will change each time)

  return random_int;
}

要遵循@David的评论，将来如果遇到类似问题，您总是可以console.log()从函数中返回一些未返回预期输出的值。当控制台中没有错误时，这将帮助您解决问题。

Answer 2

您的变量ctx是未定义的，因为您在函数play（）中定义了ctx。

在脚本的开头，您声明了所有变量，但您将ctx和canvas留空了

var canvas; //<------ You leave canvas empty
var ctx; //<------ You leave ctx empty
var timer;
var words = ["canoe", "buddha", "elephant", "dice"];
var words = ["canoe", "buddha", "elephant", "dice"];
var answerIndex = -1;
var answer_x = -1;
var answer_y = -1;
var plate_x = -1;
var plate_y = -1;
var score = 0;

在播放功能中，您为其分配了一个值。

function play() {
  canvas = document.getElementById("Canvas");
  ctx = canvas.getContext("2d"); //<---- Here you add a value
  answerIndex = getRandomIndex();
  var answer = words[answerIndex];
  var imageFileName = answer + ".jpg";
  document.getElementById("myPic").src = imageFileName;

  answer_x = 0;
  answer_y = 0;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  plate_x = 0;
  plate_y = canvas.height - 10;
  ctx.fillStyle = "blue";
  ctx.fillRect(plate_x, plate_y, 50, 10);
  clearInterval(timer);
  timer = setInterval("draw()", 100);
}

但是该值仅在该函数中可用。

和所有其他功能也使用ctx！在下面的代码块中，我澄清了所有出错的地方和没有出错的地方。

var canvas;
var ctx; //<--- here you leave it empty
var timer;
var words = ["canoe", "buddha", "elephant", "dice"];
var words = ["canoe", "buddha", "elephant", "dice"];
var answerIndex = -1;
var answer_x = -1;
var answer_y = -1;
var plate_x = -1;
var plate_y = -1;
var score = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height - 10); //<---  Here you are calling ctx but ctx is not defined!
  //canvas=document.getElementById("Canvas");
  //ctx=canvas.getcontext("2d") //Here you are randomly identifying ctx but you made a comment of it...
  answer_x += 3;
  answer_y += 3;

  var answer = words[answerIndex];
  ctx.font = "20px Arial"; //<---  Here you are calling ctx but ctx is not defined!
  ctx.fillStyle = "black"; //<---  Here you are calling ctx but ctx is not defined!
  ctx.fillText(answer, answer_x, answer_y); //<---  Here you are calling ctx but ctx is not defined!
  var distance = answer_x - plate_x;
  document.getElementById("plate_x").innerHTML = plate_x;
  document.getElementById("word_x").innerHTML = answer_x;
  document.getElementById("dist").innerHTML = distance;
  if (answer_y >= plate_y) {
    clearInterval(timer);
    if ((distance < 50) && (distance > -50)) {
      document.getElementById("message").innerHTML = "Bravo!";
      score++;
      document.getElementById("score").innerHTML = score;
    } else {
      document.getElementById("message").innerHTML = "Game over!";
    }
  }
}

function getRandomIndex() {
  var random_number = Math.random * words.length;
  var random_int = Math.floor(random_number);
  return random_int;
}

function play() {
  canvas = document.getElementById("Canvas");
  ctx = canvas.getContext("2d"); // <--- here you correctly identified ctx
  answerIndex = getRandomIndex();
  var answer = words[answerIndex];
  var imageFileName = answer + ".jpg";
  document.getElementById("myPic").src = imageFileName;

  answer_x = 0;
  answer_y = 0;
  ctx.clearRect(0, 0, canvas.width, canvas.height); //<---- So this can be executed and is NOT undefined
  plate_x = 0;
  plate_y = canvas.height - 10;
  ctx.fillStyle = "blue"; //<---- So this can be executed and is NOT undefined
  ctx.fillRect(plate_x, plate_y, 50, 10); //<---- So this can be executed and is NOT undefined
  clearInterval(timer);
  timer = setInterval("draw()", 100);
}


function moveleft() {
  ctx.clearRect(plate_x, plate_y, 50, 10); //<---  Here you are calling ctx but ctx is not defined!

  if (plate_x > 0) {
    plate_x -= 20;
  }

  ctx.fillStyle = "blue"; //<---  Here you are calling ctx but ctx is not defined!
  ctx.fillRect(plate_x, plate_y, 50, 10); //<---  Here you are calling ctx but ctx is not defined!

}

function moveright() {
  ctx.clearRect(plate_x, plate_y, 50, 10); //<---  Here you are calling ctx but ctx is not defined!

  if (plate_x < (canvas.width - 50)) {
    plate_x += 20;
  }

  ctx.fillStyle = "blue"; //<---  Here you are calling ctx but ctx is not defined!
  ctx.fillRect(plate_x, plate_y, 50, 10); //<---  Here you are calling ctx but ctx is not defined!

}

所以解决方案是像这样在开头声明ctx和canvas：

var canvas = document.getElementById("Canvas"); //<----- Like this
var ctx = canvas.getContext("2d"); //<------ Like this
var timer;
var words = ["canoe", "buddha", "elephant", "dice"];
var words = ["canoe", "buddha", "elephant", "dice"];
var answerIndex = -1;
var answer_x = -1;
var answer_y = -1;
var plate_x = -1;
var plate_y = -1;
var score = 0;

但是，要使其正常工作，您将需要从头部删除脚本，并将其一直放置到身体底部，如下所示：

<html>
    <head>

       Remove your script from here
    </head>
    <body>
       All the contents of your body           

       And place your script here
    </body>
</html>

或在需要此功能的每个函数的开头声明ctx：

var canvas;
var ctx;
var timer;
var words = ["canoe", "buddha", "elephant", "dice"];
var words = ["canoe", "buddha", "elephant", "dice"];
var answerIndex = -1;
var answer_x = -1;
var answer_y = -1;
var plate_x = -1;
var plate_y = -1;
var score = 0;

function draw() {
  canvas = document.getElementById("Canvas"); //<----- declare canvas here
  ctx = canvas.getcontext("2d"); // <--- declare ctx here
  ctx.clearRect(0, 0, canvas.width, canvas.height - 10);
  answer_x += 3;
  answer_y += 3;

  var answer = words[answerIndex];
  ctx.font = "20px Arial";
  ctx.fillStyle = "black";
  ctx.fillText(answer, answer_x, answer_y);
  var distance = answer_x - plate_x;
  document.getElementById("plate_x").innerHTML = plate_x;
  document.getElementById("word_x").innerHTML = answer_x;
  document.getElementById("dist").innerHTML = distance;
  if (answer_y >= plate_y) {
    clearInterval(timer);
    if ((distance < 50) && (distance > -50)) {
      document.getElementById("message").innerHTML = "Bravo!";
      score++;
      document.getElementById("score").innerHTML = score;
    } else {
      document.getElementById("message").innerHTML = "Game over!";
    }
  }
}

function getRandomIndex() {
  var random_number = Math.random * words.length;
  var random_int = Math.floor(random_number);
  return random_int;
}

function play() {
  canvas = document.getElementById("Canvas"); //<----- declare canvas here
  ctx = canvas.getcontext("2d"); // <--- declare ctx here
  answerIndex = getRandomIndex();
  var answer = words[answerIndex];
  var imageFileName = answer + ".jpg";
  document.getElementById("myPic").src = imageFileName;

  answer_x = 0;
  answer_y = 0;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  plate_x = 0;
  plate_y = canvas.height - 10;
  ctx.fillStyle = "blue";
  ctx.fillRect(plate_x, plate_y, 50, 10);
  clearInterval(timer);
  timer = setInterval("draw()", 100);
}


function moveleft() {
  canvas = document.getElementById("Canvas"); //<----- declare canvas here
  ctx = canvas.getcontext("2d"); // <--- declare ctx here
  ctx.clearRect(plate_x, plate_y, 50, 10);

  if (plate_x > 0) {
    plate_x -= 20;
  }

  ctx.fillStyle = "blue";
  ctx.fillRect(plate_x, plate_y, 50, 10);

}

function moveright() {
  canvas = document.getElementById("Canvas"); //<----- declare canvas here
  ctx = canvas.getcontext("2d"); // <--- declare ctx here
  ctx.clearRect(plate_x, plate_y, 50, 10);

  if (plate_x < (canvas.width - 50)) {
    plate_x += 20;
  }

  ctx.fillStyle = "blue";
  ctx.fillRect(plate_x, plate_y, 50, 10);

}

还请阅读其他人的评论，因为他们可能会注意到我没有看到的其他错误

查询未定义数组

2 个答案: