Question

我正在基于W3schools的示例制作Canvas游戏。目前，我已将其设置为每100帧产生一个障碍。我要这样做，以便在游戏中达到一定数量的帧（例如500）时，障碍将改为每50帧生成一次。我尝试了几种不同的方法，但目前都已将其注释掉，但都无济于事。我无法弄清楚如何在到达x帧数量时如何识别代码，或者如何减少每个障碍物生成之间的帧数量。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: white;
}
</style>
</head>
<body onload="startGame()">
    <script>

    let myGamePiece;
    let myObstacles = [];
    let myScore;
    let topOrBottom = 0;

    function startGame() {
        myGamePiece = new component(20, 20, "blue", 10, 380);
        myScore = new component("20px", "Arial", "black", 280, 40, "text")
        myGameArea.start();
    }

    let myGameArea = {
        canvas : document.createElement("canvas"),
        start : function() {
            this.canvas.width = 600;
            this.canvas.height = 400;
            this.context = this.canvas.getContext("2d");
            document.body.insertBefore(this.canvas, document.body.childNodes[0]);
            this.frameNo = 0;
            this.interval = setInterval(updateGameArea, 20);
            },
        clear : function() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
    }

    function component(width, height, color, x, y, type) {
        this.type = type;
        this.score = 0;
        this.width = width;
        this.height = height;   
        this.x = x;
        this.y = y;
        this.update = function() {
            ctx = myGameArea.context;
            if (this.type == "text") {
                ctx.font = this.width + " " + this.height;
                ctx.fillStyle = color;
                ctx.fillText(this.text, this.x, this.y);
            } else {
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }
        this.newPos = function() {
            if ((this.y+this.height) == myGameArea.canvas.height) {
                this.y = 0;
            } else if (this.y == 0) {
                this.y = myGameArea.canvas.height - this.height;
            }

        }
        this.crashWith = function(otherobj) {
            let myleft = this.x;
            let myright = this.x + (this.width);
            let mytop = this.y;
            let mybottom = this.y + (this.height);
            let otherleft = otherobj.x;
            let otherright = otherobj.x + (otherobj.width);        
            let othertop = otherobj.y;       
            let otherbottom = otherobj.y + (otherobj.height);
            let crash = true;  
            if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {        
                crash = false;        
            }
            return crash;
        }
    }

    function updateGameArea() {
        let x, y, height, topOrBottom, distance, minHeight, maxHeight, minDistance, maxDistance;
        for (i= 0; i < myObstacles.length; i += 1) {
            if (myGamePiece.crashWith(myObstacles[i])) {
                stopButton();
                return;
            }
        }

        myGameArea.clear();
        myGameArea.frameNo += 1;
        if (myGameArea.frameNo == 1 || everyinterval(100)) {
            x = myGameArea.canvas.width;
            y = myGameArea.canvas.height;
            topOrBottom = Math.floor(Math.random() * 2) + 1;
            minDistance = 200;
            maxDistance = 300;
            distance = Math.floor(Math.random()*(maxDistance-minDistance+1)+minDistance);

            if (topOrBottom == 1) {
                myObstacles.push(new component(10, 30, "orange", x, 0));
            } else if (topOrBottom == 2) {
                myObstacles.push(new component(10, 30, "orange", x, myGameArea.canvas.height-30));
            }
        }



        for (i = 0; i < myObstacles.length; i += 1) {
            myObstacles[i].x += -10;
            myObstacles[i].update();
        }

        myScore.text="SCORE: " + myGameArea.frameNo;
        myScore.update();
        myGamePiece.update();

    }

    function everyinterval(n) {
        if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
        return false;
    }

    /*if (myGameArea.frameNo > 300) {
        (myGameArea.frameNo / n) % 0.5 == 0;
    }*/

    function restart() {
        document.location.href = "";
    }

    function stopButton() {
        let button = document.getElementById("switch");
        button.disabled = true;
    }

    function speedUp() {
        //(myGameArea.frameNo / n) % 0.5 == 0;
        myGameArea.n = 0.5;
    }

    /*if (myGameArea.frameNo > 300) {
        speedUp();
    }*/

</script>
<br>
<button id="switch" onmousedown="myGamePiece.newPos()" onmouseup="speedUp()">SWITCH</button>
<button onmousedown="restart()">RESTART</button>

Answer 1

该步骤在if中定义，并且每个步骤将重复periodForEachStep次

var currentObjectFramesSpawnPeriod = 100 
var periodForEachStep = 10;
var currentPeriodStep = 0;
var frames = 0;

然后将您的if语句更新为

frames++;
if (frames == currentObjectFramesSpawnPeriod){...}

，然后在其中，如果最后需要检查是否需要更新currentObjectFramesSpawnPeriod或currentPeriodStep，就像这样：

frames = 0;
if(currentObjectFramesSpawnPeriod == 100){
    if(currentPeriodStep < periodForEachStep) currentPeriodStep++;
    else{ 
       currentObjectFramesSpawnPeriod = 50;
       currentPeriodStep = 0;
   }
}
else if(currentObjectFramesSpawnPeriod<30&& currentObjectFramesSpawnPeriod>6){
    if(currentPeriodStep < periodForEachStep) currentPeriodStep++;
    else{ 
       currentObjectFramesSpawnPeriod-=5;
       currentPeriodStep = 0;
   }
}
else {
    if(currentPeriodStep < periodForEachStep) currentPeriodStep++;
    else{ 
       currentObjectFramesSpawnPeriod -=10;
       currentPeriodStep = 0;
   }
}

试图增加画布游戏中障碍物的生成率

1 个答案: