[英]Object turns into undefined when passed to function as argument and method is called JavaScript
I'm currently learning some JavaScript for my web and I'm building a simple pong game.我目前正在为我的 web 学习一些 JavaScript 并且我正在构建一个简单的乒乓球游戏。 This is my main file (a canvas with its context, 4 objects that make the game and an animation function to update and draw them):
这是我的主文件(一个 canvas 及其上下文,4 个制作游戏的对象和一个 animation function 来更新和绘制它们):
const canvas = document.getElementById("game_canvas");
const ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = canvas.width/2;
const table = new Table(canvas.width, canvas.height);
const ball = new Ball(canvas.width/2, canvas.height/2, canvas.width/200);
const pad1 = new Pad( canvas.width/20, canvas.height/2, canvas.width/100, canvas.height/5, true);
const pad2 = new Pad(canvas.width*19/20, canvas.height/2, canvas.width/100, canvas.height/5);
animate();
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
result = ball.update(canvas.width, canvas.height, pad1, pad2);
pad1.update(canvas.height);
pad2.update(canvas.height);
ball.draw(ctx);
pad1.draw(ctx);
pad2.draw(ctx);
table.draw(ctx);
requestID = requestAnimationFrame(animate);
switch (result) {
case 1:
cancelAnimationFrame(requestID);
confirm("You lost!");
break;
case 2:
cancelAnimationFrame(requestID);
confirm("You won!");
break;
}
}
This works perfectly.这完美地工作。 The problem comes because I would like to let the player star over when the game ends, my solution is to put all of the definitions inside a function
star_game()
and pass the objects as arguments to the animate function:问题来了,因为我想让玩家在游戏结束时明星结束,我的解决方案是将所有定义放在 function
star_game()
中,并将对象作为 arguments 传递给动画 ZC1C425268E17385D14ZF5074
start_game();
function start_game() {
const canvas = document.getElementById("game_canvas");
const ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = canvas.width/2;
const table = new Table(canvas.width, canvas.height);
const ball = new Ball(canvas.width/2, canvas.height/2, canvas.width/200);
const pad1 = new Pad( canvas.width/20, canvas.height/2, canvas.width/100, canvas.height/5, true);
const pad2 = new Pad(canvas.width*19/20, canvas.height/2, canvas.width/100, canvas.height/5);
animate(canvas, ctx, table, ball, pad1, pad2);
}
function animate(canvas, ctx, table, ball, pad1, pad2) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
result = ball.update(canvas.width, canvas.height, pad1, pad2);
pad1.update(canvas.height);
pad2.update(canvas.height);
ball.draw(ctx);
pad1.draw(ctx);
pad2.draw(ctx);
table.draw(ctx);
requestID = requestAnimationFrame(animate);
switch (result) {
case 1:
cancelAnimationFrame(requestID);
var again = confirm("You lost, play again?");
break;
case 2:
cancelAnimationFrame(requestID);
var again = confirm("You won, play again?");
break;
}
if (again) start_game();
}
Now, for some reason I do not understand, I get this error:现在,由于某种我不明白的原因,我收到了这个错误:
Uncaught TypeError: Cannot read properties of undefined (reading 'clearRect') at animate
And this happens with all of the objects.所有对象都会发生这种情况。
I tried logging the ctx object in the console at the begining of the animate()
function and something even weirder happens, the object is printed as normal and then as undefined:我尝试在
animate()
function 开始时在控制台中记录 ctx object ,甚至发生了更奇怪的事情, object 打印正常,然后打印为
What's going on?这是怎么回事?
I don't see you passing any arguments to animate here:我没有看到你通过任何 arguments 在这里制作动画:
requestAnimationFrame(animate)
You meant:你的意思是:
requestAnimationFrame(() => animate(canvas, ctx, table, ball, pad1, pad2))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.