CSS Animation Won't Trigger a Second Time

CSS Animation Won't Trigger a Second Time - javascript

I'm trying to make a little game. Kinda stupid, but I want there to be this random event that pops up and does a little CSS Keyframe animation. The end goal is to get it to pop up when the random event triggers, and then go away when the animation is over. When running the code, I can get it to work the first time, but the second time the animation doesn't trigger and only the text shows up. Any ideas?
var myFood = document.getElementById("myFood");
var myWood = document.getElementById("myWood");
var myGold = document.getElementById("myGold");
var myButton = document.getElementById("myButton");
var output = document.getElementById("output");
var randomFoodEvent = document.getElementById("event");
var foodCount = 0;
var woodCount = 0;
var goldCount = 0;
myButton.addEventListener("click", buttonClick, false);
window.addEventListener("keydown", keydownHandler, false);
function keydownHandler(event) {
console.log("keyCode = " + event.keyCode);
if (event.keyCode === 13) {
buttonClick();
} else if (event.keyCode === 70) {
foodCount++;
myFood.innerHTML = "<strong>F</strong>ood: " + foodCount;
var randomFoodNum = Math.floor(Math.random() * 100) + 1;
if (randomFoodNum === 50) {
randomFoodEvent.className = "playEvent";
randomFoodEvent.innerHTML = "Some villagers stole your food!";
foodCount = foodCount - 25;
}
} else if (event.keyCode === 87) {
woodCount++;
myWood.innerHTML = "<strong>W</strong>ood: " + woodCount;
} else if (event.keyCode === 71) {
goldCount++;
myGold.innerHTML = "<strong>G</strong>old: " + goldCount;
}
}
randomFoodEvent.addEventListener("animationend", function() {
randomFoodEvent.classList.remove = "playEvent";
randomFoodEvent.innerHTML = "";
});
function buttonClick() {
console.log("Button Clicked!");
if ((foodCount >= 100) && (woodCount >= 100) && (goldCount >= 100)) {
output.textContent = "You win!";
}
}
/* The animation code */
#keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
/* The element to apply the animation to */
.playEvent {
animation-name: example;
animation-duration: 4s;
}
<h1>Buttons and Keyboard Events</h1>
<p id="output">
Get 100 Food, 100 Wood, and 100 Gold to Win the Game!
</p>
<p id="myFood"><strong>F</strong>ood: 0</p>
<p id="myWood"><strong>W</strong>ood: 0</p>
<p id="myGold"><strong>G</strong>old: 0</p>
<p id="event">
</p>
<button id="myButton">Click Me to Win</button>
Sorry that there's a lot of code, I couldn't think of a better way to show what I'm trying to do without showing the whole thing.
Thanks!
EDIT: Heres a JSFiddle

Syntax error randomFoodEvent.classList.remove("playEvent");
var myFood = document.getElementById("myFood");
var myWood = document.getElementById("myWood");
var myGold = document.getElementById("myGold");
var myButton = document.getElementById("myButton");
var output = document.getElementById("output");
var randomFoodEvent = document.getElementById("event");
var foodCount = 0;
var woodCount = 0;
var goldCount = 0;
myButton.addEventListener("click", buttonClick, false);
window.addEventListener("keydown", keydownHandler, false);
function keydownHandler(event) {
console.log("keyCode = " + event.keyCode);
if (event.keyCode === 13) {
buttonClick();
} else if (event.keyCode === 70) {
foodCount++;
myFood.innerHTML = "<strong>F</strong>ood: " + foodCount;
var randomFoodNum = Math.floor(Math.random() * 100) + 1;
if (randomFoodNum === 50) {
randomFoodEvent.className = "playEvent";
randomFoodEvent.innerHTML = "Some villagers stole your food!";
foodCount = foodCount - 25;
}
} else if (event.keyCode === 87) {
woodCount++;
myWood.innerHTML = "<strong>W</strong>ood: " + woodCount;
} else if (event.keyCode === 71) {
goldCount++;
myGold.innerHTML = "<strong>G</strong>old: " + goldCount;
}
}
randomFoodEvent.addEventListener("animationend", function() {
randomFoodEvent.classList.remove("playEvent");
randomFoodEvent.innerHTML = "";
});
function buttonClick() {
console.log("Button Clicked!");
if ((foodCount >= 100) && (woodCount >= 100) && (goldCount >= 100)) {
output.textContent = "You win!";
}
}
/* The animation code */
#keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
/* The element to apply the animation to */
.playEvent {
animation: example 4s 1;
}
<!doctype.html>
<html>
<head>
<title>
Keyboards and Buttons
</title>
</head>
<body>
<h1>Buttons and Keyboard Events</h1>
<p id="output">
Get 100 Food, 100 Wood, and 100 Gold to Win the Game!
</p>
<p id="myFood"><strong>F</strong>ood: 0</p>
<p id="myWood"><strong>W</strong>ood: 0</p>
<p id="myGold"><strong>G</strong>old: 0</p>
<p id="event">
</p>
<button id="myButton">Click Me to Win</button>
</body>
</html>

Related

How to make a click on the button change its color in Javascript

I am making a small game where in I have 50 buttons and when I click on any one of the button, its color changes and amongst them, I have one button which is blue in color. If the player clicks on that blue button, he is a winner. He will be given only three chances. I have used a button eventhandler that takes the color id and accordingly changes the color. But the colorId from the count is 51 and not amongst the 1 - 50 buttons. What is wrong?
<html>
<head>
<title>Blue-Box</title>
</head>
<body>
<script>
var colorId;
var button;
var noOfTries = 3;
function createButtons() {
colorId = 0;
for (var index = 0; index <= 50; index++) {
button = document.createElement("button");
button.innerHTML = "box " + index;
button.id = colorId;
button.setAttribute("value", colorId);
button.setAttribute("text", colorId);
button.style.fontFamily = "Times New Roman";
button.style.backgroundColor = "#C0C0C0";
button.style.fontSize = "15px";
document.body.appendChild(button);
colorId++;
button.addEventListener("click", selectColor);
}
}
function selectColor() {
console.log((colorId));
console.log("button click");
if (noOfTries > 0) {
noOfTries = noOfTries - 1;
if ((colorId) <= 24) {
console.log("red color")
document.getElementById(colorId).style.backgroundColor = "#BC8F8F";
}
else if (colorId == 25) {
console.log("blue color")
document.getElementById(colorId).style.backgroundColor = "#0099CC";
document.write("You Won the game");
noOfTries = 3;
}
else if (colorId > 25 && colorId < 51) {
document.getElementById(colorId).style.backgroundColor = "#008080";
}
}
else {
document.write("Your attempts have finished");
}
}
</script>
<div id="divbox">
<button id="buttonbox" onclick="createButtons()">Click to start the Game</button>
</div>
</body>
</html>

Hope this helps you.
<html>
<head>
<title>Blue-Box</title>
</head>
<body>
<script>
var colorId = 1;
var button;
var lives = 0;
function createButtons(){
colorId=0;
for(var index=1;index<=50;index++){
button=document.createElement("button");
button.innerHTML="box "+index;
button.id=colorId;
button.setAttribute("value",colorId);
button.setAttribute("text",colorId);
button.style.fontFamily="Times New Roman";
button.style.backgroundColor="#C0C0C0";
button.style.fontSize="15px";
button.addEventListener("click", function(){
selectColor(this.id);
})
document.getElementById("btnbox").appendChild(button);
colorId++;
}
}
function selectColor(colorId){
lives++;
if(lives < 4){
if (colorId<=24){
document.getElementById(colorId).style.backgroundColor="#BC8F8F";
}
else if (colorId==25){
document.getElementById(colorId).style.backgroundColor="#0099CC";
alert("Winner");
location.reload();
}
else{
document.getElementById(colorId).style.backgroundColor="limegreen";
}
}
else if(lives == 4){
alert("Game over!");
location.reload();
}
}
</script>
<div id="divbox">
<button id="buttonbox" onclick="createButtons()">Click to start the Game</button>
</div>
<div id="btnbox">
</div>
</body>

// first add a global variable
var noOfTries = 3;
function selectColor() {
// check if greater than 3
if(noOfTries > 0) {
// if yes, then decrement
noOfTries = noOfTries - 1;
// continue with the color change
if (colorId<=24) {
document.getElementById(colorId).style.backgroundColor="#BC8F8F";
}
else if (colorId==25) {
document.getElementById(colorId).style.backgroundColor="#0099CC";
}
else {
document.getElementById(colorId).style.backgroundColor="limegreen";
}
}
}

Use:
button.addEventListner("click",function() {
button.style.backgroundColor=nextColor;
})

Snake game - my snake leaves a trail on every move

I’m having trouble getting my snake to turn and not leave a trail. Every time my snake turns to go in a different direction it leaves behind pieces of itself. Each piece is a class of “hover” applied to a div block.
I created a function that I hoped would remove the excess pieces whenever a turn was made. My function removeExtra does remove the excess pieces on every turn (removeExtra is called from the moveSnake function each time an arrow is hit), but it also removes every piece of the snake when it turns. So every time I make a turn the snake starts over in that direction and then expands to its current size. A user could play and never run into any of the snake’s body pieces. If I don’t use this function though it leaves little snake turds all over the board!
Can someone help me fix my removeExtra function so that it only removes the class of hover that is not part of the snake body’s array? (var snake) In the removeExtra function I create an array of every hover class (every snake piece). I then use the length of this in the for loop. I have also tried using the difference between this array and the current snake array (var combo) as the second parameter of the for loop, but this doesn’t consistently clear the snake bits when I make turns.
I realize my code sucks. I’ve made this way more complicated than it should be. I should have used a canvas. But I’ve come this far, and I’m hoping there’s some way to salvage the game and never think about snakes again. If there really is no way to fix the mess I’ve made, just let me know, so that I can move on with my life. Thanks!
Here is the Codepen with the game.
Here is the function that's giving me trouble:
removeExtra = function(){
var array = [];
$(".hover").each(function() {
array.push($(this).attr("data"));
});
var len = array.length
var len2 = snake.length
var combo = len-len2
for (var i=0;i<len;i++){
$('*[data="' + array[i] + '"]').removeClass("hover");
}}
Since this is a work-in-progress (surprise!), just refresh the page if you don’t see any blue “food” pieces. Arrows keys will move the snake. You might have to click the board first.
//In the moveSnake function I had to use code from the below link in order to ignore multiple keydown events.
//https://stackoverflow.com/questions/9098901/how-to-disable-repetitive-keydown-in-jquery
$(document).ready(function() {
makebox();
addSnake();
moveSnake();
addBorder();
addFood();
killSnake();
addToSnake();
});
function makebox() {
var size = 30; //24
var boxSize = 20; //12
for (i = 1; i <= size * size; i++) {
$("#container").append("<div class='box'></div>");
};
$("#container").width(size * boxSize + "px");
$(".box").width(boxSize + "");
$(".box").height(boxSize + "px");
$(".box").each(function(i) {
$(this).attr('data', (i + 1));
});
};
function addBorder() {
//find all of the border divs and add a border class to them
$(".box").each(function() {
if ($(this).attr('data') % 25 == 0) {
$(this).addClass("right-border")
} else if ($(this).attr('data') % 25 == 1) {
$(this).addClass("left-border")
} else if ($(this).attr('data') < 25) {
$(this).addClass("top-border")
} else if ($(this).attr('data') >= 877) {
$(this).addClass("bottom-border")
}
})
}
function addSnake() {
var rightTime, leftTime, downTime, upTime;
moveRight = function() {
down = {}
rightTime = setInterval(function() {
for (var i = 0; i < snake.length; i++) {
snake[i]++
$('*[data="' + snake[i] + '"]').addClass("hover moving")
$('*[data="' + (snake[snake.length - 1] - snake.length) + '"]').removeClass("hover");
}
}, 150)
};
moveLeft = function() {
down = {}
leftTime = setInterval(function() { //snake -= 1
for (var i = 0; i < snake.length; i++) {
snake[i] -= 1
$('*[data="' + snake[i] + '"]').addClass("hover");
$('*[data="' + (snake[snake.length - 1] + snake.length) + '"]').removeClass("hover");
}
}, 150)
};
moveDown = function() {
down = {}
downTime = setInterval(function() { //snake += 25
for (var i = 0; i < snake.length; i++) {
snake[i] += 25
$('*[data="' + snake[i] + '"]').addClass("hover");
$('*[data="' + (snake[snake.length - 1] - 25 * snake.length) + '"]').removeClass("hover");
}
}, 150)
};
moveUp = function() {
down = {}
upTime = setInterval(function() { //snake -= 25
for (var i = 0; i < snake.length; i++) {
snake[i] -= 25
$('*[data="' + snake[i] + '"]').addClass("hover");
$('*[data="' + (snake[snake.length - 1] + 25 * snake.length) + '"]').removeClass("hover");
}
}, 150)
};
addTail = function() {
snake.push(snake[snake.length - 1])
}
var snake = [42]
$('*[data="' + snake[0] + '"]').addClass("hover");
var down = {};
removeExtra = function() {
var array = [];
$(".hover").each(function() {
array.unshift($(this).attr("data"));
});
var len = array.length
var len2 = snake.length
var combo = len - len2
for (var i = 0; i < len; i++) {
$('*[data="' + array[i] + '"]').removeClass("hover");
}
}
moveSnake = function() {
$(document).keydown(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '39') {
if (down['39'] == null) {
window.clearInterval(leftTime);
window.clearInterval(downTime);
window.clearInterval(upTime);
moveRight();
removeExtra();
down['39'] = true;
}
} else if (keycode == '37') {
if (down['37'] == null) {
window.clearInterval(rightTime);
window.clearInterval(downTime);
window.clearInterval(upTime);
moveLeft();
removeExtra();
down['37'] = true;
}
} else if (keycode == '40') {
if (down['40'] == null) {
window.clearInterval(leftTime);
window.clearInterval(rightTime);
window.clearInterval(upTime);
moveDown();
removeExtra();
down['40'] = true;
}
} else if (keycode == '38') {
if (down['38'] == null) {
window.clearInterval(leftTime);
window.clearInterval(rightTime);
window.clearInterval(downTime);
moveUp();
removeExtra();
down['38'] = true;
}
}
});
addToSnake = function() {
var count = 0;
var config = {
attributes: true,
childList: true,
characterData: true
};
$(".box, .food").each(function() {
var target = this;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if ($(".food").hasClass("hover") == true) {
$(".box").removeClass("food")
addTail();
addFood();
}
});
});
observer.observe(target, config);
});
}
killSnake = function() {
var config = {
attributes: true,
childList: true,
characterData: true,
subtree: true
};
$(".right-border, .left-border, .top-border, .bottom-border").each(function() {
var target = this;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log("Game over!")
});
});
observer.observe(target, config);
});
}
}
addFood = function() {
var random = Math.floor(Math.random() * (900 - 1 + 1)) + 1;
$('*[data="' + random + '"]').addClass("food")
};
};
.box {
display: inline-block;
border: 2px grey solid;
}
#container {
display: block;
border: 2px black solid;
border-radius: 5px;
font-size: 0;
margin: 10px auto;
}
.hover {
background-color: black;
}
.food {
background-color: blue;
}
.white {
background-color: white;
}
.right-border,
.left-border,
.top-border,
.bottom-border {
background: red;
border: 2px red solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Snake</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<center>
<h1>Snake</h1>
<div id="container"></div>
</center>
</div>
</body>
</html>

How to pulse an image and change the rate of pulsing?

I think this is working but not really. I also don't think that it is the best approach.
The timer serves as another function running while having the ability to change the pulsing rate of the image.
I have tried to use gifs instead of because they have different speeds, there isn't a smooth transition when switching between images.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<style>
#red-square {
position: absolute;
display: inline-block;
z-index: 1;
top : 200px;
right: 200px;
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="result"></div>
<div id="red-square"></div>
<button onclick="speedOne();">speed one</button>
<button onclick="speedTwo();">speed two</button>
<button onclick="speedThree();">speed three</button>
<script>
var counter = 0,
stopTimeoutTwo = null,
stopTimeoutThree = null,
currentSpeed = "speed one";
function runCounter() {
counter++;
result.textContent = counter;
if(currentSpeed == "speed one") {
if((counter%60) == 0) {
$("#red-square").hide();
}else if((counter%60) != 0) {
$("#red-square").show();
}
}
else if(currentSpeed = "speed two") {
if((counter%45) == 0) {
$("#red-square").hide();
}else if((counter % 45) != 0) {
$("#red-square").show();
}
}else if(currentSpeed = "speed three") {
if((counter%30) == 0) {
$("#red-square").hide();
}else if((counter%30) != 0) {
$("#red-square").show();
}
}
if(counter < 1e5) timer = setTimeout(runCounter, 0);
}
runCounter();
function stepOne() {
currentSpeed = "speed one";
}
function stepTwo() {
currentSpeed = "speed two";
}
function stepThree() {
currentSpeed = "speed three";
}
</script>
</body>
</html>

You can use setInterval to create your efect like so: Fiddle!
This is the JS I used:
var speed = 4000;
var inter;
var square = document.getElementById("red-square");
square.style.backgroundColor = "red";
function myTime(){
inter = setInterval(function(){
console.log(square.style.backgroundColor+" "+speed);
if(square.style.backgroundColor == "red"){
square.style.backgroundColor = "blue";
}
else{
square.style.backgroundColor = "red";
}
}, speed);
}
function changSpeed(s){
clearInterval(inter);
speed = s;
inter=null;
myTime();
}
myTime();
the rest is your code.

How to Animate Show / Hide Div with Javascript

I am trying to animate a show / div using javascript. The code works fine but i want it to open and close at 500 speed.
The code i have is this:
<a id="show-map" href="javascript:toggle();">Show Map</a>
<div id="top-map" style="display: none">
<h2>Hello</h2>
</div>
<script language="javascript">
function toggle() {
var ele = document.getElementById("top-map"),
text = document.getElementById("show-map");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show Map";
} else {
ele.style.display = "block";
text.innerHTML = "Hide Map";
}
}
</script>

Based on an example posted by keypaul here I've adapted your code and shortened the example a bit for you:
<a id="show-map" href="javascript:toggle();">Show Map</a>
<div id="top-map" style="display: none">
<h2>Hello</h2>
</div>
<script language="javascript">
var ele = document.getElementById("top-map"),
text = document.getElementById("show-map");
function setTime(state) {
if (state === "out") {
for (var i = 1; i <= 100; i++) {
setTimeout("fadeOut(" + (100 - i) + ")", i * 5);
}
} else {
for (var i = 1; i <= 100; i++) {
setTimeout("fadeIn(" + (0 + i) + ")", i * 5);
}
}
}
function fadeOut(opacity) {
ele.style.opacity = opacity / 100;
if (opacity === 1) {
ele.style.display = "none";
}
}
function fadeIn(opacity) {
ele.style.opacity = opacity / 100;
if (opacity === 1) {
ele.style.display = "block";
}
}
function toggle() {
if(ele.style.display == "block") {
setTime("out");
text.innerHTML = "Show Map";
} else {
setTime("in");
text.innerHTML = "Hide Map";
}
}
</script>

you need to use time functions like setInterval or requestAnimationFrame
here is an example of setInterval
//to fade out
fadeout_interval = setInterval(function(el){
el.style.opacity -= 0.1;
if(el.style.opacity<=0) clearInterval(fadeout_interval);
}, 30, ele);
alternatively you can use css to do the same thing

How do I get my arrow widget to rotate back to start on second click

After following two YouTube lessons, I now have a nice arrow widget that fades in, rotates to 180 degrees and fades out controlled from one button. I do not know how to make the arrow rotate back to 0 on the second click of this button.
Probably not the most elegant of code, but here we are:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fade In and Out</title>
<style type="text/css">
div.contentbox {
width: 50px;
height: 50px;
padding: 20px;
opacity: 0;
}
</style>
<script type="text/javascript">
var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element) {
var target = document.getElementById(element)
target.style.display = "block";
var newSetting = fade_in_from / 10;
target.style.opacity = newSetting;
fade_in_from++;
if(fade_in_from == 10) {
target.style.opacity = 1;
clearTimeout(loopTimer);
fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')', 50);
}
function fadeOut(element) {
var target = document.getElementById(element)
var newSetting = fade_out_from / 10;
target.style.opacity = newSetting;
fade_out_from--;
if(fade_out_from == 0) {
target.style.opacity = 0;
clearTimeout(loopTimer);
fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')', 50);
}
var looper;
var degrees = 0;
function rotateAnimation(el,speed)
{
var elem = document.getElementById(el);
if(navigator.userAgent.match("Chrome")){
elem.style.WebkitTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Firefox")){
elem.style.MozTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("MSIE")){
elem.style.msTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Opera")){
elem.style.OTransform = "rotate("+degrees+"deg)";
} else {
elem.style.transform = "rotate("+degrees+"deg)";
}
looper = setTimeout ('rotateAnimation(\''+el+'\','+speed+')',speed);
degrees++;
if(degrees > 179){
clearTimeout(looper)
}
}
</script>
</head>
<body>
<button onmouseover="fadeIn('arrow_box')": onmouseout="fadeOut('arrow_box')": onclick="rotateAnimation('arrow',5)">fade in/out</button>
<div id="arrow_box" class="contentbox"><img id="arrow" img src="images/Arrow.png" width="50" height="50" alt="Arrow" /></div>
</body>
</html>
Please help.

Create a new variable to remember the direction and then increment or decrement the degrees depending on which direction you want to go.
Here is a JSfiddle link of a working solution.
var looper;
var degrees = 0;
var direction = 0;
function rotateAnimation(el,speed){
var elem = document.getElementById(el);
if(navigator.userAgent.match("Chrome")){
elem.style.WebkitTransform = "rotate("+degrees+"deg)";
}else if(navigator.userAgent.match("Firefox")){
elem.style.MozTransform = "rotate("+degrees+"deg)";
}else if(navigator.userAgent.match("MSIE")){
elem.style.msTransform = "rotate("+degrees+"deg)";
}else if(navigator.userAgent.match("Opera")){
elem.style.OTransform = "rotate("+degrees+"deg)";
}else {
elem.style.transform = "rotate("+degrees+"deg)";
}
looper = setTimeout
('rotateAnimation(\''+el+'\','+speed+')',speed);
if(direction === 0){
degrees++;
if(degrees > 179){
direction = 1;
clearTimeout(looper);
}
}else {
degrees--;
if(degrees < 1){
direction = 0;
clearTimeout(looper);
}
}
}

Develop Reference

JavaScript is the programming language of the Web.

CSS Animation Won't Trigger a Second Time - javascript

Related

How to make a click on the button change its color in Javascript

Snake game - my snake leaves a trail on every move

How to pulse an image and change the rate of pulsing?

How to Animate Show / Hide Div with Javascript

How do I get my arrow widget to rotate back to start on second click

Categories

Resources