Javascript 如何修复画布以在页面上显示？_Javascript_Html

Javascript 如何修复画布以在页面上显示？

javascript html

Javascript 如何修复画布以在页面上显示？,javascript,html,Javascript,Html,第一次尝试构建html5乒乓游戏。我似乎无法让canvas显示下面的代码。除此之外，球拍和球也没有显示出来。我似乎不知道我在下面哪里出错了。任何帮助都会很好 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Pong</title> </head> <body> <script> var

第一次尝试构建html5乒乓游戏。我似乎无法让canvas显示下面的代码。除此之外，球拍和球也没有显示出来。我似乎不知道我在下面哪里出错了。任何帮助都会很好

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Pong</title>
</head>

<body>
<script>

var WIDTH=700, HEIGHT=600, pi=Math.PI;
var UpArrow=38
var canvas, ctx, keystate;
var player, ai,ball;

player={
    x:null,
    y:null,
    width:20,
    height:100,

    update:function(){
        if (keystate[UpArrow]) this.y -=7;
        if (keystate[DownArrow]) this.y +=7;

        },
    draw: function(){
        ctx.fillRect(this.x,this.y,this.width,this.height);

        }
    };
ai={
    x:null,
    y:null,
    width:20,
    height:100,

    update:function(){},
    draw: function(){
        ctx.fillRect(this.x,this.y,this.width,this.height);

        }
        };
ball={
    x:null,
    y:null,
    vel:null,
    side:20,
    speed:5,

    update:function(){
        this.x += this.vel.x;
        this.y += this.vel.y;

        if(0>this.y || this.y+this.side> HEIGHT){
            this.vel.y ++-1;
        }

        },
    draw: function(){
        ctx.fillRect(this.x,this.y,this.side,this.side);

        }
        };




function main(){
    canvas = document.createElement("canvas");
    canvas.width = WIDTH;
    canvas.width = HEIGHT;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

    keystate = {};
    document.addEventListener("keydown", function(evt){
        keystate[evt.keyCode];
    });
    document.addEventListener("keyup", function(evt){
    delete keystate[evt.keyCode];
    });

    init();

    var loop = function(){
        update();
        draw();
        window.requestAnimationFrame(loop, canvas);
    };
    window.requestAnimationFrame(loop, canvas);
    }

function init(){
    player.x = player.width;
    player.y = (HEIGHT - player.height)/2;

    ai.x = WIDTH - (player.width + ai.width);
    ai.y = (HEIGHT -ai.height)/2;

    ball.x = (WIDTH - ball.side)/2;
    ball.y = (HEIGHT - ball.side)/2;

    }

function update(){
    ball.update();
    player.update();
    ai.update();

    }

function draw(){
    ctx.fillRect(0,0,WIDTH,HEIGHT);
    ctx.save();
    ctx.fillStyle = "#fff";

    ball.draw();
    player.draw();
    ai.draw();

    var w=4;
    var x = (WIDTH-w)*0.5;
    var y = 0;
    var step = HEIGHT/15;
    while(y < HEIGHT){
        ctx.fillRect(x, y+step*0.25, w, Step*0.5);
        y +=step;   
    }

    ctx.restore();

    }

main();
</script>
</body>
</html>


庞
变量宽度=700，高度=600，pi=Math.pi；
var向上箭头=38
var画布、ctx、keystate；
球员，ai，球；
玩家={
x:null，
y:空，
宽度：20，
身高：100，
更新：函数（）{
如果（键状态[向上箭头]）此.y-=7；
如果（键状态[向下箭头]）此.y+=7；
},
绘图：函数（）{
ctx.fillRect（this.x，this.y，this.width，this.height）；
}
};
哎={
x:null，
y:空，
宽度：20，
身高：100，
更新：函数（）{}，
绘图：函数（）{
ctx.fillRect（this.x，this.y，this.width，this.height）；
}
};
球={
x:null，
y:空，
vel:null，
方:20,，
速度:5,，
更新：函数（）{
this.x+=this.vel.x；
this.y+=this.vel.y；
如果（0>this.y | | this.y+this.side>HEIGHT）{
这个.vel.y++-1；
}
},
绘图：函数（）{
ctx.fillRect（this.x，this.y，this.side，this.side）；
}
};
函数main（）{
canvas=document.createElement（“canvas”）；
画布宽度=宽度；
画布宽度=高度；
ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
keystate={}；
文件.添加的EventListener（“向下键控”，功能（evt）{
键状态[evt.keyCode]；
});
文件.附录列表（“键控”，功能（evt）{
删除keystate[evt.keyCode]；
});
init（）；
var循环=函数（）{
更新（）；
draw（）；
requestAnimationFrame（循环，画布）；
};
requestAnimationFrame（循环，画布）；
}
函数init（）{
player.x=player.width；
player.y=（高度-player.HEIGHT）/2；
ai.x=宽度-（player.WIDTH+ai.WIDTH）；
ai.y=（高度-ai.HEIGHT）/2；
ball.x=（宽度-球侧）/2；
ball.y=（高度-球侧）/2；
}
函数更新（）{
更新（）；
player.update（）；
ai.update（）；
}
函数绘图（）{
ctx.fillRect（0,0，宽度，高度）；
ctx.save（）；
ctx.fillStyle=“#fff”；
ball.draw（）；
player.draw（）；
ai.draw（）；
var w=4；
var x=（宽度-w）*0.5；
var y=0；
var阶跃=高度/15；
while（y<高度）{
ctx.fillRect（x，y+步长*0.25，w，步长*0.5）；
y+=阶跃；
}
ctx.restore（）；
}
main（）；

```
this.vel.y++-1什么
```


keystate[evt.keyCode]应该是keystate[evt.keyCode]=true

您正在尝试访问未定义的属性：this.x+=this.vel.x您以前在哪里定义了vel.x

player
方法，keystate[UpArrow]
。。。您在哪里定义了UpArrow
变量
看看你的main（）
函数：document.addEventListener（“keydown”，function（evt）{
，然后设置keystate[evt.keyCode]；
你知道这是从evt.keyCode
返回的吗？显然不是向上和向下

在draw（）
函数中，您同时使用Step
和Step
变量。其中一个变量显然是未定义的
。决定要使用哪一个
window.requestAnimationFrame（循环，画布）；
？画布在这里做什么


如果您遵循以上步骤，您最终应该得到：
感谢您的帮助。我能够通过以下在线示例看到我的所有错误。第一次编写javascript和html5。