Question

我使用Javascript创建了一个游戏。在这种游戏中，可以用鼠标控制的圆圈必须通过类似于迷宫的移动障碍物来导航。当圆碰到障碍物时，游戏应停止。

当我尝试相同的游戏但有一个障碍时，它起作用了。但是在添加更多行代码以创建更多障碍后，圆和障碍不会出现在输出中。此外，当圆碰到障碍物时，不会调用crashWith函数。

代码如下：

<!DOCTYPE html>
<html>
<style>
    canvas {
        border:1px solid #000000;
        background-image: url("https://data.whicdn.com/images/223851992/large.jpg"); 
        }
</style>
<body onload="begin()">
<script>

    var gamePiece;
    var gameObstacle = [];
    function begin(){
        gameArea.start();
        gamePiece = new piece(10, "white", 20, 135);
    }
    var gameArea = {
        canvas : document.createElement("canvas"),
        start : function(){
            this.canvas.width = 480;
            this.canvas.height = 270;
            this.canvas.style.cursor= 'none';
            this.context = this.canvas.getContext("2d");
            document.body.insertBefore( this.canvas, document.body.childNodes[0]);
            this.frameNo = 0;
            this.interval = setInterval(updateGame , 10);  //for each frame 
            window.addEventListener('mousemove', function(n){
                gameArea.x = n.pageX;
                gameArea.y = n.pageY;
            });
        },
        clear : function(){
            this.context.clearRect(0,0, this.canvas.width, this.canvas.height);
        },
        stop : function(){
                clearInterval(this.interval);
        }
    }
    function eachInterval(e){
        if((gameArea.frameNo / e) % 1 == 0)
            return true;
        else
            return false;
    }

    //for circle
    function piece (radius, color, x, y){
        this.radius = radius;
        this.speedx = 0;
        this.speedy =0;
        this.x = x;
        this.y = y;
        this.update = function(){
            pieceContext = gameArea.context;
            pieceContext.beginPath();
            pieceContext.arc( this.x, this.y, this.radius, 0, 2 * Math.PI);
            pieceContext.fillStyle = color;
            pieceContext.fill();
        }
        this.newPlace = function(){
                this.x += this.speedx;
                this.y += this.speedy;
        }
    }

    //for obstacle
    function obstacle (width, height, color, x, y){
        this.width = width;
        this.height = height;
        this.speedx = 0;
        this.speedy =0;
        this.x = x;
        this.y = y;
        this.update = function(){
            obstacleContext = gameArea.context;
            obstacleContext.fillStyle = color;
            obstacleContext.fillRect(this.x, this.y, this.width, this.height);
           
        }
        this.newPlace = function(){
                this.x += this.speedx;
                this.y += this.speedy;
        }

        //check crash
        this.crashWith = function(gamePiece){
            var collide = true;
            
            var otherleft = this.x;
            var otherright = this.x + (this.width);
            var othertop = this.y;
            var otherbottom = this.y + (this.height);
            var circleBottom = gamePiece.y + (gamePiece.radius);
            var circleTop = gamePiece.y;
            var circleLeft = gamePiece.x;
            var circleRight = gamePiece.x + (gamePiece.radius);

            if ((circleBottom < othertop) || (circleTop > otherbottom) || (circleRight < otherleft) || (circleLeft > otherright)) {
                collide = false;
            }
        return collide;
        }
    }
    function updateGame(){
        var x,y;

        for(i=0 ; i<gameObstacle.length ; i++){
            if (gameObstacle[i].crashWith(gamePiece)){
            gameArea.stop();
            return;
            }
        }
        
        gameArea.clear();
        gameArea.frameNo +=1 ;
        if(gameArea.frameNo == 1 || eachInterval(150)){
            x = gameArea.canvas.width;
            y = gameArea.canvas.height - 200;
            gameObstacle.push(new obstacle(10, 200, "grey", x, y));
        }
        for(i=0 ; i<gameObstacle.length ; i++){
            gameObstacle[i].x -= 1;
            gameObstacle[i].update();
        }
        gameObstacle.x -= 1;
        //giving co ordinates of cursor to game piece
        gamePiece.x = gameArea.x;
        gamePiece.y = gameArea.y;
        gamePiece.update();
        gamePiece.newPlace();
    }
 
</script>

</body>
</html>

用障碍物通过障碍物移动圈的游戏不起作用

0 个答案: