1
\$\begingroup\$

I'm currently working on a basic JavaScript top-down shooter and I've run into a dilemma. I'm trying to implement a basic toggle weapon system however when I press the key it changes the weapon properly but when I press it again to toggle back it doesn't work. I don't think it's an issue with the rendering because the drawing function is able to detect the different weapons properly. I feel it's an issue with the actual toggle system code.

Here's the code for the player class

class Player{
    constructor(set){
        this.cx = set.x;
        this.cy = set.y;
        this.r = set.r;
        this.color = set.color;
        this.angle = 0;
        this.toAngle = this.angle;
        this.state = 1;
        this.up = false;
        this.down = false;
        this.right = false;
        this.left = false;

        this.bind();
    }
    bind(){
        const self = this;
        c.addEventListener('mousemove', (e) => {
            self.update(e.clientX, e.clientY);
        });
        window.addEventListener('keydown', (e) => {
            if(e.keyCode == 81){
                if(self.state = 1)
                    self.state = 0;
                if(self.state = 0)
                    self.state = 1;
            }

        });
        //toggle code:
        window.addEventListener('keyup', (e) => {
            if(e.keyCode == 81){
                if(self.state = 1)
                    self.state = 0;
                if(self.state = 0)
                    self.state = 1;
            }

        });
    }
    update(ex, ey){
        this.toAngle = Math.atan2(ey - this.cy, ex - this.cx);
    }
    canv(){
        if(this.angle !== this.toAngle){
            clear();
            ctx.save();

            ctx.translate(this.cx, this.cy);
            ctx.rotate(this.toAngle - this.angle);
            ctx.translate(-this.cx, -this.cy);

            drawPlayer(this.cx, this.cy, this.r, 0, 180, this.color, this.state);

            this.angle = this.toAngle;
        }
    }
} 
//drawing code (above this one in the complete file)
function drawCircle(x, y, rad, startAngle, endAngle, color){
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, rad, startAngle, endAngle);
    ctx.fill();

}
function drawPlayer(x, y, playerR, playerStartAng, playerEndAng, color, state){
    //left hand start
    if(state == 0){
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(x - 15, y - 15, 10, 0, 180);
        ctx.fill();

        //border
        ctx.strokewidth = 10;
        ctx.strokeStyle = "brown";
        ctx.stroke();
        //end

        //right hand start
        ctx.beginPath();
        ctx.arc(x + 15, y - 15, 10, 0, 180);
        ctx.fill();

        //border
        ctx.strokewidth = 10;
        ctx.strokeStyle = "brown";
        ctx.stroke();
    }
    if(state == 1){
        //right hand start
        ctx.beginPath();
        ctx.arc(x + 7, y - 21, 10, 0, 180);
        ctx.fill();

        //border
        ctx.strokewidth = 10;
        ctx.strokeStyle = "brown";
        ctx.stroke();

        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(x - 7, y - 17, 10, 0, 180);
        ctx.fill();

        //border
        ctx.strokewidth = 10;
        ctx.strokeStyle = "brown";
        ctx.stroke();

        //gun start
        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.ellipse(x, y - 20, 3, 25, 0, 0, 2 * Math.PI);
        ctx.fill();

        //gun border
        ctx.strokewidth = 10;
        ctx.strokeStyle = "black";
        ctx.stroke();
        //end


    }

    //draw player
    drawCircle(x, y, playerR, playerStartAng, playerEndAng, color);
}

\$\endgroup\$
1
\$\begingroup\$

You are assigning (i.e. num = 0) instead of using a conditional (i.e. if (someBool === true) {/* Do stuff */}).

Your toggle code should look something like so:

// Easiest way to toggle any value used as a boolean
self.state = !self.state;

// Or if you still want this as an if statement
if (self.state) {
  self.state = 0;
} else {
  // We use an else statement since there can only be two possible values
  self.state = 1;
}

UPDATE: Remove the keydown event.

I just noticed that you have both a keyup and keydown event listener. Only the keyup event should be on since you want the player to press the key to toggle and then press the toggle key again

\$\endgroup\$
  • \$\begingroup\$ Thanks for the answer, however, the same issue is occurring when I press Q (83 in keycode). Is there another way to implement this? \$\endgroup\$ – Ameer Jun 20 at 0:43
  • \$\begingroup\$ Check the answer again @Ameer \$\endgroup\$ – Kitanga Nday Jun 20 at 14:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.