const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
canvas.height = window.innerHeight - 20
canvas.width = 1000
let speed = 13
let pause = false
let score = 0
let highScore = localStorage.getItem('highScore') ? localStorage.getItem('highScore') : 0
let prevScoreCount = 0
let nextScoreCount = Math.floor(score / 10)
const renderScore = () => {
document.querySelector('#score').innerHTML = score
}
const renderHighScore = () => {
document.querySelector('#highScore').innerHTML = highScore
}
renderScore()
renderHighScore()
const skyBox = new Image()
skyBox.src = './assets/road.png'
skyBox.onload = () => {
let y = 0
const moveRoad = () => {
ctx.drawImage(skyBox, 0, y - canvas.height, canvas.width, canvas.height * 2)
y += speed
if (y >= canvas.height)
y = 0
if (pause) return
requestAnimationFrame(moveRoad)
}
moveRoad()
}
const playerCar = new Image()
playerCar.src = './assets/cars/Audi.png'
let playerCarPositionX = 380 // canvas.width/2 - playerCar.width/2
// let playerCarPositionY = canvas.height - playerCar.height
const drawCar = () => {
let playerCarPositionY = canvas.height - playerCar.height
ctx.drawImage(playerCar, playerCarPositionX, playerCarPositionY)
if (pause) return
requestAnimationFrame(drawCar)
}
playerCar.onload = () => {
drawCar()
}
const spawnCars = (posY) => {
const obstaclePosition = [30, 380, 730]
const obstacleImage = new Image()
obstacleImage.src = './assets/cars/Police.png'
let obstaclePositionX = obstaclePosition[Math.floor(Math.random() * obstaclePosition.length)]
let obstaclePositionY = posY
const obstacle = () => {
ctx.drawImage(obstacleImage, obstaclePositionX, obstaclePositionY)
obstaclePositionY += speed
if (obstaclePositionY > canvas.height) {
score++
renderScore()
if (score > highScore) {
highScore = score
renderHighScore()
}
speed += 0
obstaclePositionX = obstaclePosition[Math.floor(Math.random() * obstaclePosition.length)]
obstaclePositionY = -270
}
if (pause) return
requestAnimationFrame(obstacle)
if (obstaclePositionX == playerCarPositionX && canvas.height - obstaclePositionY < 430 && canvas.height - obstaclePositionY > 0) {
pause = true
if (score == highScore) {
localStorage.setItem('highScore', score)
swal('Congratulations', `You beat the previous score. Your new score is ${score}.`, 'success')
.then(() => window.location.reload())
} else {
swal('Game Over', `SCORE: ${score}`, 'error')
.then(() => window.location.reload())
}
}
}
obstacleImage.onload = () => {
obstacle()
}
}
spawnCars(-5)
spawnCars(-750)
document.addEventListener('keydown', e => {
if (e.code == 'ArrowLeft' && playerCarPositionX > 30)
playerCarPositionX -= 350
if (e.code == 'ArrowRight' && playerCarPositionX < 730)
playerCarPositionX += 350
if (e.code == 'ShiftLeft' || e.code == 'ShiftRight')
speed += 10
})
document.addEventListener('keyup', e => {
if (e.code == 'ShiftLeft' || e.code == 'ShiftRight')
speed -= 10
})
console.log(obstacleImage.height, playerCar.height)