未捕获引用错误：未定义绘图-请帮助我

rbl8hiat 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(306)

我正在尝试完成这个关于使用javascript和html制作乒乓球游戏的教程。
视频中的每一步我都跟着看了好几遍。虽然我的代码似乎与视频中的代码匹配，但我一直遇到一个错误：未捕获引用错误：未定义绘图。错误发生在第20行。
我一定是忽略了什么。有人能指出吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pong</title>
</head>
<canvas id="ca" width="720" height="480"></canvas>

<script>
    let ctx = ca.getContext("2");
    let p1 = p2 = 80;
    let key = {};
    let ball = {};
start();
setInterval(loop, 1000/60)
    document.addEventListener("kedown", e => key[e.keyCode] = true);
    document.addEventListener("kedown", e => key[e.keyCode] = false);
draw();

function start(){
    ball = {
        x: ca.width / 2,
        y: ca.height / 2,
        speedX: 3,
        speedY: 0
    };

}
function loop(){
    if(key[38]){
        p2 -= 5;
    }

    if(key[40]){
        p2 += 5;
    }

    if(key[87]){
        p2 -= 5;
    }

    if(key[83]){
        p2 += 5;
    }

    ball.x += ball.speedX;
    ball.y += ball.speedY;

 if(ball.x < 20 || ball.x > (ca.width - 30)) {
    if(ball.y > p1 && ball.y < p1 + 80 && ball.speedX < 0) {
    ball.speedX = -ball.speedX;
    ball.speedY = (ball.y - p1 -40) * 0.1;
    } 

    if(ball.y > p2 && ball.y < p2 + 80 && ball.speedX > 0) {
    ball.speedX = -ball.speedX;
    ball.speedY = (ball.y - p2 -40) * 0.1;
    } 
}

 if(ball.y < 0 || ball.y > (ca.height - 10)) {
    ball.speedY = -ball.speedY
}

 if(ball.x < 0 || ball.x > (ca.height - 10)) {
        setTimeout(start, 2000);

}

function draw() {
    ctx.fillStyle="black";
ctx.fillRect(0,0,ca.width, ca.height);  
    ctx.fillStyle="white";
   requestAnimationFrame(drwa);
ctx.fillRect(10, p1, 10,80);

ctx.fillRect(ca- 20, p2, 10,80);

   ctx.fillRect(ball.x, ball.y, 10, 10);
}

}
</script>
<body>
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/68334863/uncaught-reference-error-draw-is-not-defined-pls-help-me

2条答案

按热度按时间

vjhs03f71#

您定义了 draw 内部功能 loop 功能，因此无法在外部访问 loop 功能。
如果您使用像这样的在线javascript beautifier或prettier（它可以与诸如vs代码之类的IDE集成）工具来自动修复代码中的缩进，这将更加明显。

赞(0）回复(0）举报 2021-09-13

nvbavucw2#

唯一的原因是你不能输入xd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pong</title>
</head>
<canvas id="ca" width="720" height="480"></canvas>

<script>
    let ctx = ca.getContext("2d"); 
    let p1 = p2 = 80;
    let key = {};
    let ball = {};
    start();
    setInterval(loop, 1000/60);
    document.addEventListener("keydown", e => key[e.keyCode] = true);
    document.addEventListener("keyup", e => key[e.keyCode] = false);
    draw();

    function start(){
        ball = {
            x: ca.width / 20,
            y: ca.height / 2,
            speedX: 3,
            speedY: 0
        };
    }

    function loop(){
        if(key[38]){
            p2 -= 5;
        }

        if(key[40]){
            p2 += 5;
        }

        if(key[87]){
            p1 -= 5;
        }

        if(key[83]){
            p1 += 5;
        }

        ball.x += ball.speedX;
        ball.y += ball.speedY;

        if(ball.x < 20 || ball.x > (ca.width - 30)) {
            if(ball.y > p1 && ball.y < p1 + 80 && ball.speedX < 0) {
            ball.speedX = -ball.speedX;
            ball.speedY = (ball.y - p1 -40) * 0.1;
            } 

            if(ball.y > p2 && ball.y < p2 + 80 && ball.speedX > 0) {
            ball.speedX = -ball.speedX;
            ball.speedY = (ball.y - p2 -40) * 0.1;
            } 
        }

        if(ball.y < 0 || ball.y > (ca.height - 10)) {
            ball.speedY = -ball.speedY
        }

        if(ball.x < 0 || ball.x > (ca.width - 10)) {
            setTimeout(start, 2000);
        }
    }

    function draw() {
        ctx.fillStyle="black";
        ctx.fillRect(0,0,ca.width, ca.height);  
        ctx.fillStyle="white";
        requestAnimationFrame(draw);
        ctx.fillRect(10, p1, 10,80);

        ctx.fillRect(ca.width - 20, p2, 10,80);

        ctx.fillRect(ball.x, ball.y, 10, 10);
    }
</script>
<body>
</body>
</html>

出现错误：
第12行：2->2d
第18行：kedown->keydown
第19行：kedown->keyup
第31行：循环函数在文件末尾关闭（这就是为什么会出现未捕获引用错误的原因：未定义绘图）
第41行和第44行：p2->p1
第67行：ca.height->ca.width
第76行：drwa->绘图
第79行：ca->ca.width

赞(0）回复(0）举报 2021-09-13

我来回答

未捕获引用错误：未定义绘图-请帮助我

2条答案

相关问题

热门标签

最新问答