个人中心
gpt4 book ai didi

javascript - 随着帧数的增加尝试创建多个障碍物

转载 作者：行者123 更新时间：2023-12-01 02:48:43 25 4
gpt4 key购买 nike

我正在尝试复制 w3 学校的游戏教程。到目前为止，一切都很成功，直到我必须通过将其定义为数组并每 150 个间隔调用 .push() 函数来创建多个障碍。

当我尝试使用这个确切的 Javascript 代码运行游戏时，它不断在我的控制台中返回错误:

pbf.js:108 Uncaught TypeError: pbfObstacle.push is not a function at updateGameArea (pbf.js:108)

我想知道是否有人可以帮助我解决这个问题，这样它就不会返回控制台错误，而是会按预期创建多个障碍。任何帮助深表感谢。谢谢。

这是我的 JavaScript:

// This will declare the variables to create the canvas on the <body>
var gameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.style.width = "1920px";
        this.canvas.style.height = "auto";
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        // creating frames that we can use to count
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
            window.addEventListener('keydown', function(e) {
                gameArea.keys = (gameArea.keys || []);
                gameArea.keys[e.keyCode] = true;
            })
            window.addEventListener('keyup', function(e) {
                gameArea.keys[e.keyCode] = false;
            })
        },
        clear : function() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        },
        // this will clear the interval when one component crashes another
        stop : function() {
            clearInterval(this.interval);
        }
    }

// This will make the game piece
var pbfGamePiece;

function component (width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.color = color;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = gameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
    }
    // this will check if one component crashes another
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || 
                (mytop > otherbottom) ||
                (myright < otherleft) ||
                (myleft > otherright)) {
                    crash = false;
                }
                return crash;
    }
}
// This will create the pbfObstacle into an array
var pbfObstacle = [];

// This loads the function tagged on the <body>
function startGame() {
    gameArea.start();
    pbfGamePiece = new component(8, 15, "#3baffc", 15, 115);
    pbfObstacle = new component(3, 50, "#ff4000", 95, 100);
}


// This clears and updates the game area while also adding multiple obstacles
function updateGameArea() {
    var x, y;
    for (i = 0; i < pbfObstacle.length; i += 1) {
        if (pbfGamePiece.crashWith(pbfObstacle[i])) {
            gameArea.stop();
            return;
        } 
    }
    gameArea.clear();
    gameArea.frameNo += 1;
    if (gameArea.frameNo == 1 || everyinterval(150)) {
        x = gameArea.canvas.width;
        y = gameArea.canvas.height - 200;
        pbfObstacle.push(new component(10, 200, "green", x, y));
    }
    for (i = 0; i < pbfObstacle.length; i += 1) {
        pbfObstacle[i].x += -1;
        pbfObstacle[i].update();
    }
    pbfGamePiece.newPos();    
    pbfGamePiece.update();
}

// This function returns every true interval
function everyinterval(n) {
    if((gameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

// These functions will allow the buttons to create movement of the objects

function moveup() {
    pbfGamePiece.speedY -= 1;
}

function movedown() {
    pbfGamePiece.speedY += 1;
}

function moveleft() {
    pbfGamePiece.speedX -= 1;
}

function moveright() {
    pbfGamePiece.speedX += 1;
}

// This will stop the game pieces animation from not stopping

function stopMove() {
    pbfGamePiece.speedX = 0;
    pbfGamePiece.speedY = 0;
}

HTML 非常简单:

<body onload="startGame()">
....
</body>

最佳答案 

function startGame() {
  gameArea.start();
  pbfGamePiece = new component(8, 15, "#3baffc", 15, 115);
  pbfObstacle.push(new component(3, 50, "#ff4000", 95, 100));
}

在 startGame() 中，您将新组件分配给 pbfObstacle。所以它显示错误。推送新组件它就会工作。

关于javascript - 随着帧数的增加尝试创建多个障碍物，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47109275/

25 4 0
文章推荐： javascript - 让 var 根据 if 语句返回特定值
文章推荐： jquery - 切换div内div的可见性
文章推荐： jquery - 将 javascript 函数应用于可拖动副本
文章推荐： javascript - d3 折线图的鼠标悬停功能未执行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com