jeudi 26 décembre 2019

Why are two values in 'increasePower()' being reset?

I am trying to create a game using HTML canvas and javascript. However, I'm still fairly new to JavaScript and I don't understand why the values (this.power & this.origin.y) are being reset to their initial constructor values.

My aim is to try and get the code to go inside the 'else if' statement, which will then run the onShoot function. However since the values are being reset after the user unclicks the mouse, it does not go into the else if statement. (Note that if I hold the left button on the mouse, the values are correctly incremented, they are only reset when I let go of the mouse click)

here is the class which holds 'increasePower()':

const hand_origin = new Vector(13.5, 80);

function Hand(position, onShoot) {
    this.position = position;
    this.origin = hand_origin.copy();
    this.power = 0;
    this.onShoot = onShoot;
}

Hand.prototype.update = function () {

    // Counter represents the number of clicks made by the user
    if ((counter >= 3) && (mouse.left.down)) {
        this.increasePower();
    } else if (this.power > 0) {
        this.shoot();
    } else {
        console.log("inside final else case " + this.power)
    }
}

Hand.prototype.draw = function () {
    Canvas.drawImage(items.hand, this.position, this.origin,);
}

Hand.prototype.increasePower = function () {
    this.power += 100;
    this.origin.y += 0.1;
}

Hand.prototype.shoot = function () {
    this.onShoot(this.power, this.rotation);
}

An instance of the hand class is created in another file :

function CarromWorld(){
    this.striker = new Carrom_men(new Vector(294.5,512.5));
    this.hand = new Hand((new Vector(294.5, 512.5)), this.striker.shoot) 
}

// the postions of the objects will be changed here 
CarromWorld.prototype.update = function(){
    this.hand.update();
    this.striker.update();
    this.hand.position = this.striker.position;
}

//objects will be drawn here 
CarromWorld.prototype.draw = function(){
    Canvas.drawImage(items.board, {x:0, y:0});
    this.hand.draw();
    this.striker.draw();
}

Since I am trying to create an animation, I use the requestAnimationFrame to create the game loop:

//This class is handling the overall game 

function Game() {
}

//Used to initialise everyhting in the game
Game.prototype.init = function(){
    this.carromWorld = new CarromWorld();
}

Game.prototype.start = function(){
    mainGame.init();
    mainGame.loop();
}

// all of the animations will occur in this method
//First want to clear the object for each frame and then want to draw the updated versions of the objects
Game.prototype.loop = function(){ 
    Canvas.clearScreen();

    //Calling two of the mehtods from the carromWorld Class, this way the code stays concise and allows all the obejcts' psotions to be updated
    mainGame.carromWorld.update();
    mainGame.carromWorld.draw();
    //want the button to be set to false again
    mouse.reset(); 
    requestAnimationFrame(mainGame.loop)
}

//Creating a new game
let mainGame = new Game();

Aucun commentaire:

Enregistrer un commentaire