I got a problem with Anime.js, I got a project to do about a game with a dice and 2 players on the same screen. I would like to animate the background color and position depending on the active player (left or right). So I've made a div with a background, a negative z-index and a width of 50vw so it takes half of the screen. I placed the animation play() and reverse() into my switchPlayer function. My problem is that the background animation makes one "dead time" beetween 2 switch of player and I don't understand why.
Thanks for the help !
Here is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
<title>Dice Game</title>
</head>
<body>
<div id="player-background"></div>
<!-- This is whre the whole game is contained -->
<div class="gameContainer">
<!-- Player one content -->
<div id="player1">
<h2>PLAYER 1</h2>
<span class="score" id="globalP1">0</span>
<div class="current">
<span class="cText">Current :</span>
<span id="roundP1">0</span>
</div>
</div>
<!-- Center content -->
<div id="center">
<button class="NewGame" id="new-game" type="button">NEW GAME</button>
<img alt="Dice" id="img" src="./images/1.png">
<button class="roll-dice" id="roll" type="button">ROLL DICE !</button>
<button id="hold" type="button">HOLD</button>
</div>
<!-- Player two content -->
<div id="player2">
<h2>PLAYER 2</h2>
<span class="score" id="globalP2">0</span>
<div class="current">
<span class="cText">Current :</span>
<span id="roundP2">0</span>
</div>
</div>
</div>
<script src="./node_modules/animejs/lib/anime.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
My css
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');
body {
margin: 0px;
overflow: hidden;
font-family: 'Lato', sans-serif;
/* background-image: url(images/GameBackground.png);
background-size: cover;
background-position: center; */
}
img {
height: 300px;
width: 300px;
padding: 200px 0px 150px 0px;
}
button {
background: none;
border: 0;
font-size: 50px;
}
.roll-dice {
padding-bottom: 25px;
}
.gameContainer {
display: flex;
justify-content: space-around;
align-items: center;
align-content: center;
height: 100vh;
width: 100vw;
z-index: 5;
}
#player-background {
position: absolute;
height: 100vh;
width: 50vw;
background: paleturquoise;
z-index: -5;
}
#player1, #player2, #center {
font-size: 50px;
font-weight: 300;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.score {
color: red;
font-size: 100px;
font-weight: 300;
display: flex;
margin-bottom: 250px;
}
.cText {
font-size: 30px;
}
.current {
display: flex;
align-items: center;
justify-content: space-evenly;
background: rgb(226, 226, 187);
height: 125px;
width: 350px;
}
And my JS
//------------------------ Get element variables ---------------
let newGame = document.getElementById("new-game");
let roll = document.getElementById("roll");
let hold = document.getElementById("hold");
let img = document.getElementById("img");
let globalP1 = document.getElementById("globalP1");
let roundP1 = document.getElementById("roundP1");
let globalP2 = document.getElementById("globalP2");
let roundP2 = document.getElementById("roundP2");
let backgroundTarget = document.getElementById("player-background");
//----------------------- Game variables ---------------
let activePlayer = 1;
//----------------------------Anime JS---------------------
let background = anime({
targets: backgroundTarget,
translateX: "50vw",
autoplay: false,
backgroundColor: "#676790",
});
//------------------ Functions used later ---------------
// Switch the player display depending on the situation
function switchPlayer() {
if (activePlayer == 1) {
background.reverse();
player1.style.opacity = "1";
player2.style.opacity = "0.3";
} else {
background.play();
player1.style.opacity = "0.3";
player2.style.opacity = "1";
}
}
let gameReset = () => {
// rewrite everything to "0"
roundP1.textContent = "0";
globalP1.textContent = "0";
roundP2.textContent = "0";
globalP2.textContent = "0";
// Force player one display
activePlayer = 1;
switchPlayer();
};
//--------------------- Main functions ----------------------
// Roll logic
let rollfunction = () => {
// Generates a random number between 1 to 6
let diceNumber = Math.floor(Math.random() * 6) + 1;
// Generate a string with the img path, including a random number between then display the img
let randomImg = "images/" + diceNumber + ".png";
// Used to get the img element then set the src attribute to randomImg (= images/1.png or any other numbers)
document.querySelector("img").setAttribute("src", randomImg);
if (activePlayer == 1 && diceNumber > 1) {
roll.textContent = "ROLL DICE !";
// puts the number into the current score
let totalCurrentP1 = roundP1.textContent;
// I had to put a "+" to make the addition possible beacause rounsP2.textContent is a string, the + is here to convert a string into a number
roundP1.textContent = +totalCurrentP1 + +diceNumber;
switchPlayer();
} else if (activePlayer == 1 && diceNumber == 1) {
// Switch player if dice = 1
roll.textContent = "NEXT PLAYER";
roundP1.textContent = "0";
activePlayer = activePlayer + 1;
switchPlayer();
} else if (activePlayer == 2 && diceNumber > 1) {
// Put score into P2 section
roll.textContent = "ROLL DICE !";
let totalCurrentP2 = roundP2.textContent;
roundP2.textContent = +totalCurrentP2 + +diceNumber;
} else {
// Switch to player 1 if player 2 get "1"
roundP2.textContent = "0";
roll.textContent = "NEXT PLAYER";
activePlayer = activePlayer - 1;
}
};
// Hold ogic
let holdFunction = () => {
let totalGlobalP1 = globalP1.textContent;
let totalGlobalP2 = globalP2.textContent;
let numberRoundP1 = roundP1.textContent;
let numberRoundP2 = roundP2.textContent;
if (activePlayer == 1 && +totalGlobalP1 + +numberRoundP1 < 100) {
globalP1.textContent = +totalGlobalP1 + +roundP1.textContent;
roundP1.textContent = "0";
activePlayer = 2;
switchPlayer();
// background.play();
} else if (activePlayer == 1 && +totalGlobalP1 + +numberRoundP1 >= 100) {
activePlayer = 1;
alert("P1 t'as gagné mon pote !");
gameReset();
// background.reverse();
} else if (activePlayer == 2 && +totalGlobalP2 + +numberRoundP2 < 100) {
globalP2.textContent = +totalGlobalP2 + +roundP2.textContent;
roundP2.textContent = "0";
activePlayer = 1;
switchPlayer();
// background.reverse();
} else if (activePlayer == 2 && +totalGlobalP2 + +numberRoundP2 >= 100) {
activePlayer = 2;
alert(
"Le joueur 2 a gagné cette manche ! (De toute façon c'était mon préféré"
);
gameReset();
}
};
//--------------------- Buttons ----------------------------
// Every buttons holding every functions
hold.addEventListener("click", () => {
holdFunction();
});
roll.addEventListener("click", () => {
rollfunction();
});
newGame.addEventListener("click", () => {
gameReset();
});
Tried :
- Looked on stack overflow to see if someone else had this problem
- Tried to look more in depth into the anime.js doc
- Also tried to do a blank project only with this function but still this issue
Expecting :
Move the div left and right depending on the active player to see who's playing