MouseDown Event is not working on other computers

Question

I have a problem with a mousedown event that is so weird for me. I'm at intermediate level but I have a beginner problem.

I'm making a game in which a player can control a ball and there are some bricks with texts on them. The player must first shoot a word e.g (Ethiopia) and there is another brick with the same word. Then after shooting Ethiopia the player must shoot the other Ethiopia.

Code :

function dummyHttpRequest() {
  return `Iran
  Denmark
  Sweden
  Iraq
  Brazil
  Ethiopia
  England
  Finland
  Canada`;
}

var isindrag = false;
const canvas = document.getElementById("mycanvas");
const ctx = canvas.getContext("2d");
ctx.font = "12pt Arial";
ctx.fillStyle = "blue";
ctx.fillText("Mouse Speed : ", 0, 20);
var x = canvas.width / 2;
var y = canvas.height / 2;
var posbricks = [];
var times = 0;
var dx = 0;
var dy = 0;
var radius = 15;
var oldx = 0;
var oldy = 0;
var speed = 0;
var friction = 0.005;
//const XHRnames = new XMLHttpRequest();
//XHRnames.open("GET", "data.txt", false);
//XHRnames.send();
//var names = XHRnames.responseText.split("\n");
var names = dummyHttpRequest().split("\n");
var namesResults = [];
var numberOfSelected = [];
for (i in names) {
    numberOfSelected[i] = 0;
}
for (var i = 0; i < names.length * 2; i++) {
    randnumf();
}
function randnumf() {
    var randnum = Math.round(Math.random() * (names.length - 1));
    if (numberOfSelected[randnum] < 2) {
        namesResults[i + 3] = names[randnum];
        numberOfSelected[randnum]++;
    }
    else {
        randnumf();
    }
}
var whatitemshooted;
var isshooted = false;
var interval = setInterval(function () {
    times++;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.closePath();
    if (dx > 0) {
        dx -= friction;
    }
    else if (dx < 0) {
        dx += friction;
    }
    if (dy > 0) {
        dy -= friction;
    }
    else if (dy < 0) {
        dy += friction;
    }
    x += dx;
    y += dy;
    if (isindrag) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(oldx, oldy);
        ctx.stroke();
        ctx.closePath();
    }
    for (var i = 1; i <= 6; i++) {
        if (times == 1) {
            posbricks[i - 1] = [];
        }
        for (var j = 1; j <= 3; j++) {
            if (times == 1) {
                posbricks[i - 1][j - 1] = { x: (i - 1) * 100, y: (j - 1) * 70, text: namesResults[(i * 3) + j - 1] };
                //console.log(posbricks[i - 1][j - 1].text);
            }
            var fontsize = 20 - posbricks[i - 1][j - 1].text.length;
            ctx.font = fontsize + "pt Arial";
            ctx.fillStyle = "blue";
            ctx.fillRect(posbricks[i - 1][j - 1].x, posbricks[i - 1][j - 1].y, 70, 30);
            ctx.fillStyle = "yellow";
            ctx.fillText(posbricks[i - 1][j - 1].text, posbricks[i - 1][j - 1].x + 5, posbricks[i - 1][j - 1].y + 20);
            if (y - radius <= posbricks[i - 1][j - 1].y + 20 && y + radius >= posbricks[i - 1][j - 1].y && x + radius >= posbricks[i - 1][j - 1].x && x - radius <= posbricks[i - 1][j - 1].x + 40) {
                dx = -dx;
                dy = -dy;
                if (isshooted) {
                    var condition = whatitemshooted.x != posbricks[i - 1][j - 1].x || whatitemshooted.y != posbricks[i - 1][j - 1].y;
                }
                if (!isshooted) {
                    isshooted = true;
                    whatitemshooted = posbricks[i - 1][j - 1];
                }
                else {
                    if (posbricks[i - 1][j - 1].text == whatitemshooted.text && condition) {
                        ctx.clearRect(posbricks[i - 1][j - 1].x, posbricks[i - 1][j - 1].y, 110, 20);
                        posbricks[i - 1][j - 1].x = NaN;
                        posbricks[i - 1][j - 1].y = NaN;
                        ctx.clearRect(whatitemshooted.x, whatitemshooted.y, 110, 20);
                        whatitemshooted.x = NaN;
                        whatitemshooted.y = NaN;
                        isshooted = false;
                    }
                    whatitemshooted = null;
                }
            }
        }
    }
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
    checkCollision();
}, 10);
/*
    oldx = x;
    x = event.clientX;
    y = event.clientY;
    speed = Math.abs(x - oldx);
*/
function checkCollision() {
    if (x >= canvas.width - radius || x <= radius) {
        dx = -dx;
    }
    if (y >= canvas.height - radius || y <= radius) {
        dy = -dy;
    }
}
canvas.addEventListener("mousedown", function (event) {
    if (event.clientX >= x && event.clientX <= x + (radius * 2) && event.clientY >= y && event.clientY <= y + (radius * 2)) {
        dx = 0;
        dy = 0;
        isindrag = true;
        oldx = x;
        oldy = y;
    }
});
canvas.addEventListener("mousemove", function (event) {
    if (isindrag) {
        x = event.clientX;
        y = event.clientY;
    }
});
canvas.addEventListener("mouseup", function (event) {
    if (isindrag && event.clientX < canvas.width && event.clientY < canvas.height && event.clientX > 0 && event.clientY > 0) {
        isindrag = false;
        dx = -(x - oldx) / 30;
        dy = -(y - oldy) / 30;
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <canvas id="mycanvas" width="600" height="600"></canvas>
    <script src="index.js"></script>
</body>
</html>

In Data.txt :

Iran
Denmark
Sweden
Iraq
Brazil
Ethiopia
England
Finland
Canada

On my computer (with web server for chrome) it runs completely fine but on my other computer (in a website) the ball doesn't move when I drag it.

What should I do?