Good day all, I'm trying to make a jquery game where a group of enemy will spawn after a group of enemy gets destroyed. I'm calling alien_cruiser() function & unbinding minion_roulette() function after minion_roulette_counter gets 0. But every time I run, function does not get unbind & after counter gets 0 both type of enemies show. I want to run them one by one. Here are the codes:
var sound = new Audio("sounds//dishoom.ogg");
var score = 0;
var minion_roulette_life = 10;
var cruiser_life = 20;
var minion_roulette_counter = 3;
var cruiser_counter = 3;
function processBullet() {
$(".projectile").each(function() {
var maxTop = $(this).offset().top;
var breakable1 = $(this).collision("#minion-roulette");
var breakable2 = $(this).collision("#cruiser");
$(this).css("top", maxTop - 25);
if (breakable1.length != 0 || breakable2.length != 0) {
$(this).remove();
}
if (maxTop <= 35) {
$(this).remove();
}
if (breakable1.length != 0) {
--minion_roulette_life;
if (minion_roulette_life == 0) {
sound.play();
breakable1.remove();
minion_roulette(true);
minion_roulette_counter--;
$("#score").html(++score);
minion_roulette_life = 10;
}
}
//This is the place where it checks if counter is 0 or not
if (minion_roulette_counter == 0) {
$('#content').unbind(function() {
minion_roulette(false)
});
alien_cruiser(false);
minion_roulette_counter = -1;
}
if (breakable2.length != 0) {
--cruiser_life;
if (cruiser_life == 0) {
sound.play();
breakable2.remove();
alien_cruiser(true);
$("#score").html(++score);
cruiser_life = 20;
}
}
});
}
Am I doing any wrong here? Please I need a solution badly. Tnx.
In this situation, you could use a conditional statement to determine which function to call.
For example:
if (minion_roulette_counter == 0) {
alien_cruiser();
}
else {
minion_roulette();
}
Binding and unbinding doesn't 'turn off' a function, unfortunately. To quote MDN:
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
– MDN: 'Bind'
Related
The 'Win' and 'Draw' parts are showing up on time, but the 'Lost' part doesn't show the message 'you lost'until I click on an empty cell once again. Please check out my code and help me find any errors.
Below is my code:
Marked is a class that changes the opacity of the clicked cell.
1,2,3...are the id's of respective cells in the table(html).
I tried delay() too instead of setTimeout(), but it didn't work as well.
$(document).ready(function() {
var timer;
var x = 0;
$("td").click(function() {
if($(this).text()=='') {
$(this).text("0").addClass("marked");
x = 1;
}
}).click(function() {
if(x==1) {
timer = setTimeout(function() {
var choose = $("td").not(".marked");
var random = choose[Math.floor(Math.random()*choose.length)];
$(random).text("X").addClass("marked");
},1000);
x=0;
showResult();
}
});
function showResult() {
var one = $("#1").text();
var two = $("#2").text();
var three = $("#3").text();
var four = $("#4").text();
var five = $("#5").text();
var six = $("#6").text();
var seven = $("#7").text();
var eight = $("#8").text();
var nine = $("#9").text();
if(one==two && two==three)
result(one)
else if (four==five && five==six)
result(four)
else if(seven==eight && eight==nine)
result(seven)
else if (one==four && four==seven)
result(one)
else if (two==five && five==eight)
result(two)
else if (three==six && six==nine)
result(three)
else if (one==five && five==nine)
result(one)
else if(three==five && five==seven)
result(three);
else {
var z = $("td").not(".marked");
if(z.length == 0) {
$("p").text("Draw!");
$("td").removeClass("marked");
$("td").text("");
$("#demo1").append('<img src="https://media.tenor.com/images/54c63f726505bfdb455eb4c29e626ad8/tenor.gif">');
clearTimeout(timer);
}
}
}
function result(y) {
var result = y;
if(result=="X"){
clearTimeout(timer);
$("p").text("You Lost!");
$("td").removeClass("marked");
$("td").text("");
$("#demo1").append('<img src="https://media.tenor.com/images/08902a85a6107684f8614846f4a54218/tenor.gif">');
}
if(result=="0") {
$("td").text("");
$("p").text("You Won!");
$("#demo1").append('<img src="https://i.gifer.com/4OuC.gif">');
$("td").removeClass("marked");
clearTimeout(timer);
}
}
});
You are calling showResult immeadiately when the user clicked, so it cant't recognize the X put into the table one second later.
Just do:
$("td").click(function() {
[...]
}).click(function() {
if (x == 1) {
timer = setTimeout(function() {
var choose = $("td").not(".marked");
var random = choose[Math.floor(Math.random() * choose.length)];
$(random).text("X").addClass("marked");
/******** ADD ANOTHER CHECK HERE ********/
showResult();
}, 1000);
x = 0;
showResult();
}
});
It might also be a good idea to add a return to showResult that returns false when a result was achieved. This way you could do something like
x = 0;
if (showResult()) {
timer = setTimeout(function() {
[...]
}
}
And the user can't get a loose message right after a win message.
Also: Why do you need the 2 click listeners? You can just use the if statement in the top one and then you don't need the (x == 1)
I want to implement some logic in my Javascript animation, but wherever I try to implement it, it never works. I am trying to make my navigationOpen true when the animation is done. But what happens is when I set it in the renderSlideOutAnimation() the if statement runs before the renderSlideOutAnimation function.
function openSlideNavigation() {
var navigationSlideOut = document.getElementById("navigation-slide");
var naviationTrigger = document.getElementById('menu-dots');
var navigationOpen = true;
function renderSlideOutAnimation() {
var widthValue = 0;
var interval = setInterval(frame, 17.5);
function frame() {
if (widthValue == 100) {
clearInterval(interval);
} else {
widthValue++
navigationSlideOut.style.width = widthValue + "vw"
}
}
}
if (navigationOpen == true){
renderSlideOutAnimation();
}
}
Im trying to get an animation on mouseenter and stop animation on mouseleave, but I'm onlny getting one cycle instead of a full cycle on mouseenter. Must be doing something wrong.
https://jsfiddle.net/b6kezaku/7/ here is a fragment.
var arrowUpFirst = document.getElementsByClassName('turn_up_svg')[0]
var arrowUpTransform = window.getComputedStyle(arrowUpFirst, null).getPropertyValue('transform')
var arrowUpTransformScale = arrowUpTransform.split(',')
var arrowUpValue = typeof arrowUpTransformScale[2] === 'string'
console.log(arrowUpValue)
var arrowNumberUpValue = Number(arrowUpValue) * 100
console.log(typeof arrowNumberUpValue === 'number')
var a = 'start'
var c = 'stop'
var fullCycle = 100
function up_svg(b) {
if (a == b) {
requestAnimationFrame(up_svg)
}
if (c == b) {
cancelAnimationFrame(up_svg)
}
if (arrowNumberUpValue <= 100 && arrowNumberUpValue >= 50) {
fullCycle--
fullCycle <= 75 ? arrowNumberUpValue++ : arrowNumberUpValue--
//document.querySelectorAll('p')[1].textContent = arrowNumberUpValue
var trans = "scale(" + (arrowNumberUpValue / 100).toPrecision(2) + ") rotate(-90deg)"
//document.querySelectorAll('p')[3].textContent = (arrowNumberUpValue/100).toPrecision(2)
arrowUpFirst.style.transform = trans
if (fullCycle < 52) {
fullCycle = 100
arrowNumberUpValue = 100
//document.querySelectorAll('p')[2].textContent = arrowNumberUpValue
}
}
}
//FirstFace.onmouseenter = up_svg
FirstFace.addEventListener('mouseenter', function() {
up_svg('start')
}, false)
//FirstFace.addEventListener('mouseenter', up_svg,false)
//FirstFace.addEventListener('mouseleave', up_svg.bind(null,'stop'),false)
FirstFace.addEventListener('mouseleave', function() {
up_svg('stop')
}, false)
The problem I see is that when requestAnimationFrame invokes up_svg, it doesn't pass a value for b, so you don't trigger a second requestAnimationFrame.
Consider doing the following:
function loopAnimation() {
requestAnimationFame(loop)
// run animation
}
function startAnimation() {
// cancel to prevent duplication
cancelAnimationFrame(loopAnimation)
requestAnimationFame(loopAnimation)
}
function stopAnimation() {
cancelAnimationFrame(loopAnimation)
}
FirstFace.addEventListener('mouseenter', startAnimation,false)
FirstFace.addEventListener('mouseexit', stopAnimation,false)
In this case, up_svg gets split into three functions. One is dedicated to carrying out the animation and preserving it, while the other two can start or stop the loop.
It seems that when requestAnimationFrame(up_svg); runs the callback, it is passed a numerical value, so because b is neither 'start' or 'stop', it doesn't refresh again or ask again to requestAnimationFrame(up_svg);. Here is a little fix so that the function launches itself again:
in declarations:
var running = false;
in the function:
if(a == b){
running = true;
cancelAnimationFrame(up_svg); //just a precaution
}
if(c == b){
running = false;
cancelAnimationFrame(up_svg)
}else{
if(running){
requestAnimationFrame(up_svg);
}
}
fiddle: https://jsfiddle.net/b6kezaku/10/
Im having trouble getting my second function to react to the changes the first function brings.
var jumbotron = function(){
var jumbotronCounter = 1
var jumbotronSwitch = function(){
var jumbotronTimer = function(){
jumbotronCounter++
}
jumbotronTimer();
if (jumbotronCounter > 3){
jumbotronCounter = 1
}
console.log(jumbotronCounter);
}
setInterval(jumbotronSwitch,7000);
var jumbotronListener = function(){
if(jumbotronCounter = 1){
console.log('first');
}else if(jumbotronCounter = 2){
console.log('second');
}else if(jumbotronCounter = 3){
console.log('third');
}
};
jumbotronListener();
}
jumbotron();
Id like to use "jumbotronListener" to run some code when "jumbotronCounter" changes
jumbotronListener is indeed only running once. You can, instead, run it every time the interval runs:
var jumbotron = function () {
var jumbotronCounter = 1;
var jumbotronSwitch = function () {
var jumbotronTimer = function () {
jumbotronCounter++;
};
jumbotronTimer();
if (jumbotronCounter > 3) {
jumbotronCounter = 1;
}
// Execute the listener every time the interval runs
jumbotronListener();
console.log(jumbotronCounter);
};
setInterval(jumbotronSwitch, 7000);
// Run for the first time if you wish:
jumbotronListener();
// Set this as function so you can 'use it before declaring it'
function jumbotronListener() {
// You had invalid operators. = assigns and === compares (strictly)
if(jumbotronCounter === 1) {
console.log('first');
} else if(jumbotronCounter === 2) {
console.log('second');
} else if(jumbotronCounter === 3) {
console.log('third');
}
}
};
jumbotron();
You also had some missing semicolons in there, sometimes it's not a problem since JavaScript auto-inserts them, but sometimes it is, so it's a good idea to always make sure to manually insert them where they go.
I'm having problems creating a global variable and resetting it through jquery. here is my code
var x = 1;
$(document).ready(function () {
$("#button").click(function () {
if(x === 1) {
alert("test1");
var x = 2;
} else if(x === 2) {
alert("test2");
var x = 3;
} else {
alert("test 3");
}
});
});
I want to be able to click the same button three times and have all the tests appear, but instead it goes straight to the last option "test 3". I apologize if this is a silly question, but I'm a bit new to jquery and javascript.
Just remove the var from the variable assignment inside the click event callback. The var makes the variable local to that scope/closure.
if (x === 1) {
alert("test1");
x = 2;
}
else if (x === 2) {
alert("test2");
x = 3;
}
else {
alert("test 3");
}
As a side point the very first var is not necessary, var x = 1 and x = 1 does the same thing when the code is not in a closure/function. All they are doing is assigning window.x = 1.