I am trying to do my very first simple game.
My question is: why is my game loop not working? If you see the code, I tried to put all the game code inside an if. The idea is: "if game over is false, execute the game, else (when my humanHungerBar reaches 0) the game is over".
Can you help me here? Thanks a lot
<!doctype html>
<html>
<head>
<style>
body {
-webkit-user-select: none;
}
#screen {
position: relative;
left: 480px;
top: 30px;
border: 2px solid black;
height: 500px;
width: 400px;
display: block;
}
#myCash {
position: relative;
width: 90px;
height: 40px;
top: 7px;
left: 5px;
border: 5px solid lightgreen;
text-align: center;
vertical-align: middle;
line-height: 40px;
color: green;
font-weight: bolder;
font-size: 20px;
}
#humanHunger {
position: relative;
width: 90px;
height: 90px;
top: 20px;
left: 280px;
border: 1px solid black;
}
#humanHungerContainer {
position: relative;
width: 100%;
height: 20px;
top: 20px;
border: 1px solid black;
background-color: red;
}
#humanHungerBar {
position: absolute;
width: 76%;
height: 18px;
border: 1px solid green;
background-color: green;
}
#moneyMaker {
position: relative;
width: 300px;
height: 450px;
top: -850px;
left: 100px;
border: 3px solid green;
background-image: url("moneyMakerBackground.png");
}
#jobInstructions {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 20px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#workingHours {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 90px;
left: 22px;
background-color: lightgreen;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
#workCounter {
position: absolute;
width: 60px;
height: 50px;
border: 3px solid orange;
top: 250px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#clickingArea {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 170px;
left: 22px;
background-color: lightgreen;
filter: saturate(100%);
}
#clickingArea:hover {
filter: saturate(190%);
}
#dollar {
position: relative;
left: 80px;
top: 5px;
}
#nakedHuman {
position: absolute;
top: 25px;
left: 120px;
}
#clothesScreen {
position:relative;
top: -400px;
left: 900px;
border: 2px solid black;
width: 300px;
height: 400px;
overflow: auto;
}
#lumberShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#coffeeStainedTShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#regularJeans {
position: absolute;
top: 328px;
left: 145px;
display:none;
}
#lumberShirtMiniContainer {
position: relative;
top: 10px;
left: 10px;
}
#coffeeStainedTShirtMiniContainer {
position: relative;
top: 30px;
left: 10px;
}
#regularJeansMiniContainer {
position: relative;
top: 60px;
left: 20px;
}
#burgerMiniContainer {
position: relative;
top: 90px;
left: 10px;
}
#lumberShirtPrice {
position: absolute;
top: 20px;
left: 100px;
border: 3px solid orange;
width: 50px;
height: 20px;
text-align: center;
vertical-align: middle;
line-height: 20px;
background-color: orange;
}
#buyButtonLumber {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonCoffee {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonRegularJeans {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonBurger {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
</style>
</head>
<body>
<div id="screen">
<img id="nakedHuman" src="nakedHuman2.png" width="139.46" height="450">
<img id="lumberShirt" src="lumberShirt.png" width="139.46" height="158.51">
<img id="coffeeStainedTShirt" src="coffeeStainedTShirt.png" width="139.46" height="158.51">
<img id="regularJeans" src="regularJeans.png" width="89" height="152.72">
<div id="myCash"></div>
<div id="humanHunger">
<div id="humanHungerContainer">
<div id="humanHungerBar"></div>
</div>
</div>
</div>
<div id="clothesScreen">
<div id="lumberShirtMiniContainer">
<img id="lumberShirtMini" src="lumberShirt.png" width="70.38" height="80">
<div id="lumberShirtPrice"></div>
<div id="buyButtonLumber">Buy</div>
</div>
<div id="coffeeStainedTShirtMiniContainer">
<img id="coffeeStainedTShirtMini" src="coffeeStainedTShirt.png" width="70.38" height="80">
<div id="buyButtonCoffee">Buy</div>
</div>
<div id="regularJeansMiniContainer">
<img id="regularJeansMini" src="regularJeans.png" width="46.62" height="80">
<div id="buyButtonRegularJeans">Buy</div>
</div>
<div id="burgerMiniContainer">
<img id="burger" src="burger.png" width="94.11" height="80">
<div id="buyButtonBurger">Buy</div>
</div>
</div>
<div id="moneyMaker">
<div id="jobInstructions">You work on a click factory, so get to clickin'!!</div>
<div id="workingHours"></div>
<div id="clickingArea"><img src="dollar.png" id="dollar" width="82.55" height="42"></div>
<div id="workCounter"></div>
</div>
<script>
window.onload = function () {
var gameOver = false;
if (!gameOver) {
var lumberShirtPrice = document.getElementById("lumberShirtPrice");
lumberShirtPrice.innerHTML = 7;
var myCash = document.getElementById("myCash");
myCash.innerHTML = 45;
var buyButtonLumber = document.getElementById("buyButtonLumber");
buyButtonLumber.addEventListener("click", substractItemPriceFromMyCash);
var negateFX = new Audio('negate1.wav');
function substractItemPriceFromMyCash() {
var a = parseInt(lumberShirtPrice.innerHTML);
var b = parseInt(myCash.innerHTML);
if (a > b) {
negateFX.play();
}
else {
myCash.innerHTML -= lumberShirtPrice.innerHTML;
console.log("you bought the lumber shirt");
}
}
var workingHoursScreen = document.getElementById("workingHours");
workingHoursScreen.innerHTML = 0;
var workCounter = document.getElementById("workCounter");
workCounter.innerHTML = 0;
var allowedToWork = false;
var workingHoursChronometer = setInterval(incrementWorkingHoursChronometer, 1000);
function incrementWorkingHoursChronometer () {
var a = parseInt(workingHoursScreen.innerHTML);
if(a < 10) {
workingHoursScreen.innerHTML++;
}
else if (a == 10) {
workingHoursScreen.innerHTML = 0;
workCounter.innerHTML++;
}
var b = parseInt(workCounter.innerHTML);
if (b == 4) {
workCounter.innerHTML = 0;
}
if (b % 2 == 0) {
allowedToWork = true;
}
else if (b % 2 == 1) {
allowedToWork = false;
}
}
var coinFX = new Audio('coin1.wav');
var clickingAreaBox = document.getElementById("clickingArea");
clickingAreaBox.addEventListener("click", giveMeMoney);
function giveMeMoney() {
if(allowedToWork) {
myCash.innerHTML++;
coinFX.play();
}
else {
negateFX.play();
}
}
var humanHungerBar = document.getElementById("humanHungerBar");
var barWidth = 76;
humanHungerBar.style.width = barWidth + '%';
var humanHungerBarDecrement = setInterval (decreaseHumanHungerBar, 700);
function decreaseHumanHungerBar () {
if (barWidth > 0) {
humanHungerBar.style.width = barWidth + '%';
barWidth--;
}
}
var buyButtonBurger = document.getElementById("buyButtonBurger");
var burgerPrice = 15;
buyButtonBurger.addEventListener("click", buyBurgerRestoreLifeAndDecreaseMoney);
function buyBurgerRestoreLifeAndDecreaseMoney() {
var a = parseInt(myCash.innerHTML);
if (a >= burgerPrice){
if(barWidth < 92) {
barWidth += 10;
myCash.innerHTML -=burgerPrice;
}
else if (barWidth == 1) {
gameOver = true;
console.log("bar is 1");
}
else {
negateFX.play();
}
}
else {
negateFX.play();
}
}
}
else {
document.getElementById("screen").style.display = 'none';
}
}
</script>
</body>
</html>
So you have written a script that executes one time. It goes from beginning to end, and then stops. So what you want to do is write a script that repeats over and over until the game ends. So here's a super brief example of how you might do that in javascript:
while (!gameOver) {
// do game code
}
BUT WAIT!!!
So the code inside that while loop will keep on happening over and over until the gameOver variable is true. But if you try to use that code, your game will probably freeze! Why? Because the browser is executing the code inside the while loop as fast as it possibly can. But if you'd like your game to run at a certain frame-per-second rate, you probably want to use a javascript timeout. So try something like this:
setInterval(function() {
// do game code
}, 1000/60);
That is the absolutely bare minimum that you'll need for a technical "game loop". However, this is not really the recommended approach for starting to create a browser-based game. Try doing some research and checking out things like this and this.
Related
This is my code:
function setToTop(t) {
var n = 0;
$(".box").each(function(t, o) {
var e = Number.parseInt($(o).css("z-index"));
e = Number.isNaN(e) ? 0 : e, n = Math.max(n, e)
}), t.css({
zIndex: n + 1
})
}
$(function() {
$(document).mouseleave(function() {
$(document).trigger("mouseup")
}), $(".box").draggable({
helper: "original",
containment: "body",
drag: function(t, n) {
n.offset.left < 0 && (n.position.left = n.position.left - n.offset.left)
},
stop: function(t, n) {},
start: function(t, n) {
setToTop(n.helper)
}
})
}), $(".box span").click(function() {
$(this).parents(".box").css("display", "none")
});
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font-size: 50px;
font-family: Arial;
background-color: rgb(220, 220, 220);
}
.box {
background-color: yellow;
color: black;
padding: 20px;
display: block;
position: absolute;
border: 2px black;
cursor: all-scroll;
border: 1px solid black;
}
.box:nth-child(1) {
left: 20%;
top: 10%;
}
.box:nth-child(2) {
left: 10%;
top: 15%;
}
.box:nth-child(3) {
left: 25%;
top: 30%;
}
.box:nth-child(4) {
left: 30%;
top: 20%;
}
.box span {
background-color: red;
color: white;
position: absolute;
top: -40px;
right: -40px;
padding: 10px;
cursor: pointer;
border: 1px solid black;
}
<div class="box">Hello <span>✕</span></div>
<div class="box">Love <span>✕</span></div>
<div class="box">Freedom <span>✕</span></div>
<div class="box">Peace <span>✕</span></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
The function is:
to have draggable boxes
the currently dragged box gets set on top
closing a box is possible with the ✕ button
Unfortunately, the ✕ button doesn't work on many touch devices. My research has shown that it works well on Apple devices, but pretty bad on many Android devices.
Has anyone an idea to fix that? Also, does anyone have an idea to optimize the code?
Would be very thankful for help! <3
Consider the following.
$(function() {
function setToTop(t) {
var n = $(".box").length;
$(".box").each(function(i, el) {
if (!isNaN($(el).css("z-index"))) {
n = parseInt($(el).css("z-index"));
}
});
t.css("z-index", n + 1);
return true;
}
$(document).mouseleave(function() {
$(document).trigger("mouseup");
});
$(".box").draggable({
containment: "body",
cancel: ".btn",
start: function(event, ui) {
setToTop(ui.helper)
}
});
$(".box .btn").click(function() {
$(this).parents(".box").css("display", "none")
});
});
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font-size: 50px;
font-family: Arial;
background-color: rgb(220, 220, 220);
}
.box {
background-color: yellow;
color: black;
padding: 20px;
display: block;
position: absolute;
border: 2px black;
cursor: all-scroll;
border: 1px solid black;
}
.box:nth-child(1) {
left: 20%;
top: 10%;
}
.box:nth-child(2) {
left: 10%;
top: 15%;
}
.box:nth-child(3) {
left: 25%;
top: 30%;
}
.box:nth-child(4) {
left: 30%;
top: 20%;
}
.box span {
background-color: red;
color: white;
position: absolute;
top: -40px;
right: -40px;
padding: 10px;
cursor: pointer;
border: 1px solid black;
}
<div class="box">Hello <span class="btn">✕</span></div>
<div class="box">Love <span class="btn">✕</span></div>
<div class="box">Freedom <span class="btn">✕</span></div>
<div class="box">Peace <span class="btn">✕</span></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
The cancel method prevents dragging from starting on specified elements.
See More: https://api.jqueryui.com/draggable/#option-cancel
It is not good practice to use the same Variable Names in your code.
So I'm currently working on a personal project. And came across with a problem.
I want my border color of this div to green when the user clicks the radio button inside that div. Like this:
Here
But my current version looks like this:
Here
Here is my CSS and HTML
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.backProject input:checked~.checkmark {
background-color: #fff;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.backProject input:checked~.checkmark:after {
display: block;
}
.backProject .checkmark:after {
top: 2px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: hsl(176, 50%, 47%);
}
.checkmark:after {
z-index: 1;
content: "";
position: absolute;
display: none;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" class="input">
<span class="checkmark"></span>
<h4 id="card-h">Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p id="left">left</p>
<h2 id="card2-num">101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
<hr>
<div class="pledgeSection">
<p>Enter your pledge</p>
<button class="btn-1 card2Btn">Continue</button>
<button class="btn-2">
<p>$</p>
<input value="25" class="input-price input-price2" type="number">
</button>
</div>
JS (Only for clicking the radio button twice):
function radioCheck() {
timesClicked++
if (timesClicked > 1) {
$("input").prop("checked", false)
timesClicked = 0;
}
}
function colorchange() {
var x = document.getElementById('checker');
var y = document.getElementById('radiobox');
if (x.checked === true) {
y.style.borderColor = "green";
} else {
y.style.borderColor = "silver";
}
}
#radiobox {
width: 300px;
height: 200px;
border: 5px solid;
border-color: silver;
}
<div id="radiobox">
<input type="radio" onclick="colorchange();" id="checker"></input>
</div>
To keep it simple, I'll just use a short example and you can just apply it to your own example.
This is how you can do that
function radioCheck(){
// Get the checkbox
var checkBox = document.getElementById("myInputCheck");
// Get the div with border
var divBorder = document.getElementsByClassName("backProjectCard")[0]
// If the checkbox is checked, display the border
if (checkBox.checked == true){
divBorder.classList.remove("backProjectCard"); //remove "backProjectCard"
divBorder.classList.add("newBorder"); //add the new border with new color
} else {
divBorder.classList.remove("newBorder");
divBorder.classList.add("backProjectCard");
}
}
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 1;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.newBorder{
border: 2px solid #177972 !important;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" id="myInputCheck">
<h4 >Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p >left</p>
<h2 >101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
<style>
* {padding: 0; margin: 0;}
#game {width: 300px; height: 400px; border: 2px solid #222; background-color: #ccc; margin: 50px; position: relative; overflow: hidden;}
#character {width: 20px; height: 20px; background-color: #ffc554; border: 2px solid #222; position: absolute; bottom: 0; left: 0;}
.block {width: 10px; height: 10px; background-color: #ff5252; border-radius: 50%; border: 2px solid #222; position: absolute; top: -50px; left: -20px;}
.falling {animation: fall 2s infinite linear;}
#keyframes fall {
0% {top: -50px}
100% {top: 450px;}
}
</style>
<body>
<div id="game">
<div id="character"></div>
</div>
</body>
SCRIPT
var block = [];
function createEnemy(nth) {
var divAddText = '<div class="block ' + nth + '"></div>'
document.getElementById('game').innerHTML += divAddText;
block[nth] = document.getElementsByClassName(nth)[0];
block[nth].classList.add("falling");
setInterval(function() {
block[nth].style.left = Math.floor(Math.random() * 290) + "px";
}, 2000);
}
As you can see in the SCRIPT part, I tried to write a block creating and falling code.
It worked well when I executed createEnemy(1) in chrome console.
The first block created went smoothly falling from random left points as I expected.
But as soon as I added createEnemy(2), the first block started to fall from the same left point while the second block was just fine falling from random left points.
Could any of you guys give me some insight into this issue?
Don't use innerHTML when displaying your enemies, instead use createElement and appendChild.
const enemies = [];
const game = document.getElementById("game");
function createEnemy(name) {
const enemy = document.createElement("div");
enemy.classList.add("block", "falling", name);
enemies.push(enemy);
game.appendChild(enemy);
setInterval(function() {
enemy.style.left = Math.floor(Math.random() * 290) + "px";
}, 2000);
}
createEnemy(1);
createEnemy(2);
* {
padding: 0;
margin: 0;
}
#game {
width: 300px;
height: 400px;
border: 2px solid #222;
background-color: #ccc;
margin: 50px;
position: relative;
overflow: hidden;
}
#character {
width: 20px;
height: 20px;
background-color: #ffc554;
border: 2px solid #222;
position: absolute;
bottom: 0;
left: 0;
}
.block {
width: 10px;
height: 10px;
background-color: #ff5252;
border-radius: 50%;
border: 2px solid #222;
position: absolute;
top: -50px;
left: -20px;
}
.falling {
animation: fall 2s infinite linear;
}
#keyframes fall {
0% {
top: -50px;
}
100% {
top: 450px;
}
}
<div id="game">
<div id="character"></div>
</div>
PS: I'm not sure why your code is not working as expected, I believe it has something to do with innerHTML. Hopefully someone could explain.
I created this page with the help stack overflow guys. There are three minor issues which I couldn't fix. I'd like help from you.
In this link you can see a countdown timer. I need to add a text "Go" after number .
You can see a counter glow border ( For now its blue color ). Can we add a moving border effect for that? Eg https://codepen.io/vishwakarma02/full/wOVYWy
Sometimes the the border showing just behind the text "Practice shot". That shouldn't be like that.
Can you guys please check and give solutions. I have shared my code here. Thanks :)
var timeLeft = 3;
var videoCounter = 2;
var videoText = 2;
var elem = document.querySelector('.countdown-content__count');
var timerId;
function countdown() {
if (timeLeft == 0) {
clearTimeout(timerId);
$(".countdown-content__timer").fadeOut();
$(".video-wrapper span").fadeOut();
var playPromise = $("#video")[0].play();
} else {
elem.innerHTML = timeLeft;
timeLeft--;
}
}
function practiceShot(){
setTimeout(function(){
$(".countdown-content__head").slideUp(1000, function(){
$(".countdown-content__timer").css({
opacity: 0,
display: 'inline-block'
}).animate({opacity:1},600);
timerId = setInterval(countdown, 1000);
countdown();
});
}, 2000);
}
practiceShot();
document.getElementById('video').addEventListener('ended', function() {
if (videoCounter == 0) {
return;
}
document.getElementsByClassName("countdown-content__head")[0].innerHTML = "<span>Practice Shot </span>" + videoText;
videoText++;
videoCounter--;
timeLeft = 3;
elem.innerHTML = "";
$(".countdown-content__timer").fadeIn();
$(".video-wrapper span").fadeIn();
$(".countdown-content__head").slideDown(1000, function(){
$(".countdown-content__timer").css({
opacity:1,
display: 'inline-block'
}).animate({opacity:0},600);
});
practiceShot();
}, false);
<div class="practice-shot-screen full-screen-height">
<div class="row">
<div class="col-sm-6">
<span class="video-wrapper">
<video id="video" muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<span></span>
</span>
</div>
<div class="col-sm-6">
<div class="practice-shot-image">
<img alt="" src="images/practice-image.jpg">
</div>
</div>
</div>
<div class="countdown-content">
<div class="v-align-container">
<div class="v-align-grid">
<div class="countdown-content__head">
<!-- <strong> <img alt="" src="images/hd-border.png"> </strong> -->
<span>PRACTICE SHOT 1</span>
<!-- PRACTICE SHOT 1 -->
<!-- <strong> <img alt="" src="images/hd-border.png"> </strong> -->
</div>
<div class="countdown-content__timer">
<!--test-->
<!--test-->
<span class="countdown-content__count"></span>
</div>
</div>
</div>
</div>
</div><!--practice-shot-screen-->
Css :
.practice-shot-screen {
position: relative;
}
.practice-shot-screen .row {
height: 100%;
margin: 0;
}
.practice-shot-screen [class^="col-"] {
padding: 0;
}
.practice-shot-screen .v-align-container {
position: relative;
}
.practice-shot-screen .video-wrapper {
height: 100%;
width: 100%;
display: inline-block;
position: relative;
}
.video-wrapper span {
content: '';
display: block;
width: 3000px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
z-index: 1;
opacity: 0.7;
}
.practice-shot-screen .video-wrapper video {
height: 100%;
width: 100%;
display: inline-block;
object-fit: cover;
}
.practice-shot-image {
height: 100%;
width: 100%;
}
.practice-shot-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
.countdown-content {
max-width: 800px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 20;
margin: auto;
}
.countdown-content__head {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 85px;
text-transform: uppercase;
color: #fff;
-webkit-text-stroke: 1px #fff;
text-shadow: 0px 0px 10px #fff;
text-align: center;
position: relative;
margin: 0;
}
.countdown-content__head::after {
content: '';
display: block;
height: 147px;
width: 770px;
background: url(../images/hd-border.png) no-repeat;
text-align: center;
margin: 0 auto;
background-size:contain;
}
.countdown-content__head::before {
content: '';
display: block;
height: 147px;
width: 770px;
background: url(../images/hd-border.png) no-repeat;
text-align: center;
margin: 0 auto;
background-size:contain;
}
.countdown-content__timer {
font-family: 'beonwebfont';
font-size: 320px;
color: #ea3323;
-webkit-text-stroke: 1px #ea3323;
text-shadow: 0px 0px 10px #ea3323;
width: 400px;
height: 400px;
border-radius: 50%;
border: 1px solid #fff;
border-color: #467fff;
-webkit-box-shadow: 0 0 15px #467fff;
-moz-box-shadow: 0 0 15px #467fff;
box-shadow: 0 0 30px #467fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0;
}
.countdown-content__timer > span {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.countdown-content__timer video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
I have added html and css here : https://jsfiddle.net/Coder95/w5h4n9cq/
So what I'm trying to do is create two functions that each go along with their respective buttons. The purpose of the function is to make divs containing images rotate through a number images. When 3 is rotated to the right it leaves the stack of visible images on the page, and when 1 is rotated to the left the same happens. When 1 is rotated to the right, a new image pops into the visible stack. I have the basic JavaScript written out, however when I click the buttons nothing happens. Can anyone help me out with this? Thank you!!
#img1 {
position: absolute;
background-color: lightblue;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
right: 45px;
}
#img2 {
position: absolute;
background-color: lightcoral;
height: 70px;
width: 50px;
z-index: 10;
left: 70px;
right: 70px;
top: 100px;
margin: auto;
}
#img3 {
position: absolute;
background-color: lightgreen;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
left: 45px;
}
#rightArrow {
position: absolute;
left: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#rightArrow:hover {
color: yellow;
}
#leftArrow {
position: absolute;
right: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#leftArrow:hover {
color: yellow;
}
<div>
<p id='leftArrow'>↶</p>
<div id='img1' style="border: 2px solid blue;">1</div>
<div id='img2' style="border: 2px solid red;">2</div>
<div id='img3' style="border: 2px solid green;">3</div>
<p id='rightArrow'>↷</p>
var myLeftArrow = document.querySelector("#rightArrow");
var myRightArrow = document.querySelector("#leftArrow");
myLeftArrow.addEventListener("click", rotateLeft(), false);
function rotateLeft()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img3');
set2.id = ('img1');
set3.id = ('img2');
}
myRightArrow.addEventListener("click", rotateRight(), false);
function rotateRight()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img2');
set2.id = ('img3');
set3.id = ('img1');
}
The problem was in your even listeners. You were passing rotateLeft() and rotateRight() when you should have passed them without the parenthesis. See working code below.
var myLeftArrow = document.querySelector("#rightArrow");
var myRightArrow = document.querySelector("#leftArrow");
myLeftArrow.addEventListener("click", rotateLeft, false);
function rotateLeft()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img3');
set2.id = ('img1');
set3.id = ('img2');
}
myRightArrow.addEventListener("click", rotateRight, false);
function rotateRight()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img2');
set2.id = ('img3');
set3.id = ('img1');
}
#img1 {
position: absolute;
background-color: lightblue;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
right: 45px;
}
#img2 {
position: absolute;
background-color: lightcoral;
height: 70px;
width: 50px;
z-index: 10;
left: 70px;
right: 70px;
top: 100px;
margin: auto;
}
#img3 {
position: absolute;
background-color: lightgreen;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
left: 45px;
}
#rightArrow {
position: absolute;
left: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#rightArrow:hover {
color: yellow;
}
#leftArrow {
position: absolute;
right: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#leftArrow:hover {
color: yellow;
}
<p id='leftArrow'>↶</p>
<div id='img1' style="border: 2px solid blue;">1</div>
<div id='img2' style="border: 2px solid red;">2</div>
<div id='img3' style="border: 2px solid green;">3</div>
<p id='rightArrow'>↷</p>