adjust the ball's speed with the push of a button, increasing or decreasing

Could you please demonstrate how to control the speed of a ball using buttons for speeding up and slowing down? I have tried implementing the code but it does not seem to be working correctly.

    this.speedUpButton = this.add.sprite(230, 530, 'down-bubble').setInteractive({ cursor: 'pointer' });

    this.speedDownButton = this.add.sprite(80, 530, 'up-bubble').setInteractive({ cursor: 'pointer' });

    this.input.on('gameobjectup', function (pointer, gameobject) {

        if (gameobject === this.speedDownButton && this.ballSpeed > 100)
        {
            this.ballSpeed -= 10.1;
        }
        else if (gameobject === this.speedUpButton && this.ballSpeed < 19.9)
        {
            this.ballSpeed += 10.1;
        }

    });



adjustBallSpeed() {

    this.ballSpeed = 0.003;

    return this.tweens.addCounter({
        from: 220,
        to: 160,
        duration: 9000,
        delay: 2000,
        ease: 'Sine.easeInOut',
        repeat: -1,
        yoyo: true
    });
}
javascripttypescriptphaser-framework

Answer №1

createBalls() {

    const hitArea = new Phaser.Geom.Rectangle(0, 0, 32, 32);
    const hitAreaCallback = Phaser.Geom.Rectangle.Contains;        

    const circle = new Phaser.Geom.Circle(400, 300, 220);
    const balls  = this.add.group(null, { 
        key: 'balls', 
        frame: [0, 1, 5], 
        repeat: 5, 
        setScale: { x: 3, y: 3 },
        hitArea: hitArea,
        hitAreaCallback: hitAreaCallback,
    });

    // console.log(balls.getChildren().length);


    this.input.on('gameobjectover', function (pointer, gameObject) {
        document.body.style.cursor = 'pointer';
    });

    this.input.on('gameobjectout', function (pointer, gameObject) {
        document.body.style.cursor = 'default';
    });

    this.upButton = this.add.sprite(230, 530, 'down-bubble').setInteractive({ cursor: 'pointer' });

    this.downButton = this.add.sprite(80, 530, 'up-bubble').setInteractive({ cursor: 'pointer' });

    this.input.on('gameobjectup', function (pointer, gameobject) {

        if (gameobject === this.downButton &&  this.spinSpeed.timeScale > 100)
        {
            this.spinSpeed.timeScale -= 10.1;
        }
        else if (gameobject === this.upButton &&  this.spinSpeed.timeScale < 19.9)
        {
            this.spinSpeed.timeScale += 10.1;
        }

    });
    Phaser.Actions.PlaceOnCircle( balls.getChildren(), circle);

    return balls;
}

createDance() {

    this.spinSpeed = 0.003;
    // https://phaser.discourse.group/t/how-to-create-key-combo-with-custom-buttons/2622
    return this.tweens.addCounter({
        from: 220,
        to: 160,
        duration: 9000,
        delay: 2000,
        ease: 'Sine.easeInOut',
        repeat: -1,
        yoyo: true
    });
}

update() { Phaser.Actions.RotateAroundDistance( this.balls.getChildren(), { x: 400, y: 300 }, this.spinSpeed, this.dance.getValue()); this.playerEyes.update(); // this.buttonsspeed.update();

}

Answer №2

initiateGame(): void {

    this.load.image('sky', './src/games/gewgly/assets/images/sky.png');

    this.load.image('up-bubble', './src/games/gewgly/assets/images/up-bubble.png');
    this.load.image('down-bubble', './src/games/gewgly/assets/images/down-bubble.png');

    this.load.spritesheet('balls', './src/games/gewgly/assets/images/balls.png', { frameWidth: 17, frameHeight: 17 });

}


startGame(): void {

    this.add.image(400, 300, 'sky');
    this.balls = this.createBalls();    
    this.dance = this.performDance();
    // this.moveButtonsSpeed();

    this.playerEyes = new Eye(this.prepareEyeArguments(200,135,3.0));
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript's XMLHttpRequest

My attempt to bypass the WebGoat prompt involved using a combination of javascript code with XMLHttpRequest to send multiple requests, one using GET and the other using POST. The code snippet is as follows: <script> var req1 = new XMLHttpRequest() ...

javascript

Conceal table cells using jquery depending on the input value

Is there a way to hide the td elements when the input value is set to 0? I've been struggling to make it work. http://jsfiddle.net/zxpsd8x6/1/ <td><input type="radio" name="hideifvalue0" value"0"></td> <td><input type="rad ...

javascriptjqueryhtml-table

The rsuite table does not properly reflect changes in state data

This is the render method that I am working on render() { return ( <Contentbox> <ol> {this.state.data.map((obj) => ( <li key={obj._id}>{obj.name}</li> ) ...

javascriptreactjsrsuite

Certain types of properties are unable to be automatically identified as a sequelize data type. It is necessary to manually specify the data type in order to

Creating a one-to-many relationship between a User and a Product using sequelize-typescript. Below are the Models: Product.ts @Table export class Product extends Model { @Column({ primaryKey: true }) id!: string @Column title!: string ...

mysqltypescriptexpresssequelize.jssequelize-typescript

Using React.js to dynamically render routes with components based on JSON data

As a newcomer to react and the world of JavaScript, I find myself facing a challenge. I have a JSON file that contains URLs which I want to use in rendering specific components. { "MTs": { "MenuItems": { "Main": { "key": "1", "u ...

javascriptjsonreactjscomponentsreact-router-dom

Change the color of the status bar icon in cordova to create the opposite effect

Looking to modify the color of the icons and fonts on my status bar. Similar to the design on Soundcloud... I was able to change the background to white, but now the icons blend in because they are also white Example of Soundcloud's status bar Statu ...

javascriptandroidcsscordovastatusbar

The function view() is not displaying the CSS and JS files properly

Having trouble with loading the css and js on my view: This is how I set up the controller: return view('home.news') ->with("news", $news); And here's how the route is defined: Route::get('/news/{id}&apos ...

javascriptphphtmlcsslaravel

Developing a personalized camera feature using ReactJS

After searching for a suitable npm library to create a custom camera component within my ReactJS project, I came across an article providing detailed information at this link. However, I am facing challenges in converting the existing pure JavaScript code ...

javascriptreactjsjsx

Step-by-step guide on extracting a specific row from an HTML table in node.js

I've been working on a web app using express and node.js. Recently, I created a dynamic table in ejs that pulls data from a database. Here's the snippet of code responsible for generating the table: <form action="/user-orders" method ...

javascripthtmlnode.jsexpresspost

How can I extract the text following specific characters in a string using JavaScript?

I'm attempting to extract everything following specific characters in a string. However, when I use the alert() function on my code, I am puzzled by why there is a comma preceding the extracted string! To see the working version, click HERE This is ...

javascriptjquery

What is the best way to customize multiselection in jqgrid?

jQuery("#grid").jqGrid({ datatype: "local", width:'auto', height: 'auto', multiselect:true, colNames:[ 'no' ], colModel:[ {name:'no', align:'r ...

javascriptjqueryjqgrid

Is there a way to create a stacked bar chart through iterative steps?

I am currently working with time series data stored in an array structured like this: var data = [ [{date: 2016-01-01 00:00:00, value: 52}, {date: 2016-01-02 00:00:00, value: 23}, {date: 2016-01-03 00:00:00, value: 42}, {date: 2016-01-04 00:00:00, value ...

javascriptd3.js

Assistance required for JavaScript with Image and Hyperlinks

In the provided code snippet, I have included a javascript onclick function to the image tag. After clicking the image and then going back, the page remains on the current page rather than returning to the original page. Is there a way to prevent this beha ...

javascripthtmlcss

Retrieve the current character using the jQuery keyup function

I am looking to retrieve the currently pressed keyup value: For example, in my code snippet alert("wj");, I want to extract the 'j' value as it represents the current value being pressed in the input field. I'm interested in retrieving the ...

javascriptjquery

Issue with JQuery: object.id is returning as undefined even though it should have a value

While working with JQuery, I encountered a rather peculiar (or possibly foolish) error. The HTML code snippet in question is as follows: <input type="password" name="repeatPassword" id="id_repeatPassword" /> And within my javascript code, I have t ...

javascriptjquery

Design of Redux middleware with focus on return values

I just finished learning about redux middleware, and it seems really useful. However, I have a question regarding the return values of middleware. I understand that some middleware return values (such as redux-promise), while others like logging do not - ...

javascriptreduxmiddlewareredux-promise

AngularJS 1.5.5: A guide to passing arrays to HTML

Is it possible to transmit array JSON data from an AngularJS Controller to HTML? Below is the HTML code: <body ng-app="bookApp"> <div ng-controller="bookListCtr"> <table> <thead> <tr> <th>something< ...

javascriptangularjsjson

Concealing certain elements within a loop using a "show more" button

In my PHP code, I am utilizing a foreach loop in the following manner: <div class="items"> @foreach($results as $details) <div class="col s2 l2"> {{ $details }} </div></div> My approach involves using the blade templating feature ...

javascriptphpjquery

What is the best way to assign or convert an object of one type to another specific type?

So here's the scenario: I have an object of type 'any' and I want to assign it an object of type 'myResponse' as shown below. public obj: any; public set Result() { obj = myResponse; } Now, in another function ...

javascriptangulartypescript

Ways to showcase HTML content in angular when receiving entities

Is there a way to properly display HTML characters using HTML entities? Take this scenario for example: Let's say we have the following string: $scope.myString = "&lt;analysis mode=&quot;baseball&quot; ftype=&quot;&quot; version ...

javascriptangularjs