Is it possible to fix my code so that there are multiple balls showing up randomly and constantly in the game at the same time? Currently the balls are showing up one at a time every 1.5 seconds. I think I might need to change the interval in the start function possibly.
I’m still new at coding and I’m not quite sure how to achieve this. Thank you in advance
Here is my Javascript code:
// Declaring the images to use
var imagesArray = [
"./green-ball.png",
"./yellow-ball.png",
"./blue-ball.png",
"./light-pink-ball.png",
"./purple-ball.png",
];
// Declaring the starting points
let score = 0;
let timer = 15;
var interval;
let timeLeft = 15;
let lastScore = 0;
// Setting game and images
var img = document.createElement("img")
const images = document.getElementsByClassName(imagesArray);
var game = document.getElementById("game");
const scoreElement = document.getElementById("score");
const timerElement = document.getElementById("timer");
// Game over function - clearing the info and resetting variables and updating the last score
function gameOver() {
var lastScoreElement = document.getElementById("lastScore");
clearInterval(timer);
clearInterval(interval);
$("#playAgainButton").show();
$("#lastScore").show(
lastScoreElement.textContent = " " + score
);
ResetGlobalVariables;
}
// Making the random function
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//Creating the images to show up in random positions
function createImage() {
img.src = imagesArray[random(0, imagesArray.length - 1)];
img.width = random(50, 200);
img.height = random(50, 200);
img.style.left = random(0, 800 - img.width) + "px";
img.style.top = random(0, 600 - img.height) + "px";
img.alt = img.src.split('/').pop(); // to show the colour
return img;
}
// Creating the updateTimer function - once timer runs out, game is over
function updateTimer() {
timeLeft = timeLeft - 1;
if(timeLeft >= 0)
$("#timer").html(timeLeft);
else {
gameOver();
}; 1000;
}
// Creating the start of the game - setting the timer and creating the balls
function start() {
timer = setInterval(updateTimer, 1000);
updateTimer();
$("#playAgainButton").hide();
interval = setInterval(function() {
var img = createImage();
game.appendChild(img);
}, 1500);
}
// Function to reset the global variables - clean slate
function ResetGlobalVariables() {
score = 0;
scoreElement.innerHTML = "Current Score: " + score;
timer = 15;
timerElement.innerHTML = timer;
timeLeft = 15;
}
// Update when the reset button is clicked
const resetBtn = document.querySelector(".reset-button")
resetBtn.addEventListener("click", ResetGlobalVariables)
// Add event listener - if the ball is green update the score, if the ball is any other colour lose a point
game.addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.matches('img')) return; // not a ball
if (!tgt.src.includes('green'))score--; // not green
else
score++;
scoreElement.innerHTML = "Current Score: " + score;
});
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Find Greenie</title>
<link rel="stylesheet" href="find.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<div id="game"></div>
</td>
<td id="text">
<p id="gameTitle">Find Greenie!<img src="green-ball.png" alt="Logo"></p>
<p id="score">Current Score: 0</p>
<p> You have: <span id="timer">15</span> seconds remaining!</p>
<button id="playAgainButton" onclick="start()">Go!</button>
<input id="reset" type="button" class="reset-button" value="Reset">
<p> You scored: <span id="lastScore"></span></p>
<br>
<br>
<p>Click on Greenie the green ball to score points</p>
<p>But click on any other ball and lose a point!</p>
<p>Click Reset and then Go! to restart</p>
<script src="find.js"></script>
</td>
</tr>
</table>
</body>
</html>