未捕获的类型错误：无法读取未定义的属性“show”

如何解决未捕获的类型错误：无法读取未定义的属性“show”

我正在使用 Java Script 制作一个简单的砖块破坏游戏，并且我的控制台在将块显示到画布上时向我显示错误，它们正在被绘制到画布上，但所有其他对象都不起作用并且控制台正在显示

index.js:173 未捕获的类型错误：无法读取未定义的属性“show” 更新时 (index.js:173) 在 index.js:177

如果从第 172 行和第 173 行注释掉，这是一个 for 循环，它告诉画布在其上绘制它们 一切正常。

还有一点：canvasRendering...rundedRectangle 是一个绘制圆角矩形的函数 有人请找到解决方案！

CanvasRenderingContext2D.prototype.roundedRectangle = function(x,y,width,height,rounded) {
    const radiansInCircle = 2 * Math.PI
    const halfradians = (2 * Math.PI)/2
    const quarterradians = (2 * Math.PI)/4  
    
    // top left arc
    this.arc(rounded + x,rounded + y,rounded,-quarterradians,halfradians,true)
    
    // line from top left to bottom left
    this.lineto(x,y + height - rounded)
  
    // bottom left arc  
    this.arc(rounded + x,height - rounded + y,quarterradians,true)  
    
    // line from bottom left to bottom right
    this.lineto(x + width - rounded,y + height)
  
    // bottom right arc
    this.arc(x + width - rounded,y + height - rounded,true)  
    
    // line from bottom right to top right
    this.lineto(x + width,y + rounded)  
  
    // top right arc
    this.arc(x + width - rounded,y + rounded,true)  
    
    // line from top right to top left
    this.lineto(x + rounded,y)  
}

var canvas= document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");

function Player(x,w,h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.show = function(){
        ctx.beginPath();
        ctx.rect(this.x,this.y,this.w,this.h);
        ctx.fillStyle = "#ffff";
        ctx.fill();
        ctx.closePath();
    }
    this.move = function(speed){
        this.x += speed;
    }
}

function Ball(x,r){
    this.x = x;
    this.y = y;
    this.r = r;
    this.show = function(){
        ctx.beginPath();
        ctx.arc(this.x,this.r,2* Math.PI);
        ctx.fillStyle = "tomato";
        ctx.fill();
        ctx.closePath();
    }
    this.move= function(speedX,speedY){
        this.show();
        this.speed = 2;
        this.x += speedX;
        this.y += speedY;
    }

}

function Block(x,h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.show= function(color){
        ctx.beginPath();
        ctx.roundedRectangle(this.x,this.h,7);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.closePath();
    };
};

var player = new Player(canvas.width/2-50,canvas.height*0.95,100,20);
var ball = new Ball(canvas.width/2-5,player.y-20,15);
var rigthpressed = false;
var leftpressed = false;

var blocks = [];
var rowCount = 5;
var columnCount = 6;
var noInRow = 6;
var blockCount = (rowCount*columnCount)+1;
var blockRow = 0;
var blockCol = 0;

var ballSpeedX = 5;
var ballSpeedY = -10;
for(let i = 1; i < blockCount; i++){
    blocks.push(new Block(blockCol*60+25,blockRow*60+30,50,50)); 
    blockCoL++;
    if(i % noInRow == 0){
        blockRow++;
        blockCol = 0;
    }
}


window.addEventListener("keydown",function(e){
    if(e.keyCode == 39){
        rigthpressed = true;
    }
    if(e.keyCode == 37){
        leftpressed = true;
    }
});
window.addEventListener("keyup",function(e){
    if(e.keyCode == 39){
        rigthpressed = false;
    }
    if(e.keyCode == 37){
        leftpressed = false;
    }
});

function objMovement(){
    if(rigthpressed){
        player.move(5);
        if (player.x > canvas.width-player.w){
            player.x = canvas.width-player.w;
        }
    }
    if(leftpressed){
        player.move(-5);
        if(player.x < 0){
            player.x = 0;
        }
    }

    if(ball.x > canvas.width-ball.r || ball.x < 0+ball.r){
        ballSpeedX = -ballSpeedX;
    }
    if (ball.y > canvas.height-ball.r || ball.y < 0+ball.r){
        ballSpeedY = -ballSpeedY;
    }
    if(ball.x<player.x+player.w &&ball.x>player.x && ball.y>player.y){
        ballSpeedY = -ballSpeedY;
        ballSpeedX= ballSpeedX;
    }
    function Bump(){
        if (ball.x>player.x && ball.x<player.x+player.w/2){
            if (ball.y >= player.y){
                ballSpeedX = -5;
            }
        }
        if(ball.x>player.x+player.w/2 && ball.x<player.x+player.w){
            if(ball.y >= player.y){
                ballSpeedX = 5;
            }
        }
    }   
    //Bump();
}

function update(){
    ctx.clearRect(0,canvas.width,canvas.height);
    ball.show();
    ball.move(ballSpeedX,ballSpeedY);
    player.show();
    objMovement();
    for(let i=0;i<blockCount;i++){
        blocks[i].show("violet");    
    }
    window.requestAnimationFrame(update);
}
update();

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>????</title>
    <style>
        #body{
            background-color: rgb(31,30,30);
        }
        #gameCanvas{
            border: 15px solid rgb(44,44,44);
            border-radius: 20px;
            background-color:rgb(19,18,18);
            margin: 250px;
        }
    </style>
</head>
<body id="body">
    <canvas id="gameCanvas" width=400 height=800></canvas>
    <script type="text/javascript" src="./index.js"></script>
    
</body>
</html>

解决方法

当您创建 blocks 时，您从 1 开始

for (let i = 1; i < blockCount; i++) {
    blocks.push(new Block(blockCol * 60 + 25,blockRow * 60 + 30,50,50));
    ...

所以当您更新时，您需要考虑

function update() {
    ctx.clearRect(0,canvas.width,canvas.height);
    ball.show();
    ball.move(ballSpeedX,ballSpeedY);
    player.show();
    objMovement();
    for (let i = 0; i < blockCount -1; i++) { // or for (let i = 0; i < blocks.length; i++) {
        blocks[i].show("violet");
    }
    window.requestAnimationFrame(update);
}