what i mean by that is i am makeing a website and it has scroll animation and a phaser.js game what i want is to that scroll animation to be able to the same afect on the phaser game i have 2 class name are hidden and show they do the scroll animation
it trd to put script into a div class dut it did not work this is also on https://github.com/CrystalX775/probable-telegram
js code
const observer = new IntersectionObserver((entries) =>{
entries.forEach((entry) => {
console.log(entry)
if(entry.isIntersecting){
entry.target.classList.add('show');
} else{
entry.target.classList.remove('show');
}
});
});
const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el)=> observer.observe(el));
function myfunction() {
document.getElementById("Hacker1").style.color = "blue";
};
function myFunction1() {
document.getElementById("Hacker1").style.color = "red";
}
let pepole = prompt("Please enter your name");
if(pepole != null){
document.getElementById("demo").innerHTML = "Hello " + pepole + "! How are you today?";
}
phaser.js code
function preload() {
this.load.image('codey', 'https://content.codecademy.com/courses/learn-phaser/codey.png');
}
function create() {
this.add.sprite(50, 50, 'codey');
}
const config = {
type: Phaser.AUTO,
width: 1300,
height: 300,
backgroundColor: "#5f2a55",
scene: {
create,
preload
}
}
const game = new Phaser.Game(config)
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<div class="scripts">
<script defer src="app.js"></script>
<link rel="stylesheet" href="style.css">
</div>
<body>
<section>
<h1 onmouseout="myFunction1()"onmouseover="myfunction()" style="font-size: 60px;"id="Hacker1"class="hidden">HackerXGames</h1>
<p class="hidden">this is my way to play</p>
</section>
<section>
<h1 style="font-size: 30px;" class="hidden" id="demo"></h1>
</section>
<section class="hidden">
<div class="hidden">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
<script src="game.js"></script>
</div>
</section>
</body>
</html>
css code
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap");
body{
background-color: #131316;
color: #ffffff;
font-family: Poppins, sans-serif;
padding: 0;
margin: 0;
}
section {
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
}
.hidden{
opacity: 0;
filter: blur(5px);
transform: translateX(-100%);
transition: all 1s;
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
.media{
display: flex;
}
.media:nth-child(2){
transition-delay: 200ms;
}
.media:nth-child(3){
transition-delay: 7s;
}
The problem is that you have to tell phaser where to put the "game", if not it will just append it to the DOM.
The solution is pretty easy:
In the html-code:
<script>out of the<section>into the<body>at the endidto the<section>where the game should be displayed.In the Javascript code:
parentproperty to the Phaser config (link to the documentation).the result should look like this:
html:
(Just the main parts are shown)
javascript:
(Just the main parts are shown)