this is the dead script for my shooter game (the buttons are just for testing)
but for some reason i cant figure out how to add 10 instead of 1
this is what i have now:
(function(){
const buttons = document.querySelectorAll('.counterBtn')
let count= 0
//Add event listeners and functionailty to each button
buttons.forEach(function(button){
button.addEventListener('click', function(){
//buttons
if (button.classList.contains('-1')){
count--
} else if (button.classList.contains('+1')){
count++
} else if (button.classList.contains('+10')){
}
//Select the counter text
const counter = document.querySelector('#counter')
counter.textContent = count
//dead / alive
if (count <= 0 ){
counter.style.color = 'red'
console.log("dead")
} else if (count > 0){
counter.style.color = 'lightgreen'
console.log("alive")
} else {
counter.style.color = '#000000'
}
if (count <= 0) {
alert ("you died")
} else if (count > 100 ) {
alert ("u r ful health")
} else {
return
}
})
})
})()
can someone please help me?
Use +=, for example:
count += 10
Of course this also works, but is more verbose:
count = count + 10
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment
Related
My game has two players that get random numbers, and the person who has the bigger number gets 1 "win". My while loop is for the "auto-roll" button, and instead of clicking "roll dice" each time, auto-roll will do it for you until one player has wins == game limit # (bestof.value). No matter where I put my setInterval it increases by a bunch at a time. If bestof.value = 10 then each interval displays at least 10 wins for one player at a time.
checkBox.checked = input checkmark that enables auto-roll feature. So this setInterval will only be active while the auto-roll loop is active.
Anyways, what am I doing wrong?
button.addEventListener("click", myFunction);
function myFunction() {
let random = Math.floor((Math.random() * 6) + 1);
let random2 = Math.floor((Math.random() * 6) + 1);
screenID.innerHTML = random;
screenIDD.innerHTML = random2;
if (random > random2){
winNumber.innerHTML = ++a;
} else if(random2 > random){
winNumba1.innerHTML = ++b;
} else {
console.log("Draw");
}
if (a > b){
winNumber.style.color = 'white';
winNumba1.style.color = 'black';
} else if(b > a){
winNumba1.style.color = 'white';
winNumber.style.color = 'black';
} else {
winNumber.style.color = 'black';
winNumba1.style.color = 'black';
}
if (checkBox.checked){
setInterval(myFunction, 2000)
while(a < bestof.value && b < bestof.value){
myFunction();
}};
if (winNumba1.innerHTML == bestof.value){
winAlert.style.display = "flex";
console.log('winNumba1 wins!');
} else if (winNumber.innterHTML == bestof.value){
winAlert.style.display = "flex";
console.log('winNumber wins!');
} else {}
};
I wrote a simplified js only version of your game here since I don't have html at hand, but I am sure you can adjust it to your environment.
Main difference: I check if someone won and use return to stop the function
If no one won and autoplay is activated I autoplay after 500ms again.
let playerA = 0
let playerB = 0
let autoPlay = true
let bestOf = 3
function myFunction() {
let random = Math.floor((Math.random() * 6) + 1);
let random2 = Math.floor((Math.random() * 6) + 1);
console.log("New Round " + random + " vs " + random2)
if (random > random2) {
playerA++
} else if (random2 > random) {
playerB++
} else {
console.log("Draw");
}
if (playerA > playerB) {
console.log("a is winning")
} else if (playerB > playerA) {
console.log("b is winning")
} else {
console.log("There has been a draw")
}
if (playerA == bestOf) {
console.log('A won');
return
} else if (playerB == bestOf) {
console.log('B won');
return
}
if (autoPlay) {
setTimeout(myFunction, 500)
};
};
myFunction()
Hey so here is an example of what ive written (in javascript)
function checkCardOne(){
if(animalNums[0].animal.textContent === findArray[0].div.textContent){
animalNums[0].animal.style.display = "block"
animalNums[0].animal.classList.add("animate");
setTimeout(function(){animalNums[0].animal.classList.remove("animate");},1001)
score += 1
document.getElementById("scoreP").innerHTML = `Score: ${score}`
}
else if(animalNums[0].animal.textContent === findArray[1].div.textContent){
animalNums[0].animal.style.display = "block"
animalNums[0].animal.classList.add("animate");
setTimeout(function(){animalNums[0].animal.classList.remove("animate");},1001)
score += 1
document.getElementById("scoreP").innerHTML = `Score: ${score}`
}
else if(animalNums[0].animal.textContent === findArray[2].div.textContent){
animalNums[0].animal.style.display = "block"
animalNums[0].animal.classList.add("animate");
setTimeout(function(){animalNums[0].animal.classList.remove("animate");},1001)
score += 1
document.getElementById("scoreP").innerHTML = `Score: ${score}`
}
else{
animalNums[0].animal.style.display = "block"
animalNums[0].animal.classList.add("animate");
setTimeout(function(){animalNums[0].animal.classList.remove("animate");
animalNums[0].animal.style.display = "none";},1001
)
score -= 1
document.getElementById("scoreP").innerHTML = `Score: ${score}`
}
}
I want to slim this down as I have 12 of these functions and my js file is over 700 lines long
I want to be able to say : if(animalNums[0].animal.textContent === findArray[0].textContent || findArray[1].textContent || findArray[2].textContent)
All in one line instead of three else if.
Can someone help ive tried afew different things but they haven't worked.
There's quite a bit of duplicated code here, a lot of which gets executed no matter what your conditionals evaluate to. Seems to me this does the same thing:
function checkCardOne() {
if (
findArray
.slice(0, 3)
.some(elt => elt.div.textContent === animalNums[0].animal.textContent)
) {
score += 1;
} else {
score -= 1;
}
animalNums[0].animal.style.display = "block";
animalNums[0].animal.classList.add("animate");
setTimeout(function() {
animalNums[0].animal.classList.remove("animate");
}, 1001);
document.getElementById("scoreP").innerHTML = `Score: ${score}`;
}
I don't know if findArray has more than 3 elements, if it doesn't then you can take out the .slice(0,3)
I created a simple program that contains two buttons "higher" that adds 1 to the number and "lower" that subtracts 1 from the same number. When the number is negative it must change its color to red and when it is positive it must become green but that doesn't work.
Here's the javascript
let num = 0;
function higher() {
num ++;
document.getElementById("number").innerHTML = num;
}
function lower() {
num --;
document.getElementById("number").innerHTML = num;
}
// (conditionals statements below do not work for an unknown reason)
if (num < 0) {
document.getElementById("number").style.color = "red";
} else if (num > 0) {
document.getElementById("number").style.color = "green";
}
Here's the Html body
<body>
<div class="counter">
<div id="number">0</div>
<button onmousedown="higher()" class="btn_high">Higher</button>
<button onclick="lower()" class="btn_low">Lower</button>
</div>
</body>
Here's an example of how the program should look
https://romeojeremiah.github.io/Counter-Project/
You have to put the conditional statement inside a function and then call that function on each button click like this
let num = 0;
function higher() {
num ++;
document.getElementById("number").innerHTML = num;
colorChange();
}
function lower() {
num --;
document.getElementById("number").innerHTML = num;
colorChange();
}
function colorChange(){
if (num < 0) {
document.getElementById("number").style.color = "red";
} else if (num > 0) {
document.getElementById("number").style.color = "green";
}
}
Nothing is calling the code at the end, so you'll never see those results. Try wrapping your conditional in a function, then calling that function at the end of higher() and lower(). For example:
let num = 0;
function higher() {
num++;
document.getElementById("number").innerHTML = num;
checkNumberAndApplyStyles();
}
function lower() {
num--;
document.getElementById("number").innerHTML = num;
checkNumberAndApplyStyles();
}
function checkNumberAndApplyStyles() {
if (num < 0) {
console.log('under')
document.getElementById("number").style.backgroundColor = "red";
} else if (num > 0) {
document.getElementById("number").style.color = "green";
}
I am writing a simple n-back game, and at the end of a session I have an alert message popping up to tell the user their n-back level is being increased if they score 75% or better. For some reason though, after the user clicks OK or hits enter, the setInterval function seems to be running through one more time. On the grid I have created, one more square lights up, even though the session is supposed to be over. I will post the relevant game code below:
$('#start').click(function()
{
let counter = 0;
message_switch = true;
$('#start').blur();
$('#score-output').text(0);
$('#percentage').text('%');
var intervalID = setInterval(function()
{
counter++;
show_card(get_cardID(cardIDs));
if (counter === 30)
{
window.clearInterval(intervalID);
message_switch = false;
var score = Math.round((playerMatches.length / matches.length) * 100);
score = score - (error_count * 3);
update_score(score);
if (score < 50)
{
if (n_back < 2)
{
n_back = 1;
} else {
n_back = n_back - 1;
}
} else if (score < 75 && score >= 50)
{
n_back = n_back;
} else if (score >= 75) {
n_back = n_back + 1;
};
$('#nback').text(n_back);
reset_game_values();
if (score >= 75) //here there is some issue
{
window.alert("Congratulations, you will move up to " + n_back + " back.");
score = 0;
return;
} else {
score = 0;
}
}
}, 3500);
})
I know this is a lot of code and there is also a lot of code I haven't provided, mainly just in an attempt to be brief. Does anyone see anything obvious that I am not seeing? If you feel you need to see more of the program I can provide it. Thanks.
This works, but the problem is it works only one time -- and then class ('active') is never added again -- it needs to be removed after 5 clicks as as done with the below, but after 5 it needs to reset and I would like the counter to go back to 0 so that after another 5 clicks it could work again!
var clickCount = 0;
$(".arrowRight").click(function () {
clickCount++;
if (clickCount >= 5)
// alert ("stop it!");
$(".arrowRight").removeClass("active");
else {
$(".arrowRight").addClass("active");
}
});
just set clickCount = 0 in the if statement
if (clickCount >= 5)
clickCount = 0;
$(".arrowRight").removeClass("active");
else {
$(".arrowRight").addClass("active");
}
Will something like this work?
var clickCount = 0;
$(".arrowRight").click(function () {
clickCount++;
if (clickCount >= 5) {
clickCount = 0;
$(".arrowRight").removeClass("active");
}
else {
$(".arrowRight").addClass("active");
}
});
This is another option:
if (clickCount%5==0) {
$(".arrowRight").removeClass("active");
} else {
$(".arrowRight").addClass("active");
}