I am currently developing a game using HTML, CSS, and jQuery. The game will involve falling blocks that the player needs to avoid.
However, I am facing an issue with my jQuery implementation. When selecting a theme (only the dark theme is currently functional), the player does not appear on the screen:
$(document).ready(function() {
$('#options').change(function() { // NOTE: all themes have capital letters on colors
if ($(this).val() === 'Dark') {
$("#game").css("background-color", "black");
$("#player").css({
"background-color": "white" // utilizing CSS function for potential additional styling
});
}
});
$("#play").click(function() {
$(this).hide();
$("#options").hide();
$("#player").show();
});
});body {
background-color: #FFFFFF;
font-family: helvetica, sans-serif;
}
.block {
width: 60px;
height: 60px;
position: absolute
}
#game {
width: 1000px;
height: 550px;
border: 3px solid #000000;
margin: 2% 10%;
}
#player {
width: 40px;
height: 40px;
left: 50%;
bottom: 0;
position: absolute
}
#play {
padding: 1%;
color: white;
background-color: black;
border-style: solid;
}
#options {}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trash Fall - Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- adding jQuery to the script -->
<script src="script.js"></script>
</head>
<body>
<h1 id="main_title">Color Drop</h1>
<div id="game">
<button id="play">Play</button>
<select id="options">
<option value="none">none (choose one in order to play)</option>
<option value="Dark">Dark</option>
<option value="Light">Light</option>
<option value="Blue_White">Blue/White</option>
<option value="Red_White">Red/White</option>
</select>
<div id="player"></div>
</div>
</body>
</html>NOTE: While this code snippet appears to work, it is not functioning as intended on GitHub (where I am building the game): example GitHub link
Could you please advise why this is causing issues?
Additionally, why are the theme and player elements not displaying correctly within the game section upon theme selection?
Github repository link: https://github.com/FlipFloop/Color-Drop
Thank you!