How to trigger paused animation with javascript? - javascript

I want to trigger an animation that makes the game screen fade to greyscale when the character dies. This is my first game so it is rather simple. I have not been able to successfully trigger the animation. I have not been able to successfully trigger the animation. Online, I found that document.getElementById("object").animationPlayState = "running" should work, but it doesn't. This is my game loop and CSS (game is a <div> in HTML).
link to full code in codepen (doesn't work properly): https://codepen.io/flyingchicken22/pen/NWgVrJq
CSS:
#game {
width: 600px;
height: 300px;
border: 2px solid black;
margin: auto;
background-image: url("https://t3.ftcdn.net/jpg/01/73/79/26/360_F_173792623_516juhwjkCCZJ9OyesyH7hf7r9zsyH5u.jpg");
background-size: cover;
animation: deathAnimation 2s;
animation-play-state: paused;
}
#keyframes deathAnimation {
0%{filter:none;}
100%{filter:grayscale(100%);}
}
Javascript:
var gameLoop = setInterval(() => {
dead = false
function rockAnimation() {
rock.classList.add('rockAnimation')
}
const knightTop = parseInt(window.getComputedStyle(knight).getPropertyValue('top'))
const rockLeft = parseInt(window.getComputedStyle(rock).getPropertyValue('left'))
if (rockLeft < 0) {
rock.style.display = 'none'
} else {
rock.style.display = ''
}
if (rockLeft < 90 && rockLeft > 50 && knightTop > 79) {
dead = true
}
score.innerText++
const deathAnimation = document.getElementById("deathAnimation")
const game = document.getElementById("game")
if (dead == true) {
clearInterval(gameLoop)
document.getElementById("youDied").innerHTML = "YOU DIED"
document.getElementById("playAgain").innerHTML = "Play Again?"
game.classList.add(deathAnimation)
document.getElementById("deathAnimation").style.animationPlayState = "running"
}
}, 50);

You are trying to return an HTML element that does not exist. Change document.getElementById("deathAnimation").style.animationPlayState = "running" to document.getElementById("game").style.animationPlayState = "running"
Try the following snippet
const background = document.getElementById('game')
const knight = document.getElementById('knight')
const rock = document.getElementById('rock')
const score = document.getElementById('score')
//transfers jump animation to script
function jump() {
knight.classList.add('jump-animation')
setTimeout(() => {
knight.classList.remove('jump-animation')
}, 500)
}
//When any key is pressed, run jump animation
document.addEventListener('keypress', () => {
if (!knight.classList.contains('jump-animation') && dead == false) {
jump();
}
})
//game loop
let dead
var gameLoop = setInterval(() => {
dead = false
function rockAnimation() {
rock.classList.add('rockAnimation')
}
const knightTop = parseInt(window.getComputedStyle(knight).getPropertyValue('top'))
const rockLeft = parseInt(window.getComputedStyle(rock).getPropertyValue('left'))
if (rockLeft < 0) {
rock.style.display = 'none'
} else {
rock.style.display = ''
}
if (rockLeft < 90 && rockLeft > 50 && knightTop > 79) {
dead = true
}
score.innerText++
const deathAnimation = document.getElementById("deathAnimation")
const game = document.getElementById("game")
if (dead == true) {
clearInterval(gameLoop)
document.getElementById("youDied").innerHTML = "YOU DIED"
game.classList.add(deathAnimation)
document.getElementById("game").style.animationPlayState = "running"
}
}, 50);
html {
background-color: black;
}
#score {
text-align: center;
color: rgba(102, 255, 0, 0.993);
}
#game {
width: 600px;
height: 300px;
border: 2px solid black;
margin: auto;
background-image: url("https://t3.ftcdn.net/jpg/01/73/79/26/360_F_173792623_516juhwjkCCZJ9OyesyH7hf7r9zsyH5u.jpg");
background-size: cover;
animation: deathAnimation 2s;
animation-play-state: paused;
}
#keyframes deathAnimation {
0%{filter:none;}
100%{filter:grayscale(100%);}
}
#knight {
height: 100px;
width: 75px;
position: relative;
top: 171px;
left: 50px;
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f57b5304-de59-49e3-b0f9-cc29a2458425/dcgy8i3-e6dac283-04a7-40e5-a333-cc645e172df7.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2Y1N2I1MzA0LWRlNTktNDllMy1iMGY5LWNjMjlhMjQ1ODQyNVwvZGNneThpMy1lNmRhYzI4My0wNGE3LTQwZTUtYTMzMy1jYzY0NWUxNzJkZjcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.0LapCzRi5sQjkqzwB5lwWQT_XH1BM4rSMZt7jrflMLk");
background-size: cover;
}
#rock {
height: 50px;
width: 50px;
position: relative;
top: 122px;
left: 550px;
background-image: url("http://pixelartmaker-data-78746291193.nyc3.digitaloceanspaces.com/image/da268f06e621b21.png");
background-size: cover;
animation: rockAnimation 1s linear;
}
#keyframes rockAnimation {
0%{left: 500px;}
100%{left: -50px;}
}
.jump-animation {
animation: jump 0.5s;
}
#keyframes jump {
0%{top: 171px;}
50%{top: 70px;}
75%{top: 70px;}
100%{top: 171px;}
}
#font-face {
font-family: VT323;
src: url(https://fonts.googleapis.com/css2?family=VT323&display=swap);
}
#gameName {
text-align: center;
color: rgba(102, 255, 0, 0.993);
font-size: 300%;
font-family: 'VT323';
}
#youDied {
text-align: center;
color: rgba(102, 255, 0, 0.993);
animation: youDied 2s infinite;
}
#keyframes youDied {
0%{color: rgba(102, 255, 0, 0.993);}
50%{color: black}
100%{color: rgba(102, 255, 0, 0.993);}
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game">
<div id="knight"></div>
<div id="rock"></div>
</div>
<h1 id="score">0</h1>
<h1 id="gameName">KNIGHT HOPPER</h1>
<h1 id="youDied"></h1>
<script src="script.js"></script>
</body>
</html>

Related

In my code there is an event listener for running every animation iteration but it keep getting the error reading properties of null. Can I fix it?

I am trying to make a traffic game using javascript though every time I try to use this line of code:
carAnimation.addEventListener('animationiteration', () => {
var random = Math.floor(Math.random() * 5);
left = random * 90 + 15;
carAnimation.style.left = left + "px";
counter++;
console.log(counter)
});
I am getting the error
Uncaught TypeError: Cannot read properties of null (reading
'addEventListener')
at HTMLButtonElement. (script.js:40:18)
but I can't seem to find the error in the line. Also, I am trying to run the same code for 3 different elements but it just doesn't seem to work either.
Here is the rest of the code if needed to solve this mystery
<!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">
<title>Document</title>
</head>
<body>
<div class="game">
<div class="car"></div>
<div class="npcCar"></div>
<div class="npcCar npcCar2"></div>
<div class="npcCar npcCar3"></div>
</div>
<button class="start">Start!</button>
<div class="controlContainer">
<button class="btn pause"></button>
<button class="btn play"></button>
<button class="btn restart"></button>
<button class="btn help"></button>
</div>
<div class="helpModal hidd">
<div class="modal hidden">
<button class="close-modal">×</button>
<h1>Help</h1>
<p>
HOW TO PLAY:
Use WASD to the arrow keys to move the red car around.
You need to avoid hitting the blue cars.
When you hit a car you will automatically lose
The longer you last the more points you get
Good luck racer!
</p>
</div>
</div>
<style>
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
width: 100%;
background-color: rgb(69, 169, 240);
font-family: 'Oswald', sans-serif;
}
.game{
position: absolute;
left: calc(50% - 450px/2);;
height: 600px;
width: 450px;
border: 3px solid black;
border-radius: 5%;
background: url('road.png');
overflow: hidden;
}
.start{
position: absolute;
height: 30px;
width: 150px;
background-color: rgb(1, 255, 1);
border: 3px solid black;
border-radius: 5%;
font-size: 15px;
font-weight: bold;
top: 600px;
left : calc(50% - 150px/2);
transition: 0.5s;
}
.start:hover{
background: red;
}
.controlContainer{
padding: 5px;
width: 120px;
height: 120px;
border: 3px solid black;
border-radius: 5%;
background-color: lawngreen;
}
.btn{
height: 50px;
width: 50px;
border: 2px solid black;
border-radius: 50%;
}
.play{
background-image: url('play.png');
}
.pause{
background-image: url('pause.png');
}
.help{
background-image: url('help.png');
}
.restart{
background-image: url('restart.png');
}
.animate{
animation: road linear infinite 0.5s;
}
.hidden{
display: none;
}
#keyframes road{
0%{
background-position-y: 0px;
}
100%{
background-position-y: 600px;
}
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 45%;
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 100000000;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
.car{
position: relative;;
height: 120px;
width: 60px;
border-radius: 5%;
top: 435px;
background: url('Player (1).png');
transform: rotate(180deg);
z-index: 100000;
}
.npcCar{
width: 60px;
height: 120px;
background: url('obsacle.png');
position: relative;
left: 15px;
top: -300px;
}
.npcCar2{
top: -420px;
left: 195px;;
}
.npcCar3{
top: -540px;
left: 375px
}
.carAnimate{
animation: vroom 0.8s linear infinite;
}
.carAnimate2{
animation: vroom 0.8s linear infinite;
}
.carAnimate3{
animation: vroom 0.8s linear infinite;
}
#keyframes vroom{
0%{
top: -120px;
}
100%{
top: 600px;
}
}
</style>
<script>
'use strict'
const startBtn = document.querySelector('.start')
const pauseBtn = document.querySelector('.pause')
const playBtn = document.querySelector('.play')
const restartBtn = document.querySelector('.restart')
const helpBtn = document.querySelector('.help')
const modal = document.querySelector('.modal');
const closeModal = document.querySelector('.close-modal');
const game = document.querySelector('.game');
const player = document.querySelector('.car');
const npcPlayer = document.querySelector('.npcCar');
const npcPlayer2 = document.querySelector('.npcCar2');
const npcPlayer3 = document.querySelector('.npcCar3');
const carAnimation = document.querySelector('.carAnimate');
const carAnimation2 = document.querySelector('.carAnimate2');
const carAnimation3 = document.querySelector('.carAnimate3');
let click = 0;
let interval;
let both = 0;
let counter = 0;
//onLoad
window.addEventListener("load", () => {
player.style.position = "relative";
player.style.left = '195px';
player.style.top = '485px';
});
// Start the Game
startBtn.addEventListener('click', function(){
console.log('button clicked');
game.classList.add('animate');
click+=2;
npcPlayer.classList.add('carAnimate')
npcPlayer2.classList.add('carAnimate2')
npcPlayer3.classList.add('carAnimate3')
carAnimation.addEventListener('animationiteration', () => {
var random = Math.floor(Math.random() * 5);
left = random * 90 + 15;
carAnimation.style.left = left + "px";
counter++;
console.log(counter)
});
carAnimation2.addEventListener('animationiteration', () => {
var random1 = Math.floor(Math.random() * 5);
left = random1 * 90 + 15;
carAnimation2.style.left = left + "px";
counter++;
console.log(counter)
});
carAnimation3.addEventListener('animationiteration', () => {
var random1 = Math.floor(Math.random() * 5);
left = random1 * 90 + 15;
carAnimation3.style.left = left + "px";
counter++;
});
});
//Pausing the Game
pauseBtn.addEventListener('click', function(){
console.log('button clicked');
if(click>1){
game.classList.remove('animate');
click--
}
console.log(click)
});
//Resuming the Game
playBtn.addEventListener('click', function(){
console.log('button clicked');
if(click===1){
game.classList.add('animate');
click++;
console.log(click);
}
});
//Opening the Help Model
helpBtn.addEventListener('click', function(){
console.log('modal clicked')
modal.classList.remove('hidden')
});
//closing the help modal
closeModal.addEventListener('click', function(){
console.log('button clicked')
modal.classList.add('hidden')
});
//Moving Functions
function moveLeft() {
var left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
var transform = parseInt(window.getComputedStyle(player).getPropertyValue("transform"));
if (left > -0) {
player.style.left = left - 2 + "px";
player.style.transform = 'rotate(-' + 215 + 'deg)'
}
}
function moveRight() {
var left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
if (left < 385) {
player.style.left = left + 2 + "px";
player.style.transform = 'rotate(' + 215 + 'deg)'
}
}
function moveUp() {
var top = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
if (top > 0) {
player.style.top = top - 2 + "px";
player.style.transform = 'rotate(' + 180 + 'deg)'
}
}
function moveDown() {
var top = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
if (top < 490) {
player.style.top = top + 2 + "px";
player.style.transform = 'rotate(' + 180 + 'deg)'
}
}
//Make the pLayer move
document.addEventListener("keydown", (event) => {
if (both == 0) {
both++;
if (event.key === "ArrowLeft") {
interval = setInterval(moveLeft, 1);
}
if (event.key === "ArrowRight") {
interval = setInterval(moveRight, 1);
}
if (event.key === "ArrowUp") {
interval = setInterval(moveUp, 1);
}
if (event.key === "ArrowDown") {
interval = setInterval(moveDown, 1);
}
if (event.key === "a") {
interval = setInterval(moveLeft, 1);
}
if (event.key === "d") {
interval = setInterval(moveRight, 1);
}
if (event.key === "w") {
interval = setInterval(moveUp, 1);
}
if (event.key === "s") {
interval = setInterval(moveDown, 1);
}
}
});
document.addEventListener("keyup", (event) => {
clearInterval(interval);
both = 0;
player.style.transform = 'rotate(' + 180 + 'deg)'
});
</script>
</body>
</html>
Thanks!
Try wrapping all of your code inside the below document-content-ready function
document.addEventListener("DOMContentLoaded", () => {
//your entire js code here
});
make sure your code will run after the document's load is complete. you can do that by checking readyState like this:
<!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">
<title>Document</title>
</head>
<body>
<div class="game">
<div class="car"></div>
<div class="npcCar"></div>
<div class="npcCar npcCar2"></div>
<div class="npcCar npcCar3"></div>
</div>
<button class="start">Start!</button>
<div class="controlContainer">
<button class="btn pause"></button>
<button class="btn play"></button>
<button class="btn restart"></button>
<button class="btn help"></button>
</div>
<div class="helpModal hidd">
<div class="modal hidden">
<button class="close-modal">×</button>
<h1>Help</h1>
<p>
HOW TO PLAY:
Use WASD to the arrow keys to move the red car around.
You need to avoid hitting the blue cars.
When you hit a car you will automatically lose
The longer you last the more points you get
Good luck racer!
</p>
</div>
</div>
<style>
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
width: 100%;
background-color: rgb(69, 169, 240);
font-family: 'Oswald', sans-serif;
}
.game{
position: absolute;
left: calc(50% - 450px/2);;
height: 600px;
width: 450px;
border: 3px solid black;
border-radius: 5%;
background: url('road.png');
overflow: hidden;
}
.start{
position: absolute;
height: 30px;
width: 150px;
background-color: rgb(1, 255, 1);
border: 3px solid black;
border-radius: 5%;
font-size: 15px;
font-weight: bold;
top: 600px;
left : calc(50% - 150px/2);
transition: 0.5s;
}
.start:hover{
background: red;
}
.controlContainer{
padding: 5px;
width: 120px;
height: 120px;
border: 3px solid black;
border-radius: 5%;
background-color: lawngreen;
}
.btn{
height: 50px;
width: 50px;
border: 2px solid black;
border-radius: 50%;
}
.play{
background-image: url('play.png');
}
.pause{
background-image: url('pause.png');
}
.help{
background-image: url('help.png');
}
.restart{
background-image: url('restart.png');
}
.animate{
animation: road linear infinite 0.5s;
}
.hidden{
display: none;
}
#keyframes road{
0%{
background-position-y: 0px;
}
100%{
background-position-y: 600px;
}
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 45%;
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 100000000;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
.car{
position: relative;;
height: 120px;
width: 60px;
border-radius: 5%;
top: 435px;
background: url('Player (1).png');
transform: rotate(180deg);
z-index: 100000;
}
.npcCar{
width: 60px;
height: 120px;
background: url('obsacle.png');
position: relative;
left: 15px;
top: -300px;
}
.npcCar2{
top: -420px;
left: 195px;;
}
.npcCar3{
top: -540px;
left: 375px
}
.carAnimate{
animation: vroom 0.8s linear infinite;
}
.carAnimate2{
animation: vroom 0.8s linear infinite;
}
.carAnimate3{
animation: vroom 0.8s linear infinite;
}
#keyframes vroom{
0%{
top: -120px;
}
100%{
top: 600px;
}
}
</style>
<script>
'use strict'
if (document.readyState === "complete") {
const startBtn = document.querySelector('.start')
const pauseBtn = document.querySelector('.pause')
const playBtn = document.querySelector('.play')
const restartBtn = document.querySelector('.restart')
const helpBtn = document.querySelector('.help')
const modal = document.querySelector('.modal');
const closeModal = document.querySelector('.close-modal');
const game = document.querySelector('.game');
const player = document.querySelector('.car');
const npcPlayer = document.querySelector('.npcCar');
const npcPlayer2 = document.querySelector('.npcCar2');
const npcPlayer3 = document.querySelector('.npcCar3');
const carAnimation = document.querySelector('.carAnimate');
const carAnimation2 = document.querySelector('.carAnimate2');
const carAnimation3 = document.querySelector('.carAnimate3');
let click = 0;
let interval;
let both = 0;
let counter = 0;
//onLoad
window.addEventListener("load", () => {
player.style.position = "relative";
player.style.left = '195px';
player.style.top = '485px';
});
// Start the Game
startBtn.addEventListener('click', function(){
console.log('button clicked');
game.classList.add('animate');
click+=2;
npcPlayer.classList.add('carAnimate')
npcPlayer2.classList.add('carAnimate2')
npcPlayer3.classList.add('carAnimate3')
carAnimation.addEventListener('animationiteration', () => {
var random = Math.floor(Math.random() * 5);
left = random * 90 + 15;
carAnimation.style.left = left + "px";
counter++;
console.log(counter)
});
carAnimation2.addEventListener('animationiteration', () => {
var random1 = Math.floor(Math.random() * 5);
left = random1 * 90 + 15;
carAnimation2.style.left = left + "px";
counter++;
console.log(counter)
});
carAnimation3.addEventListener('animationiteration', () => {
var random1 = Math.floor(Math.random() * 5);
left = random1 * 90 + 15;
carAnimation3.style.left = left + "px";
counter++;
});
});
//Pausing the Game
pauseBtn.addEventListener('click', function(){
console.log('button clicked');
if(click>1){
game.classList.remove('animate');
click--
}
console.log(click)
});
//Resuming the Game
playBtn.addEventListener('click', function(){
console.log('button clicked');
if(click===1){
game.classList.add('animate');
click++;
console.log(click);
}
});
//Opening the Help Model
helpBtn.addEventListener('click', function(){
console.log('modal clicked')
modal.classList.remove('hidden')
});
//closing the help modal
closeModal.addEventListener('click', function(){
console.log('button clicked')
modal.classList.add('hidden')
});
//Moving Functions
function moveLeft() {
var left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
var transform = parseInt(window.getComputedStyle(player).getPropertyValue("transform"));
if (left > -0) {
player.style.left = left - 2 + "px";
player.style.transform = 'rotate(-' + 215 + 'deg)'
}
}
function moveRight() {
var left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
if (left < 385) {
player.style.left = left + 2 + "px";
player.style.transform = 'rotate(' + 215 + 'deg)'
}
}
function moveUp() {
var top = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
if (top > 0) {
player.style.top = top - 2 + "px";
player.style.transform = 'rotate(' + 180 + 'deg)'
}
}
function moveDown() {
var top = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
if (top < 490) {
player.style.top = top + 2 + "px";
player.style.transform = 'rotate(' + 180 + 'deg)'
}
}
//Make the pLayer move
document.addEventListener("keydown", (event) => {
if (both == 0) {
both++;
if (event.key === "ArrowLeft") {
interval = setInterval(moveLeft, 1);
}
if (event.key === "ArrowRight") {
interval = setInterval(moveRight, 1);
}
if (event.key === "ArrowUp") {
interval = setInterval(moveUp, 1);
}
if (event.key === "ArrowDown") {
interval = setInterval(moveDown, 1);
}
if (event.key === "a") {
interval = setInterval(moveLeft, 1);
}
if (event.key === "d") {
interval = setInterval(moveRight, 1);
}
if (event.key === "w") {
interval = setInterval(moveUp, 1);
}
if (event.key === "s") {
interval = setInterval(moveDown, 1);
}
}
});
document.addEventListener("keyup", (event) => {
clearInterval(interval);
both = 0;
player.style.transform = 'rotate(' + 180 + 'deg)'
});
}
</script>

Javascript audio object not playing on mobile devices

I made this audio player but the codesandbox does not work in mobile devices. It works perfectly fine in desktop.
I get 'Could not get the stack frame of error' error when i try to play song from my phone.
Audio player
The player gets audio files data in a javascript object and they get built into a list. The audios start playing when list item is clicked. The code looks like this
$(function () {
$("#time-progress").progress({ percent: 0 });
let audio = new Audio();
const songs = [
{
artist: "Yaru Makaveli & Yada Sads",
image: "https://i.ytimg.com/vi/rI2vJENDvmY/maxresdefault.jpg",
title: "Cypher Weyn",
song: "cypherweyn2.mp3"
},
{
artist: "Abebe Araya",
image: "https://i.ytimg.com/vi/mp_cR7pVEcw/maxresdefault.jpg",
title: "Natsnet",
song: "natsnet.mp3"
},
{
artist: "Shewit & Semere",
image: "https://i.ytimg.com/vi/ucolLdVzRyg/maxresdefault.jpg",
title: "Betey",
song: "betey.mp3"
},
{
artist: "Q Rap M.O.DB",
image: "https://i.scdn.co/image/ab6761610000e5eb749c5e25b3d167fd3008914b",
title: "Waero",
song: "waero.mp3"
},
{
artist: "Yaru Makaveli & Yada Sads",
image: "https://i.ytimg.com/vi/rI2vJENDvmY/maxresdefault.jpg",
title: "Tealime",
song: "tealime.mp3"
},
{
artist: "Eden Gebreselassie",
image:
"https://is4-ssl.mzstatic.com/image/thumb/Music116/v4/00/4a/14/004a1407-eaed-45d3-048d-12dae76b7d3f/artwork.jpg/375x375bb.jpg",
title: "Goblel",
song: "goblel.mp3"
},
{
artist: "Amanuel Yemane",
image: "https://i.ytimg.com/vi/iukjMznrHcI/maxresdefault.jpg",
title: "Adi Latni",
song: "adilatni.mp3"
},
{
artist: "Tmnit Welday",
image: "https://i.ytimg.com/vi/MqVT5GdW6hQ/maxresdefault.jpg",
title: "Segar",
song: "segar.mp3"
}
];
let list_of_songs = songs
.map(function (song, index) {
return ` <div class="item" data-src="${song.song}"" data-title="${song.title}" data-artist="${song.artist}" data-index=${index} data-image=${song.image}>
<img class="ui avatar image" src="${song.image}"">
<div class="content">
<div id="equalizer">
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
</div>
<i class="icon button-overlay circle outline"></i>
<span class="header">${song.title}</span>
<div class="description">${song.artist}</div>
</div>
</div>`;
})
.join("");
let play = document.querySelector("#play");
let currentSong = 0;
document.getElementById("song-list").innerHTML = list_of_songs;
audio = new Audio(`./music/${songs[0].song}`);
let icons = document.querySelectorAll(".icon");
$(document).on("click", ".item", function () {
let { src, artist, title, image, index } = this.dataset;
currentSong = Number(index);
let list_items = document.querySelectorAll(".item");
list_items.forEach((e) => {
e.classList.remove("active");
});
this.classList.add("active");
let newaudio = new Audio(`./music/${src}`);
if (audio.currentTime > 0 && !audio.paused && audio.src == newaudio.src) {
play.classList.remove("pause");
play.classList.add("play");
audio.pause();
this.querySelector(".button-overlay").classList.add("play");
this.querySelector(".button-overlay").classList.remove("pause");
} else if (
audio.currentTime > 0 &&
audio.paused &&
audio.src == newaudio.src
) {
play.classList.remove("play");
play.classList.add("pause");
this.querySelector(".button-overlay").classList.add("pause");
this.querySelector(".button-overlay").classList.remove("play");
audio.play();
} else {
this.querySelector(".button-overlay").classList.add("pause");
this.querySelector(".button-overlay").classList.remove("play");
playSong(src, artist, title, image);
}
});
audio.addEventListener("timeupdate", function (e) {
let currentTime = audio.currentTime;
let duration = audio.duration;
let minutes = Math.floor(currentTime / 60);
minutes = minutes >= 10 ? minutes : "0" + minutes;
let seconds = Math.floor(currentTime % 60);
seconds = seconds >= 10 ? seconds : "0" + seconds;
document.querySelector("#timer").innerText = `${minutes}:${seconds}`;
//progress
let status = Math.floor((currentTime / duration) * 100);
$("#time-progress").progress({ percent: status });
});
let artist_img = document.querySelector(".artist-image");
let song_title = document.querySelector("#title");
icons.forEach((icon) => {
icon.addEventListener("click", (e) => {
let type = e.target.dataset.type;
let image, src, artist, title;
var list_items = document.querySelectorAll(".item");
switch (type) {
case "play":
if (audio.currentTime > 0) {
play.classList.remove("play");
play.classList.add("pause");
play.dataset.type = "pause";
audio.play();
} else {
currentSong = 0;
let item = document.querySelector(".item");
item.classList.add("active");
item.querySelector(".icon").classList.add("pause");
document
.querySelector(".item")
.querySelector(".button-overlay")
.classList.remove("play");
const { song, artist, title, image } = songs[0];
playSong(song, title, artist, image);
}
break;
case "pause":
audio.pause();
artist_img.classList.remove("rotate-image");
e.target.classList.remove("pause");
e.target.classList.add("play");
e.target.dataset.type = "play";
break;
case "prev":
currentSong =
currentSong - 1 < 0 ? songs.length - 1 : currentSong - 1;
list_items.forEach((e) => {
e.classList.remove("active");
});
list_items[currentSong].classList.add("active");
var off =
$(".item.active").offset().top - $("#song-list").offset().top;
$("#song-list").scrollTop(off);
image = songs[currentSong].image;
src = songs[currentSong].song;
artist = songs[currentSong].artist;
title = songs[currentSong].title;
playSong(src, title, artist, image);
break;
case "next":
currentSong =
currentSong + 1 > songs.length - 1 ? 0 : currentSong + 1;
list_items.forEach((e, index) => {
e.classList.remove("active");
});
list_items[currentSong].classList.add("active");
var off =
$(".item.active").offset().top - $("#song-list").offset().top;
$("#song-list").scrollTop(off);
image = songs[currentSong].image;
src = songs[currentSong].song;
artist = songs[currentSong].artist;
title = songs[currentSong].title;
playSong(src, title, artist, image);
break;
default:
break;
}
});
});
function playSong(src, artist, title, image) {
document.querySelector(
".artist-img-bg"
).style.backgroundImage = `url(${image})`;
audio.src = `./music/${src}`;
artist_img.src = `${image}`;
artist_img.classList.add("rotate-image");
song_title.innerText = `${artist} - ${title}`;
document.querySelector("#title").classList.add("song-title");
play.classList.remove("play");
play.classList.add("pause");
play.dataset.type = "pause";
audio.play();
}
$(document).on("click", ".button-overlay", function () {
if (audio.currentTime > 0) {
this.classList.remove("play");
this.classList.add("pause");
audio.play();
}
});
});
body {
margin: 0;
padding: 0;
z-index: 101;
}
.container {
padding: 15px;
margin: 0 auto;
width: 100%;
background: linear-gradient(#042a45, #7295ae);
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
z-index: 100;
}
.music-player {
width: 400px;
height: auto;
background: linear-gradient(to top,#042a45, #7295ae);
border-radius: 1em;
display: flex;
align-items: center;
flex-direction: column;
padding: 10px;
}
#top-img-container {
width: 100%;
min-height: 200px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.artist-img-bg {
filter: blur(3px);
-webkit-filter: blur(3px);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: absolute;
z-index: 1;
width: 100%;
min-height: 200px;
}
.artist-image {
margin-top: 20px ;
max-height: 300px;
width: 150px;height: 150px;max-width: 300px;
border-radius: 50%;
box-shadow: 0 0 10px 10px #154275;
position: absolute;
z-index: 999;
}
.rotate-image {
animation:rotate 100s infinite;
animation-timing-function: linear;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(365deg);
}
}
.controls {
width: 100%;
margin-bottom: 2em;
margin-top: 1em;display: flex;
justify-content:space-around;
}
.icon {
color:aliceblue;
font-size: 1.5em !important;
cursor: pointer;
transition: transform .2s ease-in-out;
}
.icon:hover {
transform: scale(1.2);
}
.song-title-container {
position: relative;
overflow: hidden;
width: 90%;
margin: 10px auto 0;
}
.song-title {
margin: 10px 0 15px;
text-align: center;
color: #ffffff;
font-weight: 700;animation: song_title 7s infinite ease-in-out 3s;
animation-timing-function: linear;
position: relative;
}
#keyframes song_title {
0% {
left:0%;
} 49% {
left: -100%;
visibility: hidden;
} 50% {
left: 200%;
visibility: hidden;
}
51% {
left: 100%;
visibility: visible;
}
100% {
visibility: visible;
left: 0%
}
}
#timer, #song-list .header, #song-list .description {
color: white;
}
#playlist-title {
color: white;
width: 100%;
margin-left: 20px;
}
#song-list {
height: 200px;overflow-y: scroll;width: 95%;
background-color: #16415f;
border-radius: 1em;
}
#song-list .item {
cursor: pointer;
padding: 10px;
position: relative;
}
.item.active {
background-color: #38596e;
box-shadow: 0px 2px 10px #07141d;
}
.list-image {
position: relative;
display: inline;
}
.content .icon {
position: absolute;
left: 20px;
top: 20px;
visibility: hidden;
}
.item.active .content .button-overlay {
visibility: visible;
}
#song-list .avatar {
width: 3em;
height: 3em;
}
#song-list .item:hover {
background-color: #3a5a6f;
}
#equalizer {
position: absolute;
right: 5px;top: 50%;transform: translateY(-50%);width: 40px;
max-height: 20px;
visibility: hidden;
display: flex;
justify-content: space-evenly;
}
.item.active .content #equalizer {
visibility: visible;
}
#bar1, #bar2, #bar3, #bar4 {
background-color: #1aa303;
width: 2px;
}
#bar1 {
animation: bar1 1.2s linear infinite;
}
#bar2 {
animation: bar2 0.9s linear infinite;
}
#bar3 {
animation: bar2 1.4s linear infinite;
}
#bar4 {
animation: bar4 1s linear infinite;
}
#keyframes bar1 {
0% {
height: 5px;
}
50% {
height: 10px;
}
100% {
height: 5px;
}
}#keyframes bar2 {
0% {
height: 10px;
}
50% {
height: 5px;
}
100% {
height: 10px;
}
}
#keyframes bar3 {
0% {
height: 5px;
}
50% {
height: 10px;
}
100% {
height: 5px;
}
}
#keyframes bar4 {
0% {
height: 10px;
}
50% {
height:5px;
}
100% {
height: 10px;
}
}
<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" />
<title>Music Player</title>
<link rel="stylesheet" href="./main.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="ui-container container">
<div class="music-player">
<div id="top-img-container">
<div class="artist-img-bg"></div>
<img
src="https://i.pinimg.com/originals/1d/3a/26/1d3a2651f9ad02fb12aae08f618a2847.png"
class="artist-image"
alt="on and on"
/>
</div>
<div class="song-title-container">
<h3 id="title"></h3>
<div id="time-progress" class="ui tiny progress">
<div style="min-width: 1%" class="bar"></div>
<div id="timer" class="label">-00:00-</div>
</div>
</div>
<div class="controls">
<i data-type="prev" id="prev" class="icon backward"></i>
<i data-type="play" id="play" class="icon play circle outline"></i>
<i data-type="next" id="pause" class="icon forward"></i>
</div>
<h3 id="playlist-title">Playlist - Best of 2021</h3>
<div id="song-list" class="ui middle aligned divided list"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
It works fine in desktop browsers but it does not work in mobile devices. What am I doin wrong?

I want to pause/play CSS animation using one button with Javascript. The sun and sky colors should be controlled with the button

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<title>Keyframe Animations</title>
<link rel="stylesheet" href="SunLabcss.css" type="text/css"/>
<script src="scriptSun.js"></script>
</head>
<body>
<button id = "sunButton" onclick="sunPausePlayToggle()">PLAY/PAUSE</button
sunPausePlayToggle() is a function in JS which will control the animation .
<div id = "sunSky"
this is a div which i am using as a background sky
<div id = "sun"></div
the upper div is a sun which rise from right and dawn in the left
</div>
</body>
</html>
CSS code:
I am using keyframe animations to animate the sun and sky.
#keyframes risesky {
0% {
top: 100%;
left : 100%;
background-color: red;
}
50% {
left:50%;
top: 10%;
background-color: yellow;
}
100% {
background-color: orangered;
top: 100%;
left: 0%;
}
}
#keyframes sky {
0% , 100% {
background-color: #1c1341;
}
10% {
background-color: darkorange;
}
50% {
background-color: skyblue;
}
80% {
background-color: crimson;
}
}
#sunButton{
animation-play-state: running;
}
#sun {
position: relative;
border-radius: 50%;
width: 80px;
height: 80px;
animation: risesky 11s infinite;
}
#sunSky {
height: 500px;
overflow: hidden;
animation: sky 11s infinite both;
}
Javascript code:
here is the problem I am getting, I can only pause the animation in JS ,but can't play.
function sunPausePlayToggle(){
document.getElementById("sunSky").style.animationPlayState = "paused";
document.getElementById("sun").style.animationPlayState = "running";
}
Turn #sunButton = animation-play-state: "paused"; in css
And this is the js
function sunPausePlayToggle(){
let sunsky = document.getElementById("sunSky")
let sun = document.getElementById("sun")
const sky_sty = sunsky.style.animationPlayState === 'running';
const sun_sty = sun.style.animationPlayState === 'running';
sunsky.style.animationPlayState = sky_sty ? 'paused' : 'running';
sun.style.animationPlayState = sun_sty ? 'paused' : 'running';
}

how can i create smooth seeker in my video player like youtube player

I have created a player and I expected it to be smooth as a youtube player. But my player is not that smooth. and it also gives some bug-like
If I mouse down the slider and mousemove it and it slides but after mouse up, it doesn't stop the slide on mousemove and it doesn't give the same result I expected
window.onload = function(){
var music = document.getElementById('music');
music.src = 'https://fr01.mp3snow.com/4d1c6fa75beebf67d9969/Charlie%20Puth%20-%20We%20Don%20t%20Talk%20Anymore%20feat.%20Selena%20Gomez.mp3'
setTimeout(()=>{
var play = document.getElementById('playpause')
//slider for music
var slider = document.getElementById('slider');
//slider Container for slider in music player
var sliderCon = document.getElementById('sliderCon');
var clicked = false;
var body = document.querySelector('body');
var timer = document.getElementById('time');
var durat = document.getElementById('duration');
sliderCon.onmousedown = (e) => {
music.currentTime = (e.offsetX/sliderCon.offsetWidth)*music.duration;
clicked = true;
}
window.onmousemove = (e) =>{
if(clicked == true){
music.currentTime = (e.offsetX/sliderCon.offsetWidth)*music.duration;
if(music.ended == true){
music.play()
}
body.style.cursor = 'grabbing' ;
}
window.onmouseup = () => {
clicked = false;
body.style.cursor = 'inherit';
}
}
function timing(totaltime){
if (totaltime>60){
var minute = Math.floor(totaltime/60)
var second = Math.floor(totaltime%60)
if(minute>9){
var time;
if (second >9){
time = minute+':'+second;
}else{
time = minute+':'+'0'+second;
}
}else if (minute<10){
var time;
if (second >9){
time = '0'+minute+':'+second;
}else{
time = '0'+minute+':'+'0'+second;
}
}
}
else{
if (totaltime<10){
var time = '00:0'+Math.floor(totaltime)
}else{
var time = '00:'+Math.floor(totaltime)
}
}
return time;
}
music.ontimeupdate = () =>{
var sliderWidth = (music.currentTime/music.duration)*100;
slider.style.width = sliderWidth+'%';
timer.innerHTML = timing(music.currentTime)
durat.innerHTML = timing(music.duration)
}
play.onselect = () =>{
document.click();
}
play.onclick = (e) => {
if(music.paused == true || music.ended == true){
music.play();
play.innerHTML = '<i class="fas fa-pause"></i>';
}else if (music.paused == false || music.ended == false){
music.pause();
play.innerHTML = '<i class="fas fa-play"></i>';
}
}
window.onkeydown = (key) => {
if (key.key == 'ArrowRight'){
music.currentTime += 5
}
if (key.key == 'ArrowLeft') {
music.currentTime -= 5
}
if (key.key == ' ') {
if(music.paused == true || music.ended == true){
music.play();
play.innerHTML = 'PAUSE';
}else if (music.paused == false || music.ended == false){
music.pause();
play.innerHTML = 'PLAY';
}
}
if (key.key == 'ArrowUp'){
if(music.volume < 1){
music.volume +=0.1;
}
}
if (key.key == 'ArrowDown'){
if(music.volume > 0.1){
music.volume -=0.1;
}
}
if (key.code == 'NumpadAdd'){
if (music.playbackRate < 2.0){
music.playbackRate += 0.1
}
}
if (key.code == 'NumpadSubtract'){
if (music.playbackRate > 0.1){
music.playbackRate -= 0.1
}
}
if (key.key == 'h'){
music.playbackRate = -1.0;
}
}
},0)
var loaded = document.getElementById('loaded');
console.log(loaded)
music.addEventListener('progress', function(e) {
setTimeout(()=>{
loaded.style.width = Math.round((this.buffered.end(0)/this.duration) * 100)+'%';
},6)
});
}
*{
margin: 0;
padding: 0;
}
body{
background-color: rgba(32, 29, 29, 0.89);
}
.playpause{
color: rgb(255, 248, 248);
left: 22%;
position: relative;
top: 16%;
font-size: 3rem;
font-family: sans-serif;
}
#duration{
color: rgb(255, 248, 248);
text-align: right;
margin-right: 5px;
font-size: 1rem;
font-family: sans-serif;
position: relative;
top: -1rem;
}
#time{
color: rgb(255, 248, 248);
text-align: left;
margin-left: 5px;
font-size: 1rem;
font-family: sans-serif;
}
#fornow{
background-color: rgb(116, 116, 150);
width: 80%;
margin: 50px auto;
height: 150px;
}
.sliderCon{
width: 90%;
margin: 0 auto;
position: relative;
top: 70px;
background-color: rgb(197, 192, 192);
height: 6px;
transition: 0.3s;
}
.slider{
position: relative;
height: 100%;
width: 0%;
transition: 0.3s;
background-color: rgb(228, 54, 54);
}
.sliderCon:hover{
height: 10px;
top: 67px;
cursor: grab;
}
.thumb{
width: 18px;
height: 18px;
background-color: rgb(228, 54, 54);
position: absolute;
margin-left: 98%;
border-radius: 50%;
margin-top: -5px;
transition: 0.3s;
pointer-events: none;
}
.sliderCon:hover .thumb{
margin-left: 97%;
width: 20px;
height: 20px;
}
#loaded{
background-color: rgba(226, 95, 95, 0.616);
position: absolute;
width: 0%;
height: 100%;
}
#loading{
width: 60px;
height: 60px;
background-color: transparent;
margin: 0 auto;
border: 5px solid;
border-color: teal;
transition: 1s;
border-radius: 50%;
animation: load 1s infinite;
animation-fill-mode: both;
border-top-color: tomato;
display: none;
}
#keyframes load{
to{
transform: rotate(360deg);
}
}
.yo{
width: 75px;
height: 75px;
background-color: cyan;
margin: 0 auto;
border-radius: 50%;
position: relative;
}
<!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">
<title>Player</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<audio src="./" id="music"></audio>
<div class="player">
<div id="fornow">
<div class="sliderCon" id="sliderCon">
<div id="loaded">
</div>
<div class="slider" id="slider">
<div class="thumb" id="thumb"></div>
</div>
</div>
</div>
<div id="time">00:00</div>
<div id="duration">00:00</div>
<div id="loading">
</div>
<div class="controls">
<div class="backward"></div>
<div class="yo">
<div class="playpause" id="playpause"><i class="fas fa-play"></i></div>
</div>
<div class="forward"></div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
It is the Code You can run it and see that it is not smooth as youtube
and it is also declared that youtube player is not flash
so what is the secret of youtube players that I don't know?
Please tell me the answer if anyone knows. sorry This is my personal project so I didn't commented it or name it very well
Thank You

Java script game

I'm looking for some help with my java script game as i have just started getting into it now,
my problem is that my animation loops infinitely on autopay and reloads the page every time it meets the condition to restart,
what I want to achieve is have a start button that would start the game and the animation and score on click and if the condition for restart is met I have to press the start button again to play again
I would appreciate all the help I could get
const skate = document.getElementById("skate");
const rock = document.getElementById("rock");
const score = document.getElementById("score");
function jump() {
skate.classList.add("jump-animation");
setTimeout(() =>
skate.classList.remove("jump-animation"), 500);
}
document.addEventListener('keypress', (event) => {
if (!skate.classList.contains('jump-animation')) {
jump();
}
})
setInterval(() => {
const skateTop = parseInt(window.getComputedStyle(skate)
.getPropertyValue('top'));
const rockLeft = parseInt(window.getComputedStyle(rock)
.getPropertyValue('left'));
score.innerText++;
if (rockLeft < 0) {
rock.style.display = 'none';
} else {
rock.style.display = ''
}
if (rockLeft < 50 && rockLeft > 0 && skateTop > 150) {
location.reload();
}
}, 50);
#score { text-align: center; }
#game {
width: 600px;
height: 300px;
border: 2px solid black;
margin: auto;
background-image: url("./background.gif");
background-size: cover;
}
#skate {
height: 75px;
width: 75px;
top: 220px;
position: relative;
background-image: url("./skateboard.png");
background-size: cover;
}
#rock {
width: 50px;
height: 50px;
position: relative;
top: 175px;
left: 550px;
background-image: url("./rock.png");
background-size: cover;
animation: rock 1.33s infinite;
}
#keyframes rock {
0%{left: 550px;}
100%{left: -50px;}
}
.jump-animation {
animation: jump 0.5s;
}
#keyframes jump {
0%{top: 225px;}
50%{top: 75px;}
75%{top: 75px;}
100%{top: 225px;}
}
<div id="game">
<div id="skate"></div>
<div id="rock"></div>
</div>
<h1 id="score">0</h1>
The trick here is to have a variable at the top scope of this module to track the ID of the current animation so that the animation/interval can be turned off if the user presses the start button before the current game ends. It should also turn off once the end-game condition is met, although I'm not really sure why window.getComputedStyle() is being used to compute the variables used for that condition, but I guess it's still a work in progress.
EDIT: Somehow I didn't notice that the player and obstacle were already in the game so I added colors to them for easier debugging, at least on my end. This time I made it so that the rock will lose then immediately regain a class for its animation, but the re-addition needs to be asynchronous even if the delay is 0ms.
index.html
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game">
<div id="skate"></div>
<div id="rock"></div>
</div>
<h1 id="score">0</h1>
</div>
<div>
<button id="new-game">New Game </button>
</div>
</body>
<script>
const skate = document.getElementById("skate");
const rock = document.getElementById("rock");
const score = document.getElementById("score");
const newGameButton = document.getElementById("new-game");
function jump() {
skate.classList.add("jump-animation");
setTimeout(() => skate.classList.remove("jump-animation"), 500);
}
document.addEventListener('keypress', (event) => {
if (!skate.classList.contains('jump-animation')) {
jump();
}
});
let animationId;
newGameButton.addEventListener('click', () => {
resetScore();
resetRockAnimation();
playScoreAnimation();
function resetScore() {
clearInterval(animationId);
score.innerText = 0;
}
function resetRockAnimation() {
rock.classList = [];
setTimeout(() => rock.classList.add('rock-animation'), 0);
}
function playScoreAnimation() {
animationId = setInterval(() => {
const skateTop = parseInt(window.getComputedStyle(skate).getPropertyValue('top'));
const rockLeft = parseInt(window.getComputedStyle(rock).getPropertyValue('left'));
score.innerText++;
if (rockLeft < 0) {
rock.style.display = 'none';
}
else {
rock.style.display = '';
}
if (rockLeft < 50 && rockLeft > 0 && skateTop > 150) {
clearInterval(animationId);
}
}, 50);
}
});
</script>
style.css
#score {
text-align: center;
}
#game {
width: 600px;
height: 300px;
border: 2px solid black;
margin: auto;
background-image: url("./background.gif");
background-size: cover;
}
#skate {
height: 75px;
width: 75px;
top: 225px;
position: relative;
background-image: url("./skateboard.png");
background-size: cover;
background-color: slategrey;
}
#rock {
width: 50px;
height: 50px;
position: relative;
top: 175px;
left: 550px;
background-image: url("./rock.png");
background-size: cover;
background-color: lightcoral ;
}
.rock-animation {
animation: rock 1.33s infinite;
}
#keyframes rock {
0% {
left: 550px;
}
100% {
left: -50px;
}
}
.jump-animation {
animation: jump 0.5s;
}
#keyframes jump {
0% {
top: 225px;
}
50% {
top: 75px;
}
75% {
top: 75px;
}
100% {
top: 225px;
}
}

Categories

Resources