My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

No errors and code still not running

Amaan Kulshreshtha's photo
Amaan Kulshreshtha
·May 19, 2018

I am following a tutorial by freecodecamp to make a pool game. Link I have 3 separate js files namely:

  • ButtonState.js
  • Mouse.js
  • Vector.js

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:

  • index.html
  • Vector2.js
  • inputs
    • ButtonState.js
    • Mouse.js

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.