I got into jquery a few days ago and I need to build a simple game.
The game starts off with a selection of 4 characters. Once you click a character, the rest are moved to another div called enemies. From there, I select my opponent and the chosen character goes to another div called opponent. Each character has attributes for different attack power, counter attack power, and health points.
My question is: how would I assign values to the 3 attributes/variables/images so that when I click the attack button, it knows which character is in the respected divs (so that it can do the correct math such as deducting specific counter attack power your opponent has, how much hp they have left depending on which character is there, etc)?
I have looked into storing objects into an array, but got no where. The best solution I have thought of by far was to create divs and the 4 images all with their own ids and classes and then push multiple data to the html with jquery, but I'm not sure if this is allowed. For example can you do:
<div id="mydiv" data-atkPower="10" data-healthPoints="20" data-counterAtk="30"></div>`
Or by using the attr() like so:
variable.attr( 'data-atkPower', 30);
variable.attr( 'data-healthPoints', 30);
Any other suggestions for approaching this would be much appreciated
Yes you can set data attribute value for all. And whenever you want to retrieve just on their click event create some variable and retrieve its value like
var abc=$(this).data("atkPower");
And use it wherever you want.
And one more correction in your code
Dont use comma between data attribute like
<div id="mydiv" data-atkPower="10" data-healthPoints = "20" data-counterAtk = "30" ></div>
Related
So I have created a Periodic table of elements, and what I am trying to do is have someone be able to push a button have some script determine if that element is already there if it is to add a subscript and leave the rest of the chemical formula alone for example I push the Hydrogen button once the Oxygen button once and then realize that I need to push the hydrogen button again I want it to go from HO to H(sub(2))O and keep the O as is without deleting it. how could I do that? I can send you my HTML file if that helps you understand my question more.
It would be more helpful with the code, but this is fairly easy. Just use $(element).html() to get the information, split the string using string.split(certain character); or substrings.
Then add it back to the DOM using $(element).html(substring1 + "inserted string" + substring2);
Without jQuery, use the .innerHTML attribute of document.querySelector(element), to change the value of the element.
Hope that helps!!
I have a single slider on a survey in Qualtrics, and need to present the value on the slider from both "ends" (so if the respondent has placed the handle at the value 55, I need to have a box with "55" and "45" shown below the slider, since the maximum value is 100, i.e. 100-55=45).
I've managed to show the value of the slider with the user's input (in the above example, the "55") with this following snippet of HTML in the text question, which places a box somewhere on the page with the slider's value:
<input class="SumInput InputText QID29 QWatchTimer" data-runtime-value="runtime.Choices.1.Value" id="QID29" name="QID29" type="text" value="" />
However, I can't get the other box that displays essentially 100 minus whichever the runtime.Choices.1.Value is to work (the "45"). I've tried simply "100-runtime.Choices.1.Value", "100"-"runtime.Choices.1.Value", the same without any quotations, and just about every possible math function for CSS/HTML. I know that technically HTML only displays and doesn't really do this kind of runtime calculation (I'm a novice so this is as far as I've gleamed), so if there was any Javascript snippet or some other piece of code that would show in real time 100 minus wherever the user has moved the handle on the slider to, that'd be fantastic. I'm assuming some sort of addOnClick function but have no clue how to refer to anything on the slider to do this.
It's such a simple task but for some reason has taken so far quite a bit. Any help is appreciated; thanks!
I've managed to figure this out for the particular example of the slider, though I think the following Javascript should work for presumably many question types, given using the correct getChoiceValue (i.e. changing the "1" to the number corresponding to the element on the page whose answer value you want to obtain):
Qualtrics.SurveyEngine.addOnload(function() {
/*Place your JavaScript here to run when the page loads*/
var result=0;
var otherend= 0;
this.questionclick = function(event,element){
result = this.getChoiceValue(1);
endupdate();
document.getElementById("otherend").innerHTML=otherend;
document.getElementById("result").innerHTML=result;
}
function endupdate() {
otherend=100-result;
}
});
I then added the following in the HTML of the question text, wherever I wanted it to show up (I personally put it in a table so I could center things nicely on the page, along with some explanatory text):
<span id="result">0</span>
<span id="otherend">0</span>
Hope this saves somebody else some time and energy!
Currently i'm working on a flash game where i want a certain value to appear on the right side when the user types in a value on the left side.
Where the default amount is 0 and when the person types a number, the price(on the right will update accordingly.
Is it possible for this to be achieved?
*The text's fields are all set to dynamic text fields
Picture below,
Yes it is possible, but its a little more effort as i see your using the timeline animation.
Easier way to reference everything is to set up a scope of variables that can be accesses anywhere:
In your situation its best to put your whole content movie inside an Empty movieClip as a container...
Now you will have your whole movie inside the MovieClip--
Your Project Structure:
Container ---- Price.
|
--- Actions.
|
--- BTN.
Put your actions on the container layer as now you can set your variables there and create functions to interact with your buttons.. // referencing from my movieClip. As you will not have any scoping issues if you need to go to and from frames.
Give your text boxes unique names so you can reference them.
You will need to set up Event handlers to respond to your functions ();
Note: Embedd your fonts on export as Dynamic texts boxes may show up empty
Further more for idea:
For simplicity you could use an enterframe function and just check if
textbox.text = "" else--> run your function...
But it will be more appropriate to check weather text box focus or any key press/down to then check the text boxes inputs... depending on the complexity of your application and your understanding on OOP..
I am new to javascript and I need to make a black jack style game. I need to create a table of replicated buttons in a 6x6 row(36 buttons total). They will display an x unless pressed and then they will generate a random number 1 to 9 and add it to a total score in a global variable. If the buttons clicked put you over 21 then you lose but if you get a score of exactly 21 you will win the game and a pop up message will prompt the user of their win.
I not sure how to make a table and then replicate the buttons. I also would like to know how to change the value of the button from x to a random number.
The game will look something like this.
I am not asking for the full game to be done for me I just want to know how to replicate buttons in a table, point them all to the same function, and change the value displayed on the button when one is clicked. If you can show me an example of anyone of those concepts I would greatly appreciate it.
how to make a table and then replicate the buttons
Use loops to repeat the same code several times. You can put the code that sets up a button in a loop to make many buttons.
how to change the value of the button
If you're using an input element for the button, the value property lets you change its label.
to a random number
Math.random gives you a random number. You can build some logic around this to get what you want.
how to ... point them all to the same function
You can use event listeners to run code when the user clicks an element.
In a spelling game I have created there is a grid that is populated with words. The aim of the game is to spell the words by clicking on the letters on the side, which animate into the empty spaces in the grid. Words are highlighted if they are to be spelt, so the user can see where to go next. The aim of the game is to spell the required amount of words in the grid to complete the game. I usually set this to two, but have just changed it to 3 and the program keeps breaking after I spell the second word.
if (score.right == 3) {
................
................
}
Usually when you spell a word correctly I use a "click.trigger" function to move to the next highlighted word in the grid. At the moment after 2 correct ones the program either just doesn't go onto the next one or goes back to the last one and doesn't allow you to click the letters.
setTimeout(function() {
jQuery('.next-question').trigger('click');
}, 1500);
I have tried to go through with break points but cannot seem to find the issue. Can someone help me to get it working again and tell me where I was going wrong?
At the moment in my game there is no hint pictures or hint sounds so to find the highlighted word you have to use the console. Try answering two right then it will crash.
Here is a fiddle for the broken one: http://jsfiddle.net/smilburn/Dxxmh/101/
Here is a fidddle to a previous one that worked fine: http://jsfiddle.net/smilburn/Dxxmh/100/ (some class names may have changed)
First thing. The images dont show in the new version because for their links, you're using relative path which doesnt exist as far as jsfiddle is concerned. The earlier one uses absolute links. Same thing goes for the audio files.
Next thing, at the beginning you have var definitions like
var hintPic = $("#hintPic")[0];
This statement returns the first element from the set as a plain DOM element. So later when you're trying to show it
hintPic.show();
It wont work because 'show' is a jquery function. Remove the [0]'s from the variable definitions and it should work just fine.