Hello guys. Hope everyone is well and safe.
I am coding a Breakout Game and I am having such a hard time to find a way to make my PLAYFUNCTION() to work properly. Most features work fine but I cannot make the SETINTERVAL() function to start every time the user is prompted to restart the game while they still have lives remaining.
Any help will be greatly appreciated.
Thanks a lot
https://codepen.io/colchester/pen/qBqGYZZ
<!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>BREAKOUT TESTING</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav class="main">
<div class="headers header1">
<p>SCORE: <span class="spano" id='score'>score</span> <span> | </span>
<span>LIVES:</span><span class="spano" id="remain">lives</span></p>
</div>
<div class="headers header2">
<p>PADDLE POSITION: <span class="spano" id="paddlePosition">paddle</span> <span> | </span>
<span>CONST POSITION:</span><span class="spano" id="constPosition">const</span></p>
</div>
<div class="headers header3">
<p>BALL POSITION: <span class="spano" id="ballPosition">ball</span> <span> | </span>
<span>OTHER COUNT:</span><span class="spano" id="otherCount">other</span></p>
</div>
<div class="grid"></div>
<div class="footers footer1">
<button class="btn1" id='startButton' onclick="startFunction()">New Game</button>
<button class="btn2" id='playButton' onclick="playFunction()">Play Game</button>
</div>
</nav>
<script src="/js/index.js"></script>
</body>
</html>
body {
background-color: white;
}
.main {
position: absolute;
width: 800px;
height: 654px;
border: solid 2px black;
background-color: #4b5153;
padding: 2px;
top: 4%;
left: 25%;
right: 25%;
}
.headers {
font-size: 20px;
font-weight: 800;
color: white;
text-align: center;
align-items: center;
background-color: rgb(33, 6, 131);
}
.header1 {
position: absolute;
Top: 2px;
width: 798px;
height: 50px;
border: solid 1px white;
}
.header2 {
position: absolute;
top: 55px;
width: 798px;
height: 50px;
border: solid 1px white;
}
.header3 {
position: absolute;
top: 109px;
width: 798px;
height: 50px;
border: solid 1px white;
}
.spano {
width: 100px;
height: 25px;
color: rgb(247, 177, 72);
font-size: 23px;
font-weight: 900;
}
.grid {
position: absolute;
top: 162px;
width: 798px;
height: 430px;
border: solid 1px white;
background-color: #111;
}
.footers {
position: absolute;
background-color: rgb(33, 6, 131);
}
.footer1 {
position: absolute;
Top: 596px;
width: 798px;
height: 58px;
border: solid 1px white;
font-size: 20px;
font-weight: 800;
color: white;
text-align: center;
align-items: center;
}
.btn1 {
position: absolute;
border-radius: 2px;
border: solid 2px white;
font-size: 15px;
font-weight: 800;
width: 160px;
height: 30px;
top: 25%;
left: 200px;
}
.btn2 {
position: absolute;
border-radius: 2px;
border: solid 2px white;
font-size: 15px;
font-weight: 800;
width: 160px;
height: 30px;
top: 25%;
left: 440px;
}
.paddle {
position: absolute;
width: 100px;
height: 20px;
background-color: white;
}
.ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
background: red;
}
const grid = document.querySelector('.grid')
const scoreDisplay = document.querySelector("#score")
const livesDisplay = document.querySelector("#remain")
const paddleDisplay = document.querySelector("#paddlePosition")
const constDisplay = document.querySelector("#constPosition")
const ballDisplay = document.querySelector("#ballPosition")
const otherDisplay = document.querySelector("#otherCount")
let isClicked
const boardWidth = 798
const boardHeight = 430
const blockWidth = 100
const blockHeight = 20
const ballDiameter = 20
let xDirection = -2
let yDirection = 2
let score
let lives = 0
let paddleStart = [349, 10]
const constPosition = [349, 180]
let paddleCurrentPosition
let ballFakePosition = [389, 200]
let ballStartPosition = [389, 30]
let ballCurrentPosition
let otherCount
let timerId
let interval = 40
function startFunction() {
if (lives === 0) {
lives = 4
score = 400
paddleCurrentPosition = constPosition
ballCurrentPosition = ballFakePosition
otherCount = constPosition
isClicked = false
paddle.style.display = "block"
ball.style.display = "block"
// drawPaddle()
update()
}
}
function playFunction() {
isClicked = true
if (lives > 0 && lives < 5 && isClicked === true) {
//lives --
score -= 100
paddleCurrentPosition = [349, 10] // constPosition // paddleStart
document.addEventListener("keydown", movePaddle)
// paddle.style.display = "block"
// drawPaddle()
ballCurrentPosition = ballStartPosition
otherCount = constPosition
update()
timerId = setInterval(moveBall, interval)
}
}
//isClicked = false
function update() {
scoreDisplay.innerText = score
livesDisplay.innerText = lives
paddleDisplay.innerText = paddleCurrentPosition
constDisplay.innerText = constPosition
ballDisplay.innerText = ballCurrentPosition
otherDisplay.innerText = otherCount
drawPaddle()
drawBall()
}
//Add Paddle Function
const paddle = document.createElement("div")
paddle.classList.add("paddle")
grid.appendChild(paddle)
//Draw Paddle
function drawPaddle() {
paddle.style.left = paddleCurrentPosition[0] + "px"
paddle.style.bottom = paddleCurrentPosition[1] + "px"
}
paddle.style.display = "none"
//Move Paddle
function movePaddle(e) {
switch (e.key) {
case "ArrowLeft":
if (paddleCurrentPosition[0] > 10) {
paddleCurrentPosition[0] -= 10
// update()
drawPaddle()
}
break
case "ArrowRight":
if (paddleCurrentPosition[0] < boardWidth - (blockWidth + 10)) {
paddleCurrentPosition[0] += 10
// update()
drawPaddle()
}
break
}
}
//Add Ball
const ball = document.createElement("div")
ball.classList.add("ball")
grid.appendChild(ball)
//draw Ball
function drawBall() {
ball.style.left = ballCurrentPosition[0] + "px"
ball.style.bottom = ballCurrentPosition[1] + "px"
}
ball.style.display = "none"
//Move the Ball
function moveBall() {
ballCurrentPosition[0] += xDirection
ballCurrentPosition[1] += yDirection
drawBall()
checkForCollisions()
}
//Check for Collisions
function checkForCollisions() {
ballDisplay.innerText = ballCurrentPosition
// Check for Wall Hits
if (
ballCurrentPosition[0] >= boardWidth - ballDiameter ||
ballCurrentPosition[0] <= 0 ||
ballCurrentPosition[1] >= boardHeight - ballDiameter
) {
changeDirection()
}
//Check for User Collision
if (
ballCurrentPosition[0] > paddleCurrentPosition[0] &&
ballCurrentPosition[0] < paddleCurrentPosition[0] + blockWidth &&
ballCurrentPosition[1] > paddleCurrentPosition[1] &&
ballCurrentPosition[1] < paddleCurrentPosition[1] + blockHeight
) {
changeDirection()
}
//Check for Game Over
if (ballCurrentPosition[1] <= 0) {
ballCurrentPosition = ballFakePosition
isClicked = false
clearInterval(timerId)
lives --
document.removeEventListener("keydown", movePaddle)
update()
}
}
function changeDirection() {
if (xDirection === 2 && yDirection === 2) {
yDirection = -2
return
}
if (xDirection === 2 && yDirection === -2) {
xDirection = -2
return
}
if (xDirection === -2 && yDirection === -2) {
yDirection = 2
return
}
if (xDirection === -2 && yDirection === 2) {
xDirection = 2
return
}
}