I am following a tutorial by freecodecamp to make a pool game. Link I have 3 separate js files namely:
ButtonState.js code
function ButtonState() {
this.down = false;
this.pressed = false;
}
Vector2.js
function Vector2(x = 0, y = 0) {
this.x = x;
this.y = y;
}
Vector2.prototype.copy = function () {
return new Vector2(this.x, this.y)
}
Mouse.js
function handleMouseMove(event) {
console.log("Mouse moved");
let x = event.pageX;
let y = event.pageY;
Mouse.position = new Vector2(x, y);
}
function handleMouseDown(event) {
handleMouseMove(event);
if (event.which === 1) {
if (!Mouse.left.down) {
Mouse.left.pressed = true;
}
Mouse.left.down = true;
} else if (event.which === 2) {
if (!Mouse.middle.down) {
Mouse.middle.pressed = true;
}
Mouse.middle.down = true;
} else if (event.which === 3) {
if (!Mouse.right.down) {
Mouse.right.pressed = true;
}
Mouse.right.down = true;
}
}
function handleMouseUp(event) {
handleMouseMove(event);
if (event.which === 1) {
Mouse.left.down = false;
} else if (event.which === 2) {
Mouse.middle.down = false;
} else if (event.which === 3) {
Mouse.right.down = false;
}
}
function MouseHandler() {
this.left = new ButtonState();
this.middle = new ButtonState();
this.right = new ButtonState();
this.position = new Vector2();
document.onmousemove = handleMouseMove;
document.onmousedown = handleMouseDown;
}
MouseHandler.prototype.reset = function () {
this.left.pressed = false;
this.middle.pressed = false;
this.right.pressed = false;
}
let Mouse = new MouseHandler();
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pool Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<canvas id="screen" width="1680" height="850"></canvas>
<script src="Vector2.js"></script>
<script src="inputs/ButtonState.js"></script>
<script src="inputs/Mouse.js"></script>
<script src="Canvas.js"></script>
<script src="Assets.js"></script>
<script src="Ball.js"></script>
<script src="Stick.js"></script>
<script src="GameWorld.js"></script>
<script src="Game.js"></script>
<script>
loadAssets(PoolGame.start);
</script>
</body>
</html>
folder structure:
When I run the code, I want it to detect the mouse left click and it is not detecting that. Although it is detecting the mouse movement.
P.S: When I run the code in jsfiddle, the click gets detected.
No responses yet.