html5 гонка

[serke7771]

Хорошая игра https://github.com/Prashant-Acharya/car-racing

В папке js редактируем файл app.js

Spoiler: ShowHide

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)

Где speed скорость, а

spawnCars(-5)
spawnCars(-5)

задаёт расстояние между машинами. obstaclePositionY- расстояние вообще. Необходимо только играться с параметрами при уменьшенном масштабе до 30%, а то не видно сразу как всё меняется.

Можно убрать постепенное нарастание скорости. Тип машины изменить просто на другой png.

Запуск игры index.html