Javascript 碰撞不起作用

Question

我做了一个像flappybird这样的游戏。但这里鸟/球的位置是由鼠标位置控制的。因此，当墙壁与球碰撞时，球会向后推。如果在球因墙壁碰撞而向后移动时移动鼠标，则球会穿过墙壁。

var context;
var screenWidth;
var screenHeight;
var ball;
var wall = [];
var gameStatus;
var mouseX;
var mouseY;
var gameOver;
var running = false;
var raf;
var restartButton
var test_interval1;
var restartButton;
var score = 0;
var play;
var scoreBoard;
var score2;
var collision = false;
var n = 1500;


start();

function start() {
    gameIntialize();
    gameDraw();
    gameLoop();
    gameOver.style.visibility = "hidden";
}

function Ball() {
    this.radius = 16;
    this.x = 25;
    this.y = screenHeight / 2;
    this.ballDraw = function() {
        context.beginPath();
        context.arc(this.x, this.y, 16, 0, 2 * Math.PI);
        context.fillStyle = 'green';
        context.fill();
    }
};


function Wall() {
    this.thickness = 10;
    this.wallPositionY = screenHeight;
    this.wallPositionX = screenWidth;
    this.spacing = 0;

    if (this.wallPositionY > 400 && this.wallPositionY <= 500) {
        this.spacing = Math.floor(Math.random() * (100 - 50) + 50);
    } else if (this.wallPositionY > 500) {
        this.spacing = Math.floor(Math.random() * (200 - 100) + 100);
    } else {
        this.spacing = 45;
    }

    this.heightFromTheTop = Math.floor(Math.random() * (this.wallPositionY / 6 - 3 / 4 * this.wallPositionY) + 3 / 4 * this.wallPositionY);
    this.heightFromTheBottom = this.wallPositionY - (this.heightFromTheTop + this.spacing);
    this.speed = 6;



    this.draw = function() {

        context.fillStyle = 'yellow';
        context.fillRect(this.wallPositionX, 0, this.thickness, this.heightFromTheTop);
        context.fillRect(this.wallPositionX, this.wallPositionY - this.heightFromTheBottom, this.thickness, this.heightFromTheBottom);
    }

    this.update = function() {
        this.wallPositionX = this.wallPositionX - this.speed;
    }

    this.offscreen = function() {
        if (this.wallPositionX < -this.thickness) {
            return true;
        } else {
            return false;
        }
    }
    this.check = function(ball) {
        if (ball.x + ball.radius > this.wallPositionX && ball.x - ball.radius < this.wallPositionX + this.thickness) {
            if (ball.y - ball.radius < this.heightFromTheTop || ball.y + ball.radius > this.heightFromTheTop + this.spacing) {
                return true;
            }
        }

    }
};


function gameIntialize() {
    var canvass = document.getElementById('canvas');

    context = canvas.getContext('2d');
    gameOver = document.getElementById('gameOver')
    restartButton = document.getElementById('restartButton');
    play = document.getElementById('play');
    scoreboard = document.getElementById('scoreboard');
    score2 = document.getElementById('score2');



    play.style.visibility = "visible";

    screenWidth = window.innerWidth;
    screenHeight = window.innerHeight;


    canvas.width = screenWidth;
    canvas.height = screenHeight;

    ball = new Ball();
    wall.push(new Wall());

    drawScoreBoard();

    restartButton.addEventListener("click", reset);
    window.addEventListener('resize', resizeScreen, false);

    canvas.addEventListener('mousemove', function(e) {
        if (!running) {
            var xpos = e.clientX;
            var ypos = e.clientY;
            if (xpos >= screenWidth / 4) {
                ball.x = screenWidth / 4;
                ball.y = ypos;
        
            } else {
                {
                    ball.x = xpos;
                    ball.y = ypos;
                }
            }

        }
    });


}

function gameDraw() {
    context.fillStyle = "#aaaaaa";
    context.fillRect(0, 0, screenWidth, screenHeight);

    ball.ballDraw();

    for (var i = wall.length - 1; i >= 0; i--) {

        wall[i].draw();
        wall[i].update();

        if (wall[i].offscreen()) {
            wall.splice(i, 1);
        }
        if (wall[i].check(ball)) {
         
          ball.x = wall[i].wallPositionX - ball.radius;

        }
    }


    raf = window.requestAnimationFrame(gameDraw);
}

function gameLoop() {
    test_interval1 = setInterval(function() {
        wall.push(new Wall());
    }, n);
    t = setInterval(function() {
        score++;
        drawScoreBoard();
    }, 1000);
}


function resizeScreen() {
    var newGameScreenWidth;
    var newGameScreenHeight;

    newGameScreenWidth = window.innerWidth;
    newGameScreenHeight = window.innerHeight;

    screenWidth = newGameScreenWidth;
    screenHeight = newGameScreenHeight;

    canvas.width = screenWidth;
    canvas.height = screenHeight;

    gameDraw();
}

function reset() {
    score = 0;
    start();
}

function gameOverR() {
    gameOver.style.visibility = "visible";
    play.style.visibility = "hidden";

    score2.innerHTML = "Score : " + score;

    gameOver.style.top = (screenHeight / 2) - 140 + "px";
    gameOver.style.left = (screenWidth / 2) - 160 + "px";

    clearInterval(test_interval1);
    clearInterval(t);

    while (wall.length >= 1) {
        wall.pop();
    }
}

function drawScoreBoard() {
    scoreboard.innerHTML = "Score : " + score;
}

body{
  margin : 0px
}
#gameOver,#play{
  position: absolute;
  visibility: hidden;
}
h1,h2,h3{
  font-family: 'Permanent Marker', cursive;
  color: white;
  text-align: center;
}
.title{
  font-size: 60px;
  margin-bottom: 0px;
}
#restartButton{
  border: 2px solid white;
  border-radius: 10px;
}
#restartButton:hover{
  background-color: blue;
}
#scoreboard{
  margin: 0px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>game-run</title>
    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <section id="play">
        <h2 id="scoreboard"></h2>
    </section>
    <section id="gameOver">
        <h1 class="title">Game Over!</h1>
        <h2 id="score2"></h2>
        <h3 id="restartButton">Restart?</h3>
    </section>
    <canvas id="canvas"></canvas>

</body>
<script src="game.js"></script>


</html>

我应该如何纠正这个错误？如有任何帮助，我们将不胜感激。

Answer 1

查看您的 mousemove 事件监听器。 Onmousemove 会设置:ball.x = xpos;ball.y = ypos; 而不检查碰撞。您需要对其进行编辑，以便球仅在不与任何物体碰撞时才移动到鼠标位置。我会将实际的编程工作留给您，但如果您需要任何其他说明，请随时询问。