Javascript Collision is not working

I have made a game like flappy bird . But here the bird/ball position is controlled by the mouse position.so when the wall collides with ball the ball is pushed backward .if the mouse is moved while the ball is moving backward due to wall collision the ball passes through the wall.

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>

how should i rectify this error ? any help is appreciated.