Question

所以我为我的一个项目制作了这个Pong for Canvas游戏但我似乎无法让它在第一帧之后继续。有人可以帮助我让这个游戏在第一帧之后继续工作吗？ HTML First然后JS。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Connor's COMP-106 Pong</title>

    <script src="js/CCAdventure-Example.js"></script>
</head>
<canvas id="gc" width="640" Height="480"></canvas>

p1y=p2y=40;
        pt=10;
        ph=100;
        bx=by=50;
        bd=6;
        xv=yv=4;
        score1=score2=0;
        ais=2;
        window.onload=function(){
            c=document.getElementById('gc');
            cc=c.getContext('2d');
            setInterval(update,1000/30);

        }
    function reset(){
        bx=c.width/2;
        by=c.height/2;
        xv=-xv;
        yv=3;
    }
    function update(){
        bx+=xv;
        by+=yv;
        if(by<0 && yv<0){
            yv=-yv;
        }
        if(by>c.height && yv>0){
            yv=-yv;
        }
        if(bx<0){
            if(by>p1y && by<p1y+ph){
                xv=-xv;
                dy=by-(p1y+ph/2);
                yv = dy*0.3;
            } else{
                score2++;
                reset();
            }
        }
        if(bx>c.width){
            if(by>p2y && by<p2y+ph){
                xv=-xv;
                dy=by-(p2y+ph/2);
                yv = dy*0.3;
            } else{
                score1++;
                reset();
            }
        }
        if(p2y+ph/2<by){
            p2y+=ais;
        } else{
            p2y-=ais;
        }


        cc.fillstyle='black';
        cc.fillRect(0,0,c.width,c.height);
        cc.fillStyle='white';
        cc.fillRect(0,p1y,pt,ph);
        cc.fillRect(c.width-pt,p2y,pt,ph);
        cc.fillRect(bx-bd/2,by-bd/2,bd,bd);
        cc.fillText(score1,100,100);
        cc.fillText(score2,c.width-100,100);
    }

Answer 1

如果您在reset或update内的代码中添加日志记录，则可以看到代码仍在绘制（并获胜）。

您没有看到任何更新的原因是您的拼写错误为cc.fillstyle='black';而不是cc.fillStyle='black';，这会阻止您看到“白色”划桨，球和得分。

Working JSFiddle

（我改变了几个变量名来跟踪发生了什么）

PS。我不确定性能是否明显，如果它有很大的不同，但我喜欢在再次绘制形状之前使用.clearRect()，以便我知道我正在使用空白画布。

Answer 2

您的设置间隔是正常的，但每次迭代都会创建黑色cc.fillRect（0,0，c.width，c.height），这是前面的白色图纸。你应该在setInterval之前移动cc.fillRect（0,0，c.width，c.height）并只绘制一次。

var c,cc;
p1y=p2y=40;
        pt=10;
        ph=100;
        bx=by=50;
        bd=6;
        xv=yv=4;
        score1=score2=0;
        ais=2;
        window.onload=function(){
            c=document.getElementById('gc');
            cc=c.getContext('2d');
			cc.fillstyle='black';
			cc.fillRect(0,0,c.width,c.height);
            setInterval(update,1000/30);

        };
    function reset(){
        bx=c.width/2;
        by=c.height/2;
        xv=-xv;
        yv=3;
    }
    function update(){
        bx+=xv;
        by+=yv;
        if(by<0 && yv<0){
            yv=-yv;
        }
        if(by>c.height && yv>0){
            yv=-yv;
        }
        if(bx<0){
            if(by>p1y && by<p1y+ph){
                xv=-xv;
                dy=by-(p1y+ph/2);
                yv = dy*0.3;
            } else{
                score2++;
                reset();
            }
        }
        if(bx>c.width){
            if(by>p2y && by<p2y+ph){
                xv=-xv;
                dy=by-(p2y+ph/2);
                yv = dy*0.3;
            } else{
                score1++;
                reset();
            }
        }
        if(p2y+ph/2<by){
            p2y+=ais;
        } else{
            p2y-=ais;
        }



        cc.fillStyle='white';
        cc.fillRect(0,p1y,pt,ph);
        cc.fillRect(c.width-pt,p2y,pt,ph);
        cc.fillRect(bx-bd/2,by-bd/2,bd,bd);
        cc.fillText(score1,100,100);
        cc.fillText(score2,c.width-100,100);
    }

<canvas id="gc" width="640" Height="480"></canvas>

帆布游戏，如何保持清爽

2 个答案: