so I've tried to make this code work, but no matter how hard I try, it still won't work. My goal is to make my sprite move using cursors but it won't work. Also for some reason, if my sprite is depending on this:
gameState.cursors.this.input.keyboard.
createCursorKeys();
I know my code is wrong, but I can't figure out how to fix it, here it is down there:
if (gameState.cursors.left.isDown) {
gameState.player.setVelocityX(-160);
} else if (gameState.cursors.right.isDown) {
gameState.player.setVelocityX(160);
} else {
gameState.player.setVelocityX(0);
}
}
Thanks again stack community!
It should be gameState.cursors = this.input.keyboard.createCursorKeys(); so they get assigned properly. This is assuming gameState is a global variable that can be seen from the current scope.
Related
Can someone please tell me why, when I test the code, I get an error that the code has failed even though everything is working properly? I get the same error for all the 4 functions, and the font size is entered.
Thanks in advance.
The Error: Did you set the ingredients Font Awesome icon font size inside the body of the ingredientsNormal() function?
<script>
function ingredientsHover() {
document.getElementById("ingredients").firstElementChild.firstElementChild.style.fontSize = "300%";
}
function ingredientsNormal() {
document.getElementById("ingredients").firstElementChild.firstElementChild.style.fontSize = "100%";
}
function preparationHover() {
document.getElementById("preparation").firstElementChild.firstElementChild.style.fontSize = "300%";
}
function preparationNormal() {
document.getElementById("preparation").firstElementChild.firstElementChild.style.fontSize = "100%";
}
</script>
Could you tell is why the code has failed? What kind of information did you get from the notification?
The browser behaves permissive regarding not correct executed code. He tries doing it's best converting your stuff into usable HTML ^^ That's way you're test may fail but your browser silently accepts it.
My first approach would be to reduce the complexity by only executing one of those functions first and secondly only logging the outcome of a reduced function call like:
function ingredientsHover() {
const ingredients = document.getElementById("ingredients").firstElementChild;
console.log("ingredients: ", ingredients);
}
If this works you can expand your approach until you hopefully catch the problematic part.
By the way...
Selecting elements the way you're doing it is error prone.
You have several ways to improve your code regarding this.
Two possible suggestions:
Make use of optional chaining like: document.getElementById("ingredients")?.firstElementChild?.firstElementChild?.style?.fontSize="300%"
Improve your way of selecting elements like the following psydo code proposes a possible way: document.querySelector('#ingredients:first-child:first-child'); I didn't tested it but you should get the idea right? :-)
I'm trying to make a website and I'm stuck now that I'm in JS territory. I am OK with HTML and CSS, but I feel like a total moron when it comes to JS.
Here's what I have (and I'm sure it's dead wrong) so far...
var clicked = getElementById('loginIcon').clicked;
function showHideLogin() {
if (clicked) {
getElementById('loginField').visibility = "visible";
}
else {
getElementsById('loginField').visibility = "hidden";
}
}
Please, be kind... I'm just starting to learn JS and I'm ripping my hair out and feeling like a complete idiot...
I'm trying to make a login that only shows when an icon (png) is clicked. Otherwise, it's hidden.
EDIT: Thanks for the replies so far. This is how much of a noob I am: Atom says " Node is not recognized as an internal or external command" which, by Googling, I've found out means I don't have Node JS (which I have to research more to understand).
Thanks guys. I'll let you know if it's still not working.
Try
getElementById('loginField').style.visibility = "visible";
You're not setting the visibility correctly. It should be:
getElementById('loginField').style.visibility = "visible";
Also, I'm not sure when showHideLogin is expected to be called, but the norm for setting an event handler is to register a function. Something like:
getElementById('loginIcon').onclick = function() {
// perhaps some conditions or other logic
getElementById('loginField').visibility = "visible";
};
I'm new to typescript and I'm trying to use a bit of code I found online to change links to look nice for my site,
<script src="https://wow.zamimg.com/widgets/power.js"></script>
<script>var wowhead_tooltips = {
"colorlinks": true,
"iconizelinks": true,
"renamelinks": true
};
</script>
I included that into my index.html, and it works great, until I load a component, I spent a lot of time looking around and found that I need to call $WowheadPower.refreshLinks();
To get the links to change when a new element is added, I wasn't sure how to declare that variable in typescript so I could tie it to various angular commands I wanted to do, unless I add it in a try catch:
loadScript(){
try{
// update tooltips
if(typeof $WowheadPower == 'undefined'){
$.getScript('//wow.zamimg.com/widgets/power.js');
} else {
$WowheadPower.refreshLinks();
console.log($WowheadPower)
}
} finally {}
}
I get an error that says
Cannot find name '$WowheadPower'
but I saved it anyway, and somehow on my page it works as I want it too.
It works perfect, but I still got the error so I declared it
try{
// update tooltips
var $WowheadPower
if(typeof $WowheadPower == 'undefined'){
$.getScript('//wow.zamimg.com/widgets/power.js');
} else {
$ WowheadPower.refreshLinks();
console.log($WowheadPower)
}
} finally {}
and it broke, I assume because I overwrote the correctly variable that has the right method.
Now I have to leave the error in to get functionality, but the error stops me from compiling when I ng serve. Until I hit save on VScode then it works fine again.
Any thoughts on how to resolve this?
since $WowheadPower is an external variable imported from another file, you can tell typescript that it exists without explicitly declaring it:
declare var $WowheadPower: any
write this at the beginning of your code so you tell TS that this variable exists. Ideally, you would write an interface that correctly defines $WowheadPower's type instead of any there.
I'm used to vanilla JavaScript syntax for building simple Phaser games, but I've been using this Yeoman generator, which changes the syntax to something new that I'm not familiar with. I'm honestly not sure how to describe it, but basically instead of create the usual create, update, etc functions like this:
function update() {
game.physics.arcade.collide(sprite1, sprite2, collisionHandler, null, this);
}
It's defined like this:
exports.update = function(game) {
game.physics.arcade.collide(sprite1, sprite2, collisionHandler, null, this);
}
The 3rd argument collisionHandler is a custom collision handler, which if I was using the first syntax style, I'd just create it using something like this:
function collisionHandler (sprite1, sprite2) {
game.stage.backgroundColor = '#ffffff';
}
I honestly don't know how to declare it using this new syntax i.e. the second example above e.g. exports.update = function(game). I've tried various definitions similar to this for the collisionHandler() function, but they've all been wrong.
QUESTIONS
Can someone tell me the correct way to declare that collision handler in the second syntax/style?
Can someone share a great link that'll best explain this syntax?
I've got basic JavaScript coding down, but I have no experience with Node/Yeoman/etc, so I'm sure that's most of the problem :)
If you're not familiar with Phaser, here's some example code using https://phaser.io/examples/v2/arcade-physics/vertical-collision.
TIA!
I'm using the ko.editables plugin for knockout, and it doesn't appear to be caching the previous value correctly. Does anyone have experience with this plugin?
If I do something like this:
var item = { Name: ko.observable("initial") };
selectedItem = ko.observable(item);
ko.editable(selectedItem);
selectedItem.beginEdit();
selectedItem().Name("second");
selectedItem.rollback();
What ends up happening is that selectedItem().Name is still "second", even though it should be "initial".
I looked into the source file, but I don't understand enough about the way JavaScript handles variables to know if what I'm seeing is right or wrong.
I set a breakpoint in the following place within ko.editables.js:
result.rollback = function () {
if (inTransaction()) {
result(oldValue); //breakpoint
inTransaction(false);
}
};
What I found was that oldValue had picked up the new value of the observable, even though commit was never called. Everything I've tried looks exactly like the samples. What am I missing?
Update:
I've updated the code sample. My original code does have the ko.editable() line in it, but thank you to Robert.westerland for pointing it out. It still doesn't work with this extra line.
I know this is an old post, but could be useful for others. I think you might need to call "commit" before the "beginEdit", and I also had to include "true" as a second parameter when calling ko.editable.
Your updated code::
var item = { Name: ko.observable("initial") };
selectedItem = ko.observable(item);
ko.editable(selectedItem, true);
selectedItem.commit();
selectedItem.beginEdit();
selectedItem().Name("second");
selectedItem.rollback();