Javascript function just not working for canvas game - javascript

I'm creating a canvas game (the concept is a side scrolling endless games). I'm trying to make power-ups so I have a main game JS file along with a powerup.js among others. At the moment I'm concentrating on my invincibility power up. I've created some simple code which in theory should work:
In the powerup.js
function powerUpInvincibility() {
invincible = true;
//window.setInterval(powerUpInvincibilityReset, this.powerUpTime[0]);
}
function powerUpInvincibilityReset() {
jet1.invincible = false;
}
I set the invincible variable in the main js but they are all linked, I've got code in all the JS files working but even when I call the powerUpInvincibility function in Chrome's Console the variable doesn't change.
I've tried making it a variable for the jet and the powerup but that doesn't work either and I've checked for any spelling mistakes several times.
I'm lost, any suggestions?

Ok sorry everyone! The actual problem was that one of my powerUp functions tried to access a this variable when it wasn't a powerUp.prototype function. Thanks for the answers!

Related

Is calling a property's method from another method of the same object in this manner ok?

Can someone help me understand why the code below works and if this is an acceptable pattern to use?
Without getting into it too much I have a basic state machine functionality inside an object called states in a simple browser game I am making and I able to trigger event transitions by calling states.event('someEvent') from within the states object itself. For instance if the update method of a given state, say states.someState.actions.onUpdate() is running it can call states.event('someNewEvent'). Doing it this way is not something I need to do, I did it accidentally but I was very confused by the fact that it worked. So the code below is that logic/functionality which I don't understand reduced down to a simple example.
I can't seen to find any information that would explain this type of pattern.
Everywhere online would seem to suggest that I write "this.printText()" instead of "myObj.printText()" but it only prints when I do it the way I have below.
This seems like it might be bad practice, at the very least it would be because I don't understand quite why it works... Any help would be appreciated. I struggle a lot with javascript coming from C# in unity game engine.
let myObj = {
printText: function() {
console.log('I thought this would not print');
},
myProperty: {
toPrint: function () {
myObj.printText();
}
}
}
myObj.myProperty.toPrint();

Nasaworldwind Web: Removing/reassigning a clickRecognizer with different callback

Good Afternoon,
There seems to not be a lot of documentation/examples using Nasa's worldwind api especially the web version. So say I have...
let clickRecognizer = new WorldWind.ClickRecognizer(wwd, clickHandler);
where wwd is the name of my WorldWind Canvas/Window and clickHandler is the function called on click. I just want to know if anyone know how do I remove this ClickRecognizer() once I add it? I have tried assigning a new ClickRecognizer() to clickRecognizer variable and setting it to null then assigning but it made no difference; the first/original clickHandler function is being used.
In short I am trying to switch between ClickRecognizer that uses different clickHandler functions but the change isn't reflected when I click (I verified that the variable (let clickRecognizer) is changed and the gestureCallbacks array (see docs) is correctly populated with the second clickHandler function).
Here are the docs, I tried using removeListener(clickHandler) to no avail.
(This isn't my actual code (ofcourse) I just wrote the question generally)
Thanks

Getting Values out of Websocket Functions

I am working on a project which needs to get communication from C++ code to JavaScript on a webserver. Currently, I have data sending properly and it's being received but the issue is that I cant use the data outside of the inner(onmessage) function. This still works fine to overwrite elements of the webpage, but the charts I'm trying to build cant get the live data. If I put the code for the chart inside the inner function the entire program freezes and I can't get the variable out of the function for me to use it in the parent either. Right now, I just want to get the data out of the inner function so I can use it. So, is there any way for me to pull that data out of the inner function and use it in the parent function?
Here is my code:
{
var x;
var ws = new WebSocket('ws://localhost:10011/');
ws.onmessage = function(event)
{
x = event.data;
var testing = document.getElementById('InnerFunctionOutput');
testing.innerHTML = "Run Time: " + x;
}
var testing = document.getElementById('ParentFunctionOutput');
testing.innerHTML = "Run Time: " + x;
}
When I run this code the output from the inner function is the constant stream of data and the output from the parent is a constant 1. If anyone could help me find a solution, it would be greatly appreciated.
One alternative solution is to put the functions for the charts inside the websocket function. That way, I wouldn't have to get data out of the function. however, this solution has its own set of problems. I will put a link below to a thread where I ask about this alternate solution if you are interested in that part.
Plotly and Websockets
Any help would be greatly appreciated.
Thanks,
Luke
I found a solution to the problem. To get the data out of the websocket function I overwrote a text element on the page and simply made that element invisible. After that, just read the text element in order to get it into the rest of the code. However, there could be a better way of doing this so please let me knw if there is.
Also, there is one issue I ran into with this solution. When I originally tried this with normal formatting document.getElementById('some id').innerHTML = some data; it didn't work. But when with adding "window" to the beginning window.document.getElementById('some id').innerHTML = some data; it just worked.

Need to store to css element in variable

I am trying to make my code more readable in portractor.
I want to store the css class in a variable and need to access that variable on click method.
element.all(by.css("div[ng-click=\"setLocation('report_road')\"]")).click();
element.all(by.css("div[ ng-click=\"mapFeedBack.editObject= mapFeedBack.createMapObjectModel();setLocation(mapFeedBack.noMap?'road_new':'choose_location_road_new/road_new')\"]")).click();
it("test browser should reach report road option",function() //spec2s
{
element.all(by.css("div[ng-click=\"setLocation('report_road')\"]")).click();
expect(browser.getCurrentUrl()).toContain("report_road");
browser.sleep(browser.params.sleeptime);
browser.sleep(browser.params.sleeptime);
});
it("test browser should reach report road missing",function() //spec3
{
element.all(by.css("div[ ng-click=\"mapFeedBack.editObject= mapFeedBack.createMapObjectModel();setLocation(mapFeedBack.noMap?'road_new':'choose_location_road_new/road_new')\"]")).click();
expect(browser.getCurrentUrl()).toContain("choose_location_road_new/road_new");
browser.sleep(browser.params.sleeptime);
browser.sleep(browser.params.sleeptime);
});
So I created two variables in my file :
var road_button ="\"div[ng-click=\"setLocation('report_road')\"]\"";
var road_missing= "\"div[ ng-click=\"mapFeedBack.editObject= mapFeedBack.createMapObjectModel();setLocation(mapFeedBack.noMap?'road_new':'choose_location_road_new/road_new')\"]\"";
And tried to access my css class using that variable:
element.all(by.css(road_button)).click();
element.all(by.css(road_missing)).click();
But some how I'm not able to access these variable value. Can you please provide me the right way of doing this?
Thank you
I think you are sort of reinventing the wheel. What you really need to follow is the guideline to use Page Objects. They would not only solve your problem of separating locators from the test flow and test scenario logic, but would also make the the code more modular and easy to adapt to never-ending changes on the application side.
Here is a great practical introduction to Page Objects in Protractor:
Page Objects

Trouble with calling javascript function within another using D3

I'm learning to use D3.js for some visualization ideas I have and I'm running into something that is probably quite easy and perhaps solely a javascript thing.
I want to call a function from within another function. I have created a basic scatter plot and want to reload it with new data points. Here is the JSFiddle. I'm really quite stumped!
I think in it's simplest form it looks like this:
function firstFunction() {
var something;
}
function secondFunction() {
firstFunction();
}
But it seems to sometimes works sometimes not and can't figure out why.
What's happening is that, in jsfiddle, the default is to encapsulate everything in a function that runs on window load. The code looks like this: window.onload=function(){your stuff}
When you try to set the onload, the code structure is then structured like this:
function firstFunction(){
function secondFunction(){
do stuff
}
}
onload = secondFunction;
The issue is that secondFunction is not accessible outside the scope of firstFunction. This is called variable scoping, and coding would suck without it.
The way to solve this issue is to move your onload assignment to the javascript block. I'd recommend the built in d3 way of doing this: d3.select('button').on('click',newScatter); here I'm selecting the button and adding a click event handler. This works because there is only one button, but it would be better to give the button a class or id and use that in d3.select().
If you do that, your code will still not work, but that's because you delete the SVG element that's supposed to contain the scatter plot in newScatter() (this line: elem.parentNode.removeChild(elem);). The button, however, will successfully do what you told it to do and delete your scatter plot.
I've created a working version of your fiddle here.

Categories