I make easy Javascript 2D game without canvas where cube just moves with arrow keys and when cube touches circle you get +1 point but I have last and important issue this scoring function doesn't work
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">
<title>Javascript Game</title>
</head>
<body>
<h4 class="points">0</h4>
<div class="container">
<div class="player-1"></div>
<div class="player-2"></div>
<div class="score-ball"></div>
</div>
</body>
<script src="app.js"></script>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins';
}
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #14191f;
overflow: hidden;
}
.container{
width: 100%;
height: 100vh;
border: 2px solid #ff0000;
display: flex;
justify-content: center;
align-items: center;
}
.player-1{
z-index: 0;
transition: 0.5s;
width: 40px;
height: 40px;
background: #942626;
border-radius: 8px;
position: absolute;
}
.player-2{
z-index: 0;
transition: 0.5s;
width: 40px;
height: 40px;
background: #97ff52;
border-radius: 8px;
position: absolute;
}
h4{
z-index: 1;
color: #FFF;
position: absolute;
right: 0;
top: 0;
margin: 20px;
}
.score-ball{
background: #fff952;
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
}
Javascript
//Setting up DOM
const points = document.querySelector('.points')
const player_one = document.querySelector('.player-1')
const player_two = document.querySelector('.player-2')
const score_ball = document.querySelector('.score-ball')
const generate = document.querySelector('.generate')
//Setup Score
let startingPoints = 0
//Some settings of players
const playerOneSettings = {
color: 'red',
movement: 10
}
const playerTwoSettings = {
color: 'blue',
movement: 10
}
//I have Issue here, I'm just testing if it works or not but when I reload page it already outputs in console "You scored"
//When its not I also tried to put this function in window.load listener but this way doesnt output anything when
//both's left value are same
const score = () =>{
if(player_one.style.left == score_ball.style.left){
console.log('You Scored')
}
}
score()
//This function generates randomly score ball on the page which number's last character ends on 0
const generateScoreBall = ()=>{
const randomLeft = Math.floor(Math.random() * 1500)
const randomTop = Math.floor(Math.random() * 730)
score_ball.style.left = `${parseInt(Math.round(randomLeft/10)*10)}px`
score_ball.style.top = `${parseInt(Math.round(randomTop/10)*10)}px`
}
//setting up cubes and score-ball on page
window.addEventListener('load', ()=>{
player_one.style.left = 0;
player_one.style.top = 0;
player_two.style.left = 0;
player_two.style.top = 0;
score_ball.style.left = 0;
score_ball.style.top = 0;
generateScoreBall()
})
//that function make cubes move-able
window.addEventListener('keyup', (event) => {
if(event.keyCode == 37){
player_one.style.left = `${parseInt(player_one.style.left) - playerOneSettings.movement}px`;
}else if(event.keyCode == 39){
player_one.style.left = `${parseInt(player_one.style.left) + playerOneSettings.movement}px`;
} else if(event.keyCode == 38){
player_one.style.top = `${parseInt(player_one.style.top) - playerOneSettings.movement}px`
}else if(event.keyCode == 40){
player_one.style.top = `${parseInt(player_one.style.top) + playerOneSettings.movement}px`
} else if(event.key == 'a'){
player_two.style.left = `${parseInt(player_two.style.left) - playerTwoSettings.movement}px`
}else if(event.key == 'w'){
player_two.style.top = `${parseInt(player_two.style.top) - playerTwoSettings.movement}px`
} else if(event.key == 's'){
player_two.style.top = `${parseInt(player_two.style.top) + playerTwoSettings.movement}px`
}else if(event.key == 'd'){
player_two.style.left = `${parseInt(player_two.style.left) + playerTwoSettings.movement}px`
}
})
for the testing I used only player.style.left to see, if it works or not, while I put that function just outside it outputs 'You scored when player's and score-ball's value don't equal, but when I put that in window.load listener function doesn't work
Aucun commentaire:
Enregistrer un commentaire