Firing a gun

Question

Firing a gun

As part of my journey to learn about coding in HTML/JS/CSS, I decided to create a top-down shooter game. While I've successfully implemented player movement and rotation on the canvas, I'm struggling with getting the gun mechanics to work properly.

After following tutorials and searching through StackOverflow posts, I defined a variable 'gunfire' set to 1 when the left mouse button is pressed and 0 otherwise. My aim is to draw bullets in front of the sprite when the mouse button is clicked. However, the issue I'm facing is that the bullets appear regardless of the mouse input.

If anyone can help pinpoint the error in my code, I would greatly appreciate it. Here's the snippet (the canvas is created in separate HTML/CSS files):

 // Your JavaScript code goes here

javascript html css canvas

Answer 1

Answer №1

Firstly, Kippie points out that the issue lies in setting gunfire to 1 each time, resulting in a true statement. This must be adjusted to == or === (the latter being preferable) or eliminating the comparison altogether as any non-zero value would evaluate to true:

if (gunfire) {
   ...
}

Secondly, it's important to note that checking for mouse clicks within a key handler is not appropriate as keyCode does not pertain to mouse button clicks. In this context, keyCode of 1 has no correlation to mouse clicks.

Thirdly, there is a lack of event handlers for mouse clicks...

To address these issues (in addition to the first one), include an event handler specifically for mouse clicks:

top_canvas.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup",   mouseUp,   false);

Then, within the handlers (illustrated here focusing on mouse down events):

function mouseDown(e) {

    if (e.button === 0) { // verifying left mouse-button click
        gunfire = 1;
    }
}

The rationale behind using the window object for the mouse up event is to ensure that even if the mouse pointer is outside the canvas element, the release event will still register, preventing continuous firing. By utilizing the window object, you can successfully capture the up event under such circumstances.

Answer 2

Firstly, Kippie points out that the issue lies in setting gunfire to 1 each time, resulting in a true statement. This must be adjusted to == or === (the latter being preferable) or eliminating the comparison altogether as any non-zero value would evaluate to true:

if (gunfire) {
   ...
}

Secondly, it's important to note that checking for mouse clicks within a key handler is not appropriate as keyCode does not pertain to mouse button clicks. In this context, keyCode of 1 has no correlation to mouse clicks.

Thirdly, there is a lack of event handlers for mouse clicks...

To address these issues (in addition to the first one), include an event handler specifically for mouse clicks:

top_canvas.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup",   mouseUp,   false);

Then, within the handlers (illustrated here focusing on mouse down events):

function mouseDown(e) {

    if (e.button === 0) { // verifying left mouse-button click
        gunfire = 1;
    }
}

The rationale behind using the window object for the mouse up event is to ensure that even if the mouse pointer is outside the canvas element, the release event will still register, preventing continuous firing. By utilizing the window object, you can successfully capture the up event under such circumstances.

Answer 3

Answer №2

if (gunfire == 1)

Instead of using the assignment operator, consider using the comparison operator. Switch to === for better practice.

Answer 4

if (gunfire == 1)

Instead of using the assignment operator, consider using the comparison operator. Switch to === for better practice.

Firing a gun

Answer №1

Answer №2

Similar questions

Confirm the Text Box with JavaScript

Customizing Bootstrap Vue to prevent tooltips from opening on hover

Passing a date string from the Controller to JavaScript using the AJAX method

What could be causing the else statement to execute in this particular node script?

Strange Behavior of Anchor Tags

Timeout for browser response

Navigating external pages with Vue Router

Unable to change the value of selected items in checkbox event within a React context

Is your toggle() function failing to work on dynamically loaded ajax content?

Mysterious error arises in Internet Explorer versions 7 and 8: An expected colon is missing

Use Enums instead of conditions in Typescript

I encountered an issue when trying to include the dotenv file, receiving the following error message: [TypeError: Network request failed]

Incorporating a HTML layout with a JS backdrop

Is it possible to comment out classes within a specified class attribute? How can this be achieved?

Resizing webpages for mobile devices results in misaligned rows

Drag and drop functionality in Jquery using unique data-ids

Trouble injecting factory into controller using Jasmine and requireJS

Each time `fs.writeFile` is invoked, it initiates a fresh line

Using Node.js to send a response only after every promise has been resolved

Is it possible to use a single function to both set the state and return JSX?